潭州课堂25班：Ph201805201 WEB 之 JS 第五课 (课堂笔记)

算数运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <script>
        //算数运算符：+，-，*，/，%，++，--
        // 数和数的运算
        var nnu1 = 5;
        var nnu2 = 2;
        // console.log(nnu1 + nnu2); //7
        // console.log(nnu1 - nnu2);//3
        // console.log(nnu1 * nnu2);//10
        // console.log(nnu1 / nnu2);//2.5
        // console.log(nnu1 % nnu2);//1

        //数和字符运行
        str = '2';
        // console.log(nnu1 + str); //52     这里的 + 号为字符串拼接
        // console.log(nnu1 - str);//3
        // console.log(nnu1 * str);//10
        // console.log(nnu1 / str);//2.5
        // console.log(nnu1 % str);//1

        //数和其他数据类型的运算
        // console.log(nnu1 + true); //6   true 是 1
        // console.log(nnu1 - false);//5   false 是0
        // console.log(nnu1 + null);//5    unll 空 也是0
        // console.log(nnu1 - undefined);//null 和未定义运行 都得 null

        // 自增 ++ ，自减--
        var num3 = 5;
        // console.log(num3++);//5    先返回 num3 的值 再开始运算，所以这里的值是 num3 未自增前的值
        // console.log(num3--);//6     先返回 num3 的值 再开始运算，所以这里的值是 num3 未自假前的值

        // console.log(++num3);//6      自增后返回值
        // console.log(--num3);//5      自减后返回值 

    </script>
</body>
</html>

赋值运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        //赋值运算符  =，+=，-=，*=，/=
        var a = 5;  //5赋值给 a
        console.log(a)
        a += 1;    // a = a+1
        console.log(a);
        a -= 2;    //a = a-2
        console.log(a);
        a *= 2;     // a = a*2
        console.log(a);
        a /= 4;     // a = a/4
        
    </script>
</body>
</html>

逻辑运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        // 逻辑运算符  && (与)        ||（或）      ！（非）
        console.log(10 && 0 &&5);//0  与可以认为乘法运算 有0得0
        console.log(10&& undefined &&5);// undefined  假

        console.log(10 || 0 ||5)//  或 可以认为是加法运算 全0得0

        console.log(!false);//      取反
        console.log(!0);//      取反
    </script>
</body>
</html>

比较运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        // 比较运算符 <>= =< => !=   ==  ===
        var num = 5;
        var str = '5';
        if (num === str){                      //   ===     ==    的用法
            console.log('数据类型和值都相等')
        }else if(num == str){
            console.log('只要值相等')
        }else {
            console.log('都不相等')
        }
    </script>
</body>
</html>

控制流程:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        var name = '小白';
        if(name === '小白'){
            console.log(name+'小狗')
        }else {
            console.log(name+'蜡笔小新')
        }

        //可能写成三目运算：
        name === '小白'?  console.log(name+'小狗'): console.log(name+'蜡笔小新');
        //  条件              如果成立 就              不成立 就

        // 多层
        var num = 5;
        var str = '5';
        if (num === str){                      //   ===     ==    的用法
            console.log('数据类型和值都相等')
        }else if(num == str){
            console.log('只要值相等')
        }else {
            console.log('都不相等')
        }

        //switch
        switch (name){
            case '小白':
                console.log('是小狗');
                break
            case '蜡笔小新':
                console.log('是小孩');
                break
            default:
                console.log('没一个配的上，就走这边')
        }
    </script>
</body>
</html>

循环与鼠标点击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            list-style: none;           //去点
        }
        li{
            height: 20px;
             60px;
            background: skyblue;
            float: left;
            margin-left: 20px;
            text-align: center;         /*水平剧中*/
            cursor: pointer;            /* 小手*/
        }
    </style>
</head>
<body>
    <ul>
        <li>地衣章</li>
        <li>地饿章</li>
        <li>地山章</li>
        <li>地事章</li>
    </ul>

    <script>
        var btn = document.getElementsByTagName('li');

        //用 let 换 var 使得 i 有函数作用域
        // for(let i=0; i<btn.length; i++){
        //     // console.log(i)
        //     btn[i].onclick=function () {
        //         console.log(i)
        //     }
        // }

        // 用 var 实现
        for(var i=0; i<btn.length; i++){
            // console.log(i);
            btn[i].nu = i ;               // 给没个 li 添加属性
            btn[i].onclick=function () {
                console.log(this.nu)        //this.nu = btn[i]
            }
        }
    </script>

</body>
</html>

while do while

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <script>
//            for( var i=0; i<10; i++ ){
//                console.log(i)
//            }

            // for 循环流程
//            var i=0;
//            for(;i<10;){
//                console.log(i);
//                i++;
//            }

            // while 循环流程
//            var i=0;
//            while (i<10){
//                console.log(i);
//                i++;
//            }

            // do while
            var i=0;
            do{
                console.log(i);
                i++;
            } while (i<10);

        </script>
</body>
</html>

字符串方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        var str = 'a b c';

        // length 方法 寡不敌众串长度
        console.log(str.length);  //5

        // 下标
//         console.log(str[0]);   //a

        // indexOf
//        console.log(str.indexOf('a')) ;     // 获取下标  第一个 a 的下标
//        console.log(str.indexOf('a',0)) ;     // 获取下标  从第 0 个 a 的下标
//        console.log(str.indexOf('a',)) ;     // 如果没有，返回 -1

        //split  切割
        console.log(str.split(''));           //["a", " ", "b", " ", "c"]

        // 切片           包前不包后，
//        console.log(str.substring(0,3));        //a b       如果有 -数，将视为0
//        console.log(str.substring(3,0));        //a b       如果有 -数，将视为0
//        console.log(str.substring(2));        //b c         从2 到最末尾

//        console.log(str.slice(0,3));        //a b       如果有 -数，将视为0
//        console.log(str.slice(0,-1));        //       -数，从右往前数，
//        console.log(str.slice(2));        //b c         从2 到最末尾
        console.log(str.slice(-2));        //c         从2 到最末尾
    </script>
</body>
</html>

数组方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        var a = [1,2,3,4,5,6];
//        var b = new Array();

        //length
//        console.log(a.length);

        //下标
//        console.log(a[2]);

        //赋值
        a[2] = 'aaa';
//        console.log(a);

        //后加
//        a.push('bb');

        //前加
//        a.unshift('cc');

        //删除 后
//        a.pop('bb');

        ////删除 前
//        a.shift('cc');

        ////删除 指定
        var x = ['a','b','c','d','e'];
//        console.log(x.splice(2));        //["c", "d", "e"]  这些被删除
//        console.log(x);                 //["a", "b"]

//        console.log(x.splice(1,2));     //["b", "c"] 从1到2 被删
//        console.log(x);                 //["a", "d", "e"]

//        console.log(x.splice(1,2,'ppp','qqq'));     //["b", "c"] 从1到2 被删   在删掉的地方添加 ,'ppp','qqq'....
//        console.log(x);                             // ["a", "ppp", "qqq", "d", "e"]

        // join 拼接
//        console.log(x.join('+'));                    // a+b+c+d+e
//        c(x.join('')) ;                   // abcde

        //排序
        var arr = [0,-5,6,-8];
        //ASCII 排序
//        console.log(arr.sort());             //[-5, -8, 0, 6]
//        console.log(arr.reverse());             //[6, 0, -8, -5]
        // 数学中的正常排序
        arr.sort(function(a,b){
//            return a-b;                   //正序
            return b-a;                     // 反序
        });
        console.log(arr);            // [-8, -5, 0, 6]  [6, 0, -5, -8]

    </script>
</body>
</html>

作业

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul{
            list-style: none;           /*去点*/
        }
        .a{
            height: 20px;
             60px;
            background: skyblue;
            float: left;
            margin-left: 20px;
            text-align: center;         /*水平剧中*/
            cursor: pointer;            /* 小手*/
        }
         .fu{
            height: 230px;
             800px;
            /*background:black;*/
            margin: 100px auto;
            position: relative;                         /*相对定位*/
        }

        img{
            height: 200px;
             800px;
            /*margin: 30px auto;*/
            position: absolute;                         /*绝对定位*/
            left: 0px;
            top: 30px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="fu">
        <ul>
            <li class="a">地衣章</li>
            <li class="a">地饿章</li>
            <li class="a">地山章</li>
            <li class="a">地事章</li>
        </ul>
        <ul class="pic">
            <li><img style="display: block" src="https://res.shiguangkey.com//file/201806/19/20180619142252602590185.jpg"></li>
            <li><img src="https://res.shiguangkey.com//file/201806/19/20180619141337485823895.jpg"></li>
            <li><img src="https://res.shiguangkey.com//file/201806/21/20180621150342030454625.jpg"></li>
            <li><img src="https://res.shiguangkey.com//file/201805/17/20180517113424433990524.jpg"></li>
        </ul>
    </div>
    <script>
        var btn = document.getElementsByClassName('a');
        var m = document.getElementsByTagName('img');
        for(let i=0; i<btn.length; i++){
//             console.log(i);
            btn[i].onclick=function () {
                m[i].style.display='block';
                for(let k=0; k<btn.length; k++){
                    m[k].style.display='none';          // 不显示 
                    if (k == i){                        //  如果 按下 的  K,I 相等则 显示       
                        m[k].style.display='block';
                    }
                }
            }
        }


    </script>

</body>
</html>