练习 | js练习题_html点击一个button让里面input的value值加1

作者：我家自动化 | 2024-05-23 15:56:23

踩

html点击一个button让里面input的value值加1

1.点击按钮，出现123


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- js练习题1 -->
		<!-- 点击按钮，出现数字123 -->
		<button onclick="cd()">点我吧</button>
		
		
	    <script>
		// 练习1
		var s=document.getElementsByTagName("button");
		 console.log(s);
		 function cd(){
			 alert("123");
		 }
		
		</script>
	</body>
</html>

2.点击按钮一次，按钮上面的值加1


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 练习2 ，点击按钮，按钮数字增加 -->
		<button id="b2" onclick="fg()">0</button>
		<script>
		// 找到按钮
		var g=document.getElementById("b2");
		console.log(g);
		function fg(){
			// 获取到按钮上的值了
			console.log(g.innerHTML);
			// 每单击一次按钮，按钮上的值就加1
			// 按钮单击时，它的文本内容就会自动加一
			g.onclick.innerHTML=g.innerHTML++;
		}
		</script>
	</body>
</html>

3.点击按钮就变色


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div{
			border:1px solid green;
			width: 80px;
			height: 50px;
			padding-left: 20px;
		}
		#btn1,#btn2,#btn3{ 
			background-color: #008000;
			border: 2px solid #008000;
		}
		</style>
	</head>
	<body>
			<button id="btn1" onclick="study()">11</button>
			<button id="btn2" onclick="study()">22</button>
			<button id="btn3" onclick="study()">33</button>
		<script>
		function study(){
			var s=document.getElementsByTagName("button")
			for(var i=0;i<s.length;i++){
				s[i].style.color="red";
			}
		}
		</script>
	</body>
</html>

4.有3个按钮，现在点击那个按钮，那个按钮变颜色


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		button{
			width:60px;
			height: 40px;
			border: 0;
		}
		#btn1{
			background-color: orangered;
		}
		#btn2{
			background-color: gold;
		}
		#btn3{
			background-color: green;
		}
		</style>
	</head>
	<body>
	<button id="btn1">ok</button><button id="btn2">呜呜</button><button id="btn3">哈哈</button>
	<!-- 不明白为什么可以直接按钮.onclick 不用写在html代码上 -->
	<!-- 还有this只指带问题 -->
		<script>
		var s=document.getElementsByTagName("button");
		console.log(s);
		for(var i=0;i<s.length;i++){
	     s[i].onclick=function(){
			 this.style.backgroundColor="pink";
		 }
		 }	
		</script>
	</body>
</html>

5.有3个按钮，现在点击那个按钮，那个按钮变颜色，并且变色的只能有一个按钮，之前变过颜色的按钮离开后恢复原来的样式。


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.red{
			color:red;
		}
		.green{
			color: green;
		}
		</style>
	</head>
	<body>
		<button class="cool"  id="btn1">1111</button>
		<button  class="cool" >2222</button>
		<button  class="cool" >3333</button>
		<script>
			var btns=document.getElementsByTagName("button");
			for (let i = 0; i < btns.length; i++) {	 
				 btns[i].onclick=()=>{
					 for(var j=0;j<btns.length;j++){
						 btns[j].className="green"
					 }  
					 btns[i].className="red";
				 }
				 }		
		</script>
	</body>
</html>

6.定时器自动切换图片---没做出来，以后再来看看是哪里出了问题

本来应该是第一个过了，就是第二种图片的，结果直接显示到最后一张了

最开始是图片代码，后面直接用div测试了


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div{
			width:400px;
			height:200px;
		}
		.tub{
			background-color: #008000;
			position:absolute;
			top:12px;
		}
		.bath{
			background-color: #00BFFF;
			position: absolute;
			top:12px;
			/* //z-index:20 */
		}
		.soap{
			background-color: gold;
			position: absolute;
			top:12px;
		}
		</style>
	</head>
	<body>
		<!-- /soap -->
		<div data-toggle="tab" data-se="tub" style="z-index:10" class="tub"></div>
		<div data-toggle="tab" data-se="bath" class="bath"></div>
		<div data-toggle="tab" data-se="soap" class="soap"></div>
		<script>
		var divs=document.querySelectorAll("[data-toggle=tab]");
		var z=10;
		setTimeout(function(){
			for(var i=0;i<divs.length;i++){
				console.log(divs[i]);
				z++;
				 divs[i].style.zIndex=z;
				// console.log(z);
				}
			},1000)
			
			
			//for里面套setTime，无法访问divs
			// for(var j=0;j<divs.length;j++){
			// 		z++;
			// 		divs[j].style.zIndex=z;
			// }
			
		</script>
	</body>
</html>

7.全选与不全选删除有问题，现在不知道哪里有问题


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<input type="checkbox" class="ad">全选
			<span>
				<label class="df"><input type="checkbox" class="ac 1">苹果</label>
				<label class="df"> <input type="checkbox" class="ac 2">荔枝</label>
				
				<label class="df"><input type="checkbox" class="ac 3">香蕉</label>
			</span>
			<button onclick=gv()>删除</button>
		</div>
		<script>
		var inps=document.getElementsByClassName("ac");
		var chbAll=document.getElementsByClassName("ad")[0];
		 for(var inp of inps){
			 // 点击全选就全选
			chbAll.onclick=function(){
				var inps=document.getElementsByClassName("ac");
				for(var inp of inps){
					inp.checked=chbAll.checked;
				}
			}
		 }
		
		// 知道是否选中三个苹果香蕉,选中才让三个都对的√
		var inps=document.getElementsByClassName("ac");
        for(var i=0;i<inps.length;i++){
			inps[i].onclick=function(){
				var chbAll=document.getElementsByClassName("ad")[0];
				// 只要有一个没被选中，全选就不能被选
				var unchecked=document.querySelector("span input:not(:checked)");
				if(unchecked !=null){
					chbAll.checked=false;
				}else{
					chbAll.checked=true;
				}
			}
		}
		
		// 删除按钮删除东西
        function gv(){
			var spa=document.getElementsByTagName("span")[0];
			var labels=document.getElementsByClassName("df");
			for(var label of labels){
				    var chg=spa.childNodes;
					spa.removeChild(label)
					  
			}
		}
		</script>
	</body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/613519

查看