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