JS事件练习题

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、全选、不选、反选

<div class="noe">
    <input type="checkbox" name="" value="" id="" class="x">
    <input type="checkbox" name="" value="" id="" class="x">
    <input type="checkbox" name="" value="" id="" class="x">
    <input type="checkbox" name="" value="" id="" class="x">
    <input type="checkbox" name="" value="" id="" class="x">
    <br>
    <input type="button" name="" value="全选" id="" onClick="o()" class="e">
    <input type="button" name="" value="反选" id="" class="e" onClick="ee()">
    <input type="button" name="" value="不选" id="" onClick="op()" class="e">
</div>

for(var i = 0;i<x.length;i++){
    if(x[i].checked ){  //设置反选 
        x[i].checked = false;
    }else{
        x[i].checked = true;
    }
}    
}
function o(){   //正选
    var x = document.getElementsByClassName("x");
    for(var i = 0;i<=x.length;i++){
        x[i].checked = 'checked';
    }
}
function op(){   //不选
    var x = document.getElementsByClassName("x");
    for(var i = 0;i<=x.length;i++){
        x[i].checked = false;
    }
}    
    

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