<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: auto; padding: 0px; } #a1{ width: 1000px; height: 200px; border: 1px solid red; background-color: white; box-shadow: 8px 8px 8px gray; margin-top: 10px; overflow: hidden; } #a11{ width: 1000px; height: 50px; border: 1px solid red; line-height: 50px; } #a2{ width: 1000px; height: 50px; border: 1px solid red; margin-top: 20px; } #a21{ width: 150px; height: 30px; margin-top: 20px; margin-left: 50px; } #a4{ width: 1000px; height: 250px; border: 1px solid red; background-color: white; box-shadow: 8px 8px 8px gray; margin-top: 10px; overflow: hidden; } #a41{ width: 1000px; height: 50px; border: 1px solid red; line-height: 50px; } #a42{ width: 1000px; height: 50px; border: 1px solid red; margin-top: 20px; } #a421{ width: 150px; height: 30px; margin-top: 20px; margin-left: 50px; } #a43{ width: 1000px; height: 50px; border: 1px solid red; line-height: 50px; margin-left: 50px; } #a44{ width: 1000px; height: 50px; border: 1px solid red; margin-top: 10px; } .a441{ width: 50px; height: 50px; border: 1px solid red; background-color: white; margin-left: 20px; float: left; } #a5{ width: 1000px; height: 600px; border: 1px solid red; background-color: white; box-shadow: 8px 8px 8px gray; margin-top: 10px; overflow: hidden; } #a51{ width: 1000px; height: 50px; border: 1px solid red; line-height: 50px; margin-left: 20px; } #a52{ width: 1000px; height: 50px; border: 1px solid red; margin-top: 20px; margin-left: 20px; } #a521{ width: 150px; height: 30px; margin-top: 20px; margin-left: 50px; } #a53{ width: 1000px; height: 50px; border: 1px solid red; line-height: 50px; margin-left: 20px; } .a54{ width: 400px; height: 100px; border: 1px solid red; background-color: white; box-shadow: 8px 8px 8px gray; margin-top: 20px; transition: 2s; } #a6{ width: 1000px; height: 200px; border: 1px solid red; background-color: white; box-shadow: 8px 8px 8px gray; margin-top: 10px; overflow: hidden; } #a61{ width: 1000px; height: 50px; border: 1px solid red; line-height: 50px; margin-left: 20px; } #a62{ width: 1000px; height: 50px; border: 1px solid red; margin-top: 20px; margin-left: 20px; } #a63{ width: 1000px; height: 50px; border: 1px solid red; margin-top: 10px; margin-left: 20px; } </style> </head> <body> <div id="a1"> <div id="a11"> 1、while循环 </div> <div id="a2"> <input type="submit" name="a21" id="a21" value="循环出现提示框5次" onclick="b1()"/> </div> </div> <div id="a4"> <div id="a41"> 2、for循环 </div> <div id="a42"> <input type="submit" name="a421" id="a421" value="批量修改样式" onclick="b2()"/> </div> <div id="a43"> 固定元素个数 </div> <div id="a44"> <div class="a441"> </div> <div class="a441"> </div> <div class="a441"> </div> <div class="a441"> </div> </div> </div> <div id="a5"> <div id="a51"> if判断for循环 </div> <div id="a52"> <input type="submit" name="a521" id="a521" value="批量修改样式" onclick="b3()"/> </div> <div id="a53"> 元素个数不定 </div> <div class="a54"> </div> <div class="a54"> </div> <div class="a54"> </div> </div> <div id="a6"> <div id="a61"> if判断for循环 </div> <div id="a62"> <input type="checkbox" name="chk" id="1a" value="2" /> <input type="checkbox" name="chk" id="2b" value="3" /> <input type="checkbox" name="chk" id="3c" value="4" /> <input type="checkbox" name="chk" id="4d" value="6" /> <input type="checkbox" name="chk" id="5e" value="5" /> <input type="checkbox" name="chk" id="6f" value="7" /> </div> <div id="a63"> <input type="submit" name="qx" id="qx" value="全选" onclick="b4()"/> <input type="submit" name="a632" id="a632" value="不选" onclick="b5()"/> <input type="submit" name="a633" id="a633" value="反选" onclick="b6()"/> </div> </div> </body> </html> <script type="text/javascript"> function b1(){ for(var i= 0;i<5;i++){ alert("这是第"+i+"弹窗") } } function b2(){ var a421 = document.getElementsByClassName("a441"); for(var i = 0;i<a421.length;i++){ a421[i].style.backgroundColor = "yellow" } } function b3(){ var a521 = document.getElementsByClassName("a54"); /*if(a54.style.background == "white"){*/ for (var i =0;i < a521.length ;i++){ a521[i].style.backgroundColor = "yellow"; a521[i].style.height = "100px"; a521[i].style.width = "500px"; } /*}*/ /*else{ a521[i].style.width = "400px"; a521[i].style.height = "100px"; a521[i].style.background-color = "white"; }*/ } function b4 (){ var chk = document.getElementsByClassName("chk"); var qx = document.getElementsByClassName("qx"); for(var i = 0;i<chk.length;i++){ if(qx.checked){ chk[i].checked = true; } } } </script>