运算符流程控制

运算符

算术运算符：+ 、- 、、 / 、 %（取模)
赋值： = 、+= 、 -= 、 = 、 /= 、 %=
关系： < 、 > 、 <= 、 >= 、 == 、 != 、 === 、 !==
逻辑：&& 、 || 、！
运算符优先级：括号

取余

效果：鼠标划过，隔行改变颜色，鼠标离开，恢复原来的灰色。

<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <script>
    window.onload = function() {
        var aLi = document.getElementsByTagName('li');
        var arr = ['red', 'yellow', 'blue'];

        for (var i = 0; i < aLi.length; i++) {

            aLi[i].index = i;

            aLi[i].style.background = arr[i % arr.length];

            aLi[i].onmouseover = function() {
                this.style.background = 'gray';
            };
            aLi[i].onmouseout = function() {
                this.style.background = arr[this.index % arr.length];
            };
        }
    };
    </script>
    <style>
    li {
        height: 24px;
        margin-bottom: 3px;
        list-style: none;
    }
    </style>
</head>

<body>
    <ul id="ul1">
        <li></li>
        <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>
</body>

</html>

隔行变色扩展

<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <script>

    window.onload = function() {
        var aLi = document.getElementsByTagName('li');
        var arr = ['red', 'yellow'];
        var str = '';

        for (var i = 0; i < aLi.length; i++) {

            aLi[i].index = i;

            aLi[i].style.background = arr[i % arr.length];

            aLi[i].onmouseover = function() {
                str = this.style.background; // 先存颜色
                this.style.background = 'gray';
            };
            aLi[i].onmouseout = function() {
                // this.style.background = arr[this.index%arr.length];
                this.style.background = str;
            };
        }
    };
    </script>
    <style>
    li {
        height: 24px;
        margin-bottom: 3px;
        list-style: none;
    }
    </style>
</head>

<body>
    <ul id="ul1">
        <li></li>
        <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>
</body>

</html>

京东商城秒转时间

<script>	 
var s = 3605; // 秒
alert(Math.floor(s / 60) + '分' + s % 60 + '秒');
</script>

==与===的区别

== 只判断值,而===先判断类型，再判断值。

逻辑运算符

注意：！还可以转换数据类型，如果！后面跟的是非零数，则结果为false。
以下例子里，alert(120<90 || 20),结果为20 ，因为左边为false,继续往下找，直接把20赋给它。

<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <script>
    // && 与、|| 或、! 否

    alert( 12<90 && 230<80 );			// false
    
    var a = 120 < 90 && 20;
    alert( a );				            // false

    alert( 120<90 || 230<80 );	       //false  

    var b = 120 < 90 || 20;
    alert(b);                           // 20

    var c = !!true;
    alert( c );                        //true

    var d = !200;
    alert( d );                        //false 
    </script>
</head>

<body>
</body>

</html>

反选小例子

<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <script>
    window.onload = function() {
        var aInp = document.getElementsByTagName('input');

        // aInp[1].checked = false;
        // aInp[2].checked = true;

        aInp[0].onclick = function() {
            for (var i = 1; i < aInp.length; i++) {
                aInp[i].checked = !aInp[i].checked;
                /*
                if( aInp[i].checked ) {
                	aInp[i].checked = false;
                } else {
                	aInp[i].checked = true;
                }
                */
            }
        };
    };
    </script>
</head>

<body>
    <input type="button" value="反选" />
    <ul>
        <li>
            <input type="checkbox" checked />
        </li>
        <li>
            <input type="checkbox" />
        </li>
        <li>
            <input type="checkbox" checked />
        </li>
        <li>
            <input type="checkbox" />
        </li>
        <li>
            <input type="checkbox" />
        </li>
    </ul>
</body>

</html>

流程控制

判断：if 、 switch 、三目运算？：
循环： while、 for
跳出：break、continue跳过
什么是真：非零的数字、字符串、true、函数、object、[]、{}、元素（存在）
什么是假：零、NaN、空字符串、false、null、未定义