web程序设计笔记（八）-做一个下拉框选择按钮

最新推荐文章于 2023-10-22 15:43:28 发布

在下小黄

最新推荐文章于 2023-10-22 15:43:28 发布

阅读量1.4k

点赞数 2

分类专栏： # 从零开始学习Web开发专栏文章标签： 1024程序员节 java js javascript html

本文链接：https://blog.csdn.net/weixin_44519789/article/details/109266521

版权

从零开始学习Web开发专栏专栏收录该内容

8 篇文章 1 订阅

订阅专栏

大家好！
我是小黄，很高兴又跟大家见面啦！
今天更新的是：

web程序设计笔记（八）-做一个下拉框选择按钮
往期检索：程序设计学习笔记——目录

创建时间：2020年10月24日
软件版本：HBuilder X 2.8.12.20200926

<!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;
	}
}

效果展示：

在这里插入图片描述

各位路过的朋友，如果觉得可以学到些什么的话，点个赞再走吧，欢迎各位路过的大佬评论，指正错误，也欢迎有问题的小伙伴评论留言，私信。

每个小伙伴的关注都是本人更新博客的动力！！！
请微信搜索【在下小黄】文章更新将在第一时间阅读！
在这里插入图片描述

把握现在，展望未来，加油！

由于水平有限，写的难免会有些不足之处，恳请各位大佬不吝赐教！

在下小黄

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
web程序设计笔记（八）-做一个下拉框选择按钮

大家好！我是小黄，很高兴又跟大家见面啦！今天更新的是：web程序设计笔记（八）——表单往期检索：程序设计学习笔记——目录创建时间：2020年10月24日软件版本：HBuilder X 2.8.12.20200926目录：...
复制链接

扫一扫