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

2023-08-18 19:57:58

算数运算符

<!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;

            width: 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;

            width: 60px;

            background: skyblue;

            float: left;

            margin-left: 20px;

            text-align: center;         /*水平剧中*/

            cursor: pointer;            /* 小手*/

        }

         .fu{

            height: 230px;

            width: 800px;

            /*background:black;*/

            margin: 100px auto;

            position: relative;                         /*相对定位*/

        }

        img{

            height: 200px;

            width: 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>

码农公寓

相关文章