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;}
JS事件练习题
原文地址：https://www.cnblogs.com/wangrongchen/p/8849591.html