JS事件练习题

Posted 2020-10-31 呐呐呐那

1、点击按钮连续弹窗5次

<div class="noe">
	<div class="noe1" onClick="n()">循环5次弹窗</div>
</div>


function n(){
	var i= 0;
	while(i<=5){
		i++;
		alert("这是第"+i+"次弹出");
	}
}

2、批量修改样式（用for，固定元素个数）

<div class="noe">
	<div class="noe1" onClick="n()">循环5次弹窗</div>
</div>
<div class="noe">
	<div class="noe1" onClick="nn()">批量修改样式</div>
	<div class="nn"></div>
	<div class="nn"></div>
	<div class="nn"></div>
</div>


function nn(){  
	var nn = document.getElementsByClassName("nn");  //找到nn集合
	for(var i = 0;i<=nn.length;i++){     //在循环里挨个拿出设置样式
		nn[i].style.backgroundColor= \'yellow\';
	}
}

　3、鼠标经过变换内容

<div class="zai">
    <div class="jj">提交后在这里显示:</div>
</div>
<div class="zai1" onMouseOver="z(this)">栏目1</div>
<div class="zai1" onMouseOver="z(this)">栏目2</div>
<div class="zai1" onMouseOver="z(this)">栏目3</div>
<div class="zai1" onMouseOver="z(this)">栏目4</div>
<div class="za" ></div>

function  z(z){
var za = document.getElementsByClassName("za")[0];
    za.innerhtml="";   //等于每次循环把值都清空一次
    for(var i = 0;i<=3;i++){
        za.innerHTML += z.innerHTML+"的内容<br>";
        
    }
}

4、全选、不选、反选

 1 <div class="noe">
 2     <input type="checkbox" name="" value="" id="" class="x">
 3     <input type="checkbox" name="" value="" id="" class="x">
 4     <input type="checkbox" name="" value="" id="" class="x">
 5     <input type="checkbox" name="" value="" id="" class="x">
 6     <input type="checkbox" name="" value="" id="" class="x">
 7     <br>
 8     <input type="button" name="" value="全选" id="" onClick="o()" class="e">
 9     <input type="button" name="" value="反选" id="" class="e" onClick="ee()">
10     <input type="button" name="" value="不选" id="" onClick="op()" class="e">
11 </div>
12 
13 for(var i = 0;i<x.length;i++){
14     if(x[i].checked ){  //设置反选 
15         x[i].checked = false;
16     }else{
17         x[i].checked = true;
18     }
19 }    
20 }
21 function o(){   //正选
22     var x = document.getElementsByClassName("x");
23     for(var i = 0;i<=x.length;i++){
24         x[i].checked = \'checked\';
25     }
26 }
27 function op(){   //不选
28     var x = document.getElementsByClassName("x");
29     for(var i = 0;i<=x.length;i++){
30         x[i].checked = false;
31     }
32 }    
33     

5、

 

 

<div class="zai">
	<input type="text" name="" id="inn" value="">
	<div class="zai1" onClick="ti()">提交</div>
</div>

<div class="zai">
<div id="ti1">提交后显示在这里：</div>
</div>

function ti(){
	//找到input的集合，再找到ti1的集合，ti1这个div的innerHTML = 汉字+inn.value的值
	var inn = document.getElementById("inn");
	var ti1 = document.getElementById("ti1");
	ti1.innerHTML = \'提交后在这里显示：\'+inn.value;   

}

6、

<div class="zai">
	<input type="text" name="" id="" value="" class="innn">
	<div id="p" >+</div>
	<input type="text" name="" id="" value="" class="innn">
 	<div class="zai1" onClick="jia()">提交</div>
</div>
<div class="zai">
	<div class="j">提交后在这里显示:</div>
</div>


function jia(){
var inn1 = document.getElementsByClassName("innn")[0];
var inn2 = document.getElementsByClassName("innn")[1];	
var j = document.getElementsByClassName("j")[0];	
	j.innerHTML = \'提交后在这里显示\'+inn1.value+inn2.value;
	
}