大家好!
我是小黄,很高兴又跟大家见面啦 !
今天更新的是:
- 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;
}
}
- 效果展示:
各位路过的朋友,如果觉得可以学到些什么的话,点个赞 再走吧,欢迎各位路过的大佬评论,指正错误,也欢迎有问题的小伙伴评论留言,私信。
每个小伙伴的关注都是本人更新博客的动力!!!
请微信搜索【 在下小黄 】文章更新将在第一时间阅读 !
把握现在 ,展望未来 ,加油 !
由于水平有限 ,写的难免会有些不足之处 ,恳请各位大佬不吝赐教 !