大家好！
我是小黄，很高兴又跟大家见面啦 ！
今天更新的是：
- web程序设计笔记（八）-做一个下拉框选择按钮
- 往期检索：程序设计学习笔记——目录
创建时间：2020年10月24日
软件版本：HBuilder X 2.8.12.20200926
目录 ：
- 项目工程：
- index.html 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 创建关联文件 myload() , 当页面加载的时候就会读取 index文件里面的myload-->
<script src="js/onload.js" type="text/javascript" charset="utf-8"></script>
</head>
<!-- 欢迎访问我的网站如何定义 -->
<body onload="myload()">
<div id="">
<!-- 创建按钮 onclick :定义一个方法 -->
<input type="button" name="" id="mybin" value="点击我" onclick="myclick()"/>
<!-- 创建文本框 id ：定义属性-->
<input type="text" name="" id="mytxt" value="0" />
<input type="button" name="" id="" value="重0开始" onclick="setZero()"/>
</div>
<!-- 添加下拉列表项：对应选项产生不同的效果 -->
<div id="">
<!-- 选择会员类型： -->
选择会员类型 ：
<select id="myCard" onchange="selectCard()">
<option value ="1">超级会员</option>
<option value ="2">普通会员</option>
</select>
折扣强度：
<!-- 创建下拉列表 ： -->
<select id="myselect" onchange="myChange()">
<!-- 创建下拉列表选项 ：-->
<option value ="0">--请选择--</option>
<!-- 百分号% 程序不认要转换为小数 -->
<option value ="0.1">9折</option>
<option value ="0.2">8折</option>
</select>
</div>
</body>
</html>
- onload.js 文件
function myload(){
// 创建弹窗 ：
alert("欢迎您来到我的世界 ！");
}
// 创建变量
var i = 0 ;
function myclick(){
nload
i++ ;
var text = document.getElementById("mytxt").value = i;
}
// 定义重0开始
function setZero(){
document.getElementById("mytxt").value = 0;
// 需要将变量复位
i = 0 ;
}
//
function myChange(){
// 创建调试方法：
//创建一个打印看是否能用 ！，最好用console.log("1111") F12 控制台会输入
// alert("hhhhhhhhhhhhh") // alert 这是一个弹窗
document.getElementById("myselect").value;
alert(s);
var result = 1000*eval(s);
alert(result);
}
// 当点击会员类型时，超级会员打五折和6折 ，普通会员打8折到9折
// select 动态的往选项框添加东西
function selectCard(){
var s = document.getElementById("myselect");
var sc = document.getElementById("myCard").value;
var intSc = parseInt(sc);
switch (intSc){
case 1:
alert("超级会员");
// 清理选项相框：
s.options.length=0;
s.options.add(new Option("五折","0.5"));
s.options.add(new Option("六折","0.4"));
break;
case 2:
alert("普通会员");
s.options.length=0;
s.options.add(new Option("九折","0.1"));
s.options.add(new Option("八折","0.2"));
break;
default:
alert("请选择会员类型 ！");
break;
}
}
- 效果展示：
各位路过的朋友，如果觉得可以学到些什么的话，点个赞 再走吧，欢迎各位路过的大佬评论，指正错误，也欢迎有问题的小伙伴评论留言，私信。
每个小伙伴的关注都是本人更新博客的动力！！！
请微信搜索【 在下小黄 】文章更新将在第一时间阅读 ！
把握现在 ，展望未来 ，加油 ！
由于水平有限 ，写的难免会有些不足之处 ，恳请各位大佬不吝赐教 ！