WEB 6.JS事件里的案例

最新推荐文章于 2024-04-22 21:45:00 发布

六1

最新推荐文章于 2024-04-22 21:45:00 发布

阅读量96

点赞数

本文链接：https://blog.csdn.net/weixin_44228228/article/details/99758860

版权

JS案列

计算器
全选全不选反选
选项卡

计算器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input type="text" id="num1" value="0">
	<input type="text" id="num2" value="0">
	<br>
	<button onclick="func('+')">+</button>
	<button onclick="func('-')">-</button>
	<button onclick="func('*')">*</button>
	<button onclick="func('/')">/</button>
	<span id="res">0*0=0</span>
	<script>
		// 获取num1 和num2的元素对象
		var Num1 = document.getElementById('num1');
		var Num2 = document.getElementById('num2');
		var result = document.getElementById('res');

		// 定义一个运算的函数
		function func(msg){
			// 获取num1的value的值
			 var num1 = Num1.value;
			// 获取num2的value的值
			var num2 = Num2.value;
			// 字符串拼接
			var str = num1+msg+num2;
			console.log(str);
			var res = eval(str);
			console.log(res);
			// 拼接最后的结果 并写入span标签
			result.innerHTML=str+'='+res;
			
		}
	</script>
</body>
</html>

全选全不选反选

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input type="checkbox" > 连衣裙 <br>
	<input type="checkbox"> 香奈而口红 <br>
	<input type="checkbox"> YSL口红 <br>
	<input type="checkbox"> 打火机 <br>

	<button>全选</button>
	<button>全不选</button>
	<button>反选</button>

	<script>
		var btns = document.getElementsByTagName('button');
		var inps = document.getElementsByTagName('input');
		btns[0].onclick=function(){
			for(var i=0;i<inps.length;i++){
				// 修改checked的值
				inps[i].checked=true;
			}
		}

		btns[1].onclick=function(){
			for(var i=0;i<inps.length;i++){
				// 修改checked的值
				inps[i].checked=false;
			}
		}
		
		btns[2].onclick=function() {
			for(var i=0;i<inps.length;i++){
				// if (inps[i].checked==true){
				// 	// 修改checked的值
				// 	inps[i].checked=false;
				// }else{
				// 	inps[i].checked=true;
				// }	
				inps[i].checked=!inps[i].checked;
			}
		}			
	</script>
</body>
</html>

选项卡

<!-- 选项卡，注意初始化，注意标题要和内容进行关联 -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{margin:0;padding:0;list-style:none;}
		.wrap{
			width:300px;
			height:300px;
			border:1px solid #c4c4c4;
		}
		.title{
			overflow: hidden;
		}
		.title li{
			float:left;
			width:100px;
			height:50px;
			background: #c4c4c4;

			text-align:center;
			line-height: 50px;
		}
		.title .active1{
			background:pink;
		}
		.content li{
			height:250px;
			border:1px solid red;

			/*默认给所有的内容隐藏*/
			display:none;
		}
		.content .active2{
			display:block;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<ul class="title">
			<li class="active1">话费</li>
			<li>机票</li>
			<li>酒店</li>
		</ul>
		<ul class="content">
			<li class="active2">话费的内容</li>
			<li>机票的内容</li>
			<li>酒店的内容</li>
		</ul>
	</div>
	<script type="text/javascript">
         // 获取元素对象
		var oList=document.getElementsByClassName('title');
		// 因为上面是一个类数组对象，里面只有一个元素，所以取第一个，重要
		var Lis1=oList[0].getElementsByTagName('li');
		var Ul2=document.getElementsByClassName("content");
		var Lis2=Ul2[0].getElementsByTagName('li');
		//遍历所有标题li 并添加移入事件
		for(var i=0;i<Lis1.length;i++){
            //存储标题的索引 标题的索引和内容的索引-----一一对应
			Lis1[i].index=i;// 将标题的索引存入当前标题对象中    
			Lis1[i].onmouseover=function(){				
                //初始化 清除所有标题的 active1
				for(var j=0;j<Lis1.length;j++) {
					
					//初始化标题的类不管移入是谁 先将所有标题的类删除 
					Lis1[j].removeAttribute('class');
					//初始化内容 部分 不管移入是哪个标题 将所有内容的类删除					
					Lis2[j].removeAttribute('class');
				}
				//移入谁给谁添加active1属性
				this.setAttribute('class','active1');
				//移入的哪个标题给标题对应内容添加active2
				Lis2[this.index].setAttribute('class','active2');
			}
		}
	</script>
</body>
</html>

六1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WEB 6.JS事件里的案例

JS案列计算器全选全不选反选选项卡计算器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <input type="text" id=...
复制链接

扫一扫