标签：span 批量 val 等于 .com checkbox func 清空 while
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;
}
标签：span 批量 val 等于 .com checkbox func 清空 while
原文地址：https://www.cnblogs.com/wangrongchen/p/8849591.html
