11.28运算符使用

2016-11-28  本文已影响0人  overisover

隔行变色

%的用法

1.将颜色定义为数组;
2.用for循环获取;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    ul{
        list-style: none;
        padding:0;
    }
    li{
        height:30px;width:800px;
    }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        var oLi=document.getElementsByTagName('li');
        var arr=['red','#777','#f9f9f9','#ccc','#dda']
        for(var i=0;i<oLi.length;i++){
            oLi[i].style.background=arr[i%5];
        }
    </script>
</body>
</html>

鼠标移入移出事件,js代码:

<script>
      var oLi=document.getElementsByTagName('li');
      var arr=['red','#777','#f9f9f9','#ccc','#dda']
      // var color='';
      for(var i=0;i<oLi.length;i++){
          oLi[i].style.background=arr[i%5];
          oLi[i].index=i;
          oLi[i].onmouseover=function(){
              // color=this.style.background;
              this.style.background='grey';
          }
          oLi[i].onmouseout=function(){
              // this.style.background=color;
              this.style.background=arr[this.index%5];
          }
      }
  </script>

转换秒

js代码:

<script>
        var num=121312312312;
        alert('数字'+num+'是:'+parseInt(num/3600)+' h '+parseInt((num%3600)/60)+' m '+num%60+' s');
    </script>

运算符类型

赋值:=,+=,-=,*=,/=,
关系:>,<,>=,<=,==,===;!=;
逻辑:&&/与;||/或;!/非
真假:除了:null,0,NaN,' ',undefined;其他为真,

用函数弹出数组

js代码:

<script>
    function $(a,b){
        var arr=[];
        if(a>b){
            for(var i=b;i<=a;i++){
                arr.push(i);
            }
            
        }else{
            for(var i=a;i<=b;i++){
                arr.push(i);
            }               
        }
        return arr;
    }
    alert($(10,6));//arr=[10,9,8,7,6]
    alert($(0,4));//arr=[0,1,2,3,4]
</script>

选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <table>
        <tr>
        <td><input type="checkbox"></td>
        <td>xxx</td>
        <td>xxxx</td>
        </tr>
        <tr>
        <td><input type="checkbox"></td>
        <td>xxx</td>
        <td>xxxx</td>
        </tr>
        <tr>
        <td><input type="checkbox"></td>
        <td>xxx</td>
        <td>xxxx</td>
        </tr>
    </table>
    <div>
        <input type="checkbox" id="select">全选
    </div>
    <script>
        var oSelect=document.getElementById('select');
        var oTable=document.getElementsByTagName('table')[0];
        var oInput=oTable.getElementsByTagName('input');


        oSelect.onclick=function(){
            if(!this.checked){
                for(var i=0;i<oInput.length;i++){
                    oInput[i].checked=false;
                }               
            }else{
                for(var i=0;i<oInput.length;i++){
                    oInput[i].checked=true;
                }               
            }                       
        }
        //方式1:
        for(var i=0;i<oInput.length;i++){
            oInput[i].onclick=function(){
                for(var i=0;i<oInput.length;i++){
                    if(oInput[i].checked){
                        oSelect.checked=true;
                    }else{
                        oSelect.checked=false;
                        break;
                    }
                }                                   
            }
        }
    //方式2:
    // for(var i=0;i<aInput.length;i++){

    //  aInput[i].onclick = function(){
    //      var isSelectAll = true;     
    //      for(var i=0;i<aInput.length;i++){
    //          if(!aInput[i].checked){
    //              isSelectAll = false;
    //              break;
    //          }
    //      }
    //      if(isSelectAll){
    //          oSelectAll.checked = true;
    //      }
    //      else{
    //          oSelectAll.checked = false;
    //      }
    //  }
    // }    
    </script>
</body>
</html>
上一篇 下一篇

猜你喜欢

热点阅读