0516JS练习：综合2

最新推荐文章于 2024-11-11 19:29:13 发布

weixin_33885676

最新推荐文章于 2024-11-11 19:29:13 发布

阅读量106

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhangbaozhong/p/9045635.html

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           *{
               margin: 0px auto;
               padding: 0px;
           }
           .box{
               width: 1000px;
               height: 100px;
               border: 1px solid red;
               line-height: 100px;
               text-align: center;
           }
           .box1{
               width: 500px;
               height: 200px;
               border: 1px solid red;
               background-color: cadetblue;
               line-height: 100px;
               text-align: center;
           }
           .box2{
               width: 100px;
               height: 50px;
               border: 1px solid red;
               border-radius: 5px;
               background-color: burlywood;
               float: left;
               margin-top: 25px;
               margin-left: 25px;
               transition: 1s;
           }
           .box3{
               width: 50px;
               height: 50px;
               border: 1px solid red;
               background-color: cadetblue;
               float: left;
               border-radius: 10px;
               margin-top: 25px;
               margin-left: 25px;
               transition: 1s;
           }
           /*.box4{
               width: 50px;
               height: 50px;
               border: 1px solid red;
               background-color: burlywood;
               float: left;
               border-radius: 25px;
               margin-top: 25px;
               margin-left: 25px;
           }*/
       </style>
   </head>
   <body>
       <div class="box">
           <button οnclick="dianji('blue')">背景变蓝</button>
           <button οnclick="dianji('green')">背景变绿</button>
           <button οnclick="dianji('yellow')">背景变黄</button>
           <button οnclick="dianji('')">恢复原样</button>
       </div>
       <div class="box">
           <button οnclick="dianjia('width','500px')">背景变窄</button>
           <button οnclick="dianjia('background-color','green')">背景变绿</button>
           <button οnclick="dianjia('height','200px')">背景变宽</button>
           <button οnclick="dianjia()">恢复原样</button>
       </div>
       <div class="box">
           <input type="" name="" id="" value="这是原来的文字" />
           <button οnclick="dianjib('value','这是改变后的文字')">改变文字</button>
           <button οnclick="dianjib('title','这是title')">添加title属性</button>
       </div>
       <div class="box">
           <button οnclick="dianjic('box1')">变色、变高、变窄</button>
           <button οnclick="dianjic('box')">恢复原样</button>
       </div>
       <div class="box">
           <button οnclick="dianjid()">循环出现提示框五次</button>
       </div>
       <div class="box">
           <button οnclick="dianjie('background-color','cadetblue')">批量修改样式</button>
           <div class="box2" name ="1" ></div>
           <div class="box2" name ="1" ></div>
           <div class="box2" name ="1" ></div>
           <div class="box2" name ="1" ></div>
           <div class="box2" name ="1" ></div>
       </div>
       <div class="box">
           <button οnclick="dianjif('burlywood','100px')">批量修改样式</button>
           <div class="box3" name ="1" ></div>
           <div class="box3" name ="1" ></div>
           <div class="box3" name ="1" ></div>
           <div class="box3" name ="1" ></div>
           <div class="box3" name ="1" ></div>
       </div>
       <div class="box">
           <input type="checkbox" name="" id="" value="" class="check"/>
           <input type="checkbox" name="" id="" value="" class="check"/>
           <input type="checkbox" name="" id="" value="" class="check"/>
           <input type="checkbox" name="" id="" value="" class="check"/>
           <input type="checkbox" name="" id="" value="" class="check"/>
           <input type="checkbox" name="" id="" value="" class="check"/>
           <button οnclick="dianjig('quanxuan')">全选</button>
           <button οnclick="dianjig('fanxuan')">反选</button>
           <button οnclick="dianjig('buxuan')">全都不选</button>
       </div>
   </body>
</html>
<script type="text/javascript">
   function dianji(color){
       var sj1 = document.getElementsByTagName("div")[0];
       sj1.style.backgroundColor = color;
   }

   function dianjia(x,y){
       var sj2 = document.getElementsByTagName("div")[1];
       sj2.style[x] = y;
   }
   function dianjib(name,room){
       var sj3 = document.getElementsByTagName("input")[0];
       sj3.setAttribute(name,room);
   }
   function dianjic(name){
       var sj4 = document.getElementsByTagName("div")[3];
       sj4.setAttribute("class",name);
   }
   function dianjid(){
       for (var i = 1;i <= 5;i++) {
           alert("这是第"+ i +"次弹出");
       }
   }
   function dianjie(x,y){
       for(var i = 0;i < document.getElementsByClassName("box2").length + i;i++){
           var box = document.getElementsByClassName("box2");
           box[0].setAttribute("class","box3");
       }
   }
//   每次循环把box2的第0项改变为box3,下次循环时,上次循环中的box2第1项变为这次循环中box2的第0项,同时长度lenggth减1
   function dianjif(x,y){
       var moren = document.getElementsByName("1")[0].getAttribute("class");
       if( moren == "box3"){
           for(var i = 0;i < document.getElementsByClassName("box3").length + i;i++){
           var boxa = document.getElementsByClassName("box3");
           boxa[0].setAttribute("class","box2");
           }
       }else {
           for(var i = 0;i < document.getElementsByClassName("box2").length + i;i++){
           var box = document.getElementsByClassName("box2");
           box[0].setAttribute("class","box3");
           }
       }
//       var sj5 = document.getElementsByClassName("box3");
//       if (sj5[0].getAttribute("name") == "1") {
//           for (var i = 0;i < sj5.length;i++) {
//           sj5[i].style.backgroundColor = x;
//           sj5[i].style.width = y;
//           sj5[i].setAttribute("name","2");
//       }
//       } else{
//           for (var i = 0;i < sj5.length;i++) {
//           sj5[i].style.backgroundColor = "cadetblue";
//           sj5[i].style.width = "50px";
//           sj5[i].setAttribute("name","1");
//           }
//       }
   }
   function dianjig(xuanbuxuan){
       var zhuangtai = document.getElementsByClassName("check");
       if (xuanbuxuan == "quanxuan") {
               for(var i = 0;i < zhuangtai.length;i++){
               zhuangtai[i].checked = true;
           }
       } else if(xuanbuxuan == "buxuan"){
               for(var i = 0;i < zhuangtai.length;i++){
               zhuangtai[i].checked = false;
               }
       } else{
               for(var i = 0;i < zhuangtai.length;i++){
                   var djzt = zhuangtai[i].getAttribute("checked");

　　　　　（（（zhuangtai[i].checked = zhuangtai[i].checked? false:true;）））（这是最简洁的方法）

　　　　　（（（zhuangtai[i].checked?zhuangtai[i].checked = false :zhuangtai[i].checked = true;）））
                   if (zhuangtai[i].checked == true) {
                       zhuangtai[i].checked = false;
                   } else{
                       zhuangtai[i].checked = true;
                   }
               }
       }
   }
</script>

转载于:https://www.cnblogs.com/zhangbaozhong/p/9045635.html