js 基础学习笔记

最新推荐文章于 2024-06-12 11:59:04 发布

Drizzlejj

最新推荐文章于 2024-06-12 11:59:04 发布

阅读量158

点赞数

文章标签： javascript 学习 webview

本文链接：https://blog.csdn.net/Drizzlejj/article/details/125085005

版权

js do-while循环结构


 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <script>
         var n = 3;
         while (n > 0){
             console.log('执行它')
             n--
         }
         console.log('最后执行')

          var b = 3;
          do{console.log('执行它')
            b--}
            while(b > 0)
          console.log('最后执行')

// dowhile 条件不满足时，循环会 执行一次
        var a = 0;
        do{console.log('执行它')
        a--}
        while (a > 0)
        console.log('最后执行')

        var d = 0;
        while(d > 0){console.log('执行它')
            d--}
        console.log('最后执行')
        

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

js for 循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        for(var i =0; i < 3; i++) {
            console.log(i)
            console.log('执行它')
        }
        // 循环结束之后执行的代码
        console.log('最后执行')

        // 输出 1~100 之间所有 3 的倍数
        for(var a = 1;a <= 100; a++) {
            if( a % 3 === 0){
                console.log(a)
            }
        }
        
    </script>
</head>
<body>
    
</body>
</html>

js join方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // join() 将数组用连接符连接成为一个字符串
        // 返回值：连接好的字符串

        var arr = [2021, 12, '01', 18, '00']
        var res = arr.join('-')
        document.write(res)
    </script>
</head>
<body>
    
</body>
</html>

js switch条件语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var foot = 37
        switch(foot){
            case 37:
                console.log('满足37')
                break
            case 40:
                console.log('满足40')
                break
            case 42:
                console.log('满足42')
                break
            default:
                console.log('什么都没有')

        }
        // 计算一年中的第几天
        // 准备三个变量，分别表示 年 月 日
        var year = 2009
        var month = 1
        var data = 15
        // 准备一个变量接受统计结果
        var num = 0
        // 利用 switch穿透效果叠加月份信息
        switch (month){
            case 12:num += 30;
            case 11:num += 31;
            case 10:num += 30;
            case 9:num += 31;
            case 8:num += 31;
            case 7:num += 30;
            case 6:num += 31;
            case 5:num += 30;
            case 4:num += 31;
            case 3:
                if (year % 400 === 0 || year % 4 === 0 && year % 100 !== 0){num += 29}
                else{num += 28}
            case 2:num += 31;
            case 1:console.log(num += data)
        }
            
    </script>
</head>
<body>
    <div>
        <img src="./img/switch.png" alt="">
    </div>
</body>
</html>

js while 循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //定义初始变量n
        var n = 0
        //条件判断 n < 总数
        while (n < 3){
        //一段重复的代码
        console.log('走一个石板')
        //改变初始值
        n++
        }
        //后续代码
        console.log('继续走后面的路')

        // 求 10 的阶乘
        // 准备变量接受阶乘的结果
        var total = 1
        // 开始：10
        var num = 10
        // 结束 >= 1
        while (num >= 1){
            total *= num
            num--
        }
        console.log(total)
    </script>
</head>
<body>
    
</body>
</html>

js 递归函数

<!-- 
    一个函数调用了自身，并设置了结束条件，
这个函数才是一个正确的递归函数

 -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <script>
        /*
        斐波那契数列
        数列：1 1 2 3 5 8 13 21 34 55 
        规则：
        第一位和第二位必然是1
        第三位开始每一位是前两位的和
        需求：求数列第n位是多少

        */
         function fn(n){
             if(n === 1 || n === 2){
                 return 1
             }
             return fn(n-1) + fn(n-2)
         }
         console.log(fn(6))
     </script>
 </head>
 <body>
     <div>
         <img src="./img/jszyy.png" alt="作用域" title="作用域">
     </div>
 </body>
 </html>

js 定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
        语法：setInterval(函数，时间）
        函数：每次要执行的内容
        时间：单位是毫秒
        */
        var timer1 = setInterval(function(){
           document.write('执行一次')
       },1000)
       /*
        语法：setTimeout（函数，时间）
        函数：时间到达执行的内容
        时间：单位是毫秒
        */
       var timer2 = setTimeout(function(){
           document.write('延时执行')
       },3000)

       // 定时器的返回值，返回的是页面上第几个定时器
       console.log('timer1:',timer1)
       console.log('timer2:',timer2)

        // 关闭定时器
        // 语法一：clearInterval（要关闭的定时器返回值）
        // 语法二：clearTimeout（要关闭的定时器返回值）
        clearTimeout(1)

    </script>
</head>
<body>
    <section>
        <!-- 
        间隔定时器
        按照指定周期（毫秒）去执行指定的代码
        延时定时器
        在固定的时间（毫秒）后指定一次代码 
    -->
    <img src="./img/zjdsq.png" alt="">
    </section>
</body>
</html>

js 对象数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 准备一个空对象
        var obj = { };

        // 增加一些成员
        obj.name = '孙悟空';
        obj.age = '1w'
        obj.gender = '雄'
        console.log(obj)

        // 删除一个键值对
        delete obj['gender'] // delete obj.gender
        console.log(obj)

        // 修改一个键值对
        obj.gender = 'man'
        obj['age'] = '500'
        console.log(obj)

        // 查询一个键值对
        console.log(obj['age'])
        console.log(obj.age)
        

    </script>
</head>
<body>
    <div>
        <img src="./img/jsdx.png" alt="js对象总结" title="js对象总结">
    </div>
</body>
</html>

js 构造函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 字面量方式创建对象
        var obj = {
            name:'Jack',
            age:'18',
            sayHi: function(){console.log('hello world')}
        }
        // 如果要创建第二个对象
        var obj2 = {
            name:'Rose',
            age:'21',
            sayHi:function(){console.log('hello world!')}
        }

        // 内置构造函数创建对象
        var obj_1 = new Object()
        obj_1.name = 'Jack'
        obj_1.age = '18'
        obj_1.sayHi = function(){console.log('hello world!!')}

        // 工厂函数创建对象：制造一个工厂函数 -> 使用工厂函数去创建对象
        // 创建工厂函数
        function createObj(name, age){
            // 手动创建一个对象
            var obj_2 = {}
            // 手动向里面添加属性
            obj_2.name = name
            obj_2.age = age
            obj_2.sayHi = function(){console.log('hello world!!!')}
            // 手动返回这个对象
            return obj_2
        }
        // 使用工厂函数去创建对象
        var obj_2_1 = createObj('jack', 18)
        var obj_2_2 = createObj('bob', 21)
        // console.log(obj_2_1, obj_2_2)

        // 制造一个自定义构造函数
        // 制造函数会自动创建对象，自动返回这个对象
        // 我们只需要手动向里面添加内容就可以了
        function createObj_1(name, age){
            // 自动创建对象

            // 手动向对象里面添加成员
            // 这里的 this 指向当前实例（new 前面的变量）
            this.name = name
            this.age = age
            this.sayHi = function(){console.log('hello world!!!')}
            // 自动返回对象
        }
        // 使用自定义构造函数去创建对象，
        // 构造函数在使用的时候需要和 new 关键字连用
        // 如果不连用，那么没有意义

        // 第一次调用 createObj_1 的时候，和 new 关键字连用了
        // 我们  createObj_1 里面的 this 指向了 obj_3
        // 函数内部的代码在执行的时候，就是在向 obj_3 添加了 name age 和 sayHi 三个成员
        var obj_3 = new createObj_1('jack', 18)

        // 第二次调用 createObj_1 的时候，和 new 关键字连用了
        // 我们  createObj_1 里面的 this 指向了 obj_4
        // 函数内部的代码在执行的时候，就是在向 obj_4 添加了 name age 和 sayHi 三个成员
        var obj_4 = new createObj_1('rose',19)

        console.log(obj_3, obj_4)
    </script>
    <!-- 
        核心：
            +找到一个机器，能批量生产对象
            +生产出来的对象，每一个对象都有自己的属性和方法
            +每一个对象可能类似，但是内容不太一样
                =>构造函数
                =>可以批量生产对象
                =>可以向函数一样传递参数，可以给每一个对象添加一些不同的内容
                =>当你需要完成一个功能的时候，我们先制造一个构造函数
                    ->利用构造函数去创建一个可以完成任务的对象
                    ->依赖这个对象完成功能
            这个“机器”（构造函数）要生产有属性有方法的合理的对象
                =>机器：就是构造函数
                =>属性：直接写在构造函数体内
                =>方法：写在构造函数的原型上

     -->
</body>
</html>

js 构造函数的不合理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /*
        构造函数的不合理
            + 当你在构造函数体内书写方法的时候
                =>你需要向对象上添加方法的时候
                =>只要创建一次对象（new 一次）就会有一个函数在占用空间
                =>创建100次对象，会有100个一模一样的函数出现
            + 100个函数一模一样
                =>但是其实里面有99个是重复的，没有必要存在

        */
       // 准备一个构造函数
       function Person(name, age){
           this.name = name
           this.age = age
           this.sayHi = function(){console.log('hello world')}
       }

       // 创建对象
       var p1 = new Person('jack', 18)
       var p2 = new Person('rose',19)
       console.log(p1,p2)
       // 看一下是不是真的两个对象
       console.log(p1 == p2) // false 确实是两个对象

       // 调用两个对象的 sayHi方法
       p1.sayHi()
       p2.sayHi()

       // 两个对象里面的函数
       console.log(p1.sayHi)
       console.log(p2.sayHi)
       console.log(p1.sayHi == p2.sayHi) // faLse 是两个函数
       /*
        var p1 = new Person('Jack', 18)
        var p2 = new Person('Rose', 19)

        p1 第一次执行 Person 函数
            =>会吧函数内部的 this 指向p1
            =>会吧函数体内的代码全部执行一遍
            =>向 p1 上添加 name 属性
            =>向 p1 上添加 age 属性
            =>向 p1 上添加 sayHi 方法，会创建一个函数出来

        p2 第二次执行 Person 函数
            =>会吧函数内部的 this 指向 p2
            =>会吧函数体内的代码全部执行一遍
            =>向 p2 上添加 name 属性
            =>向 p2 上添加 age 属性
            =>向 p2 上添加 sayHi 方法，会创建一个函数出来
        */
    </script>
</body>
</html>

js 构造函数的使用

<!-- 
    构造函数的数用
    1. 构造函数和普通函数没有区别
        只不过在使用的时候和 new 关键字连用
    2.书写构造函数，函数名首字母大写
        当你看到名字的时候，就知道要和 new 关键字连用
    3.调用的时候，需要和 new 关键字连用
        因为只有和 new 关键字连用的的时候，这个函数才会有自动创建对象和返回对象的能力
    4.当函数名和 new 关键字连用的时候
        函数内部的 this 指向当前实例（new 关键字前面的变量）
        我们直在函数体内书写 this.xxx = 值
            就是在向自动创建出来的对象里面添加内容
 -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
     <script>
         function person(){
             console.log('hello world')
         }
         function Person(){
             this.name = 'jack'
         }
         var obj = new Person()
         console.log(obj)
         var obj_1 = Person()
         console.log(obj_1)
     </script>
 </body>
 </html>

js 回答问题循环案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var resl = prompt('这样做真的好吗？')
         while(resl !== 'yes'){
            resl = prompt('这样做真的好吗？')
        }
        alert('好吧，你赢了')
/*
        do {
            var result = prompt('这样做真的好吗？')
        }while(result !== 'yes')
        alert('好吧，你赢了')
        */
    </script>
</head>
<body>
    
</body>
</html>

js 轮播图案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        ul ,ol , li{list-style: none;}
        img{display: block;}

        .banner{width: 900px;height: 380px;position: relative;margin: 50px 0;}

        .banner ul{width: 100%;height: 100%; position: relative;}
        .banner ul li{
            width: 100%;height: 100%;
            position: absolute;left: 0;top: 0;
            opacity: 0;
            transition: .5s linear;}
        .banner ul li.active{opacity: 1;}
        
        .banner ol{width: 100px;height: 20px;
            display: flex;justify-content: space-between;
            position: absolute;left: 350px;bottom: 0px;
            }
        .banner ol li {width: 8px;height: 8px;
            cursor: pointer;
            border: 2px solid white; border-radius: 50%;}
        
        .banner ol li.active{background-color: orangered;}

        .banner div{width: 20px;height: 40px;
            position: absolute;top: 50%;
            transform: translateY(-50%); /* 垂直居中 */
            background-color: rgba(0, 0, 0, .5 );
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            color: white;
            cursor: pointer;
        }
        .left{left: 0;}
        .right{right: 0;}
    </style>
</head>
<body>
    <div class="banner">
        <ul class="imgBox">
            <li class="active"><img src="./img/31.png" alt=""></li>
            <li><img src="./img/32.png" alt=""></li>
            <li><img src="./img/33.png" alt=""></li>
            <li><img src="./img/34.png" alt=""></li>
        </ul>
        <ol class="fouc">
            <li data-i = '0' data-name="point" class="active"></li>
            <li data-i = '1' data-name="point"></li>
            <li data-i = '2' data-name="point"></li>
            <li data-i = '3' data-name="point"></li>
        </ol>

        <div class="left">&lt</div>
        <div class="right">&gt</div>
    </div>
    <script>
        /*
        点击左按钮，当前这一张消失，上一张出现
        点击右按钮，当前这一张消失，下一张出现
        点击焦点按钮，当前这一张消失，某一张出现
        */
       // 获取元素
       var l = document.querySelector('.left')
       var r = document.querySelector('.right')
       var p = document.querySelector('ol')
       var ban = document.querySelector('.banner')

       var img = document.querySelectorAll('ul>li')
       var poin = document.querySelectorAll('ol>li')
       console.log(poin)

       // 准备一个变量，表示当前是第几张，默认是0，因为默认显示的是弟0张。
       var index = 0
       // 书写一个切换一张的函数,
       // 这个函数有可能切换上一张，有可能切换下一张，有可能直接切换到索引的图片
       // 约定 ： true 切换下一张， false : 切换上一张， number : 切换到索引的图片
       function changeOne(type){
            // 让当前显示的图片隐藏和高亮按钮取消高亮
            img[index].className = ''
            poin[index].className = ''
            if(type === true){
                index++
            }else if(type === false){
                index--
            }else{
                index = type
            }
            // 判定一下 Index 的边界值
            if (index >= img.length){
                index = 0
            }
            if (index < 0){
                index = img.length - 1
            }
            // 让改变后的这一张显示出来
            img[index].className = 'active'
            poin[index].className = 'active'
       }
       // 给轮播图区域添加绑定点击事件
       ban.onclick = function(e){
            // 判断点击的是左按钮
            if(e.target.className === 'left'){
                console.log('点击了左按钮')
                // 切换上一张，调用 changeOne 方法传递参数为 false
                changeOne(false)
            }
            // 判断点击的是右按钮
            if(e.target.className === 'right'){
                console.log('点击了右按钮')
                // 切换下一张，调用 changeOne 方法传递参数为 true
                changeOne(true)
            }
            // 判断点击的是焦点盒子
            if(e.target.dataset.name === 'point'){
                console.log('点击了焦点按钮')
                // 拿到自己身上记录的索引
                var i = e.target.dataset.i - 0
                //切某一张，调用 changeOne 方法传递参数为 i
                changeOne(i)
            }    
       }
       // 自动切换
       setInterval(function(){
                changeOne(true)
            },2000)
    </script>
</body>
</html>

js 面向对象选项卡

<!-- 简单版 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        ul, ol, li{list-style: none;}

        .tab{width: 900px;height: 450px;border: 10px solid black;
            display: flex;flex-direction: column;
        }

        .tab ul{
            height: 50px;
            display: flex;
        }
        .tab ul li{
            flex: 1;
            display: flex;justify-content: center;align-items: center;
            width: 300px;font-size: 28px;
            color: white;background-color: skyblue;
            cursor: pointer;
        }
        .tab ul li.active{background-color: orange;}

        .tab ol{flex: 1;display: flex;position: relative;}
        .tab ol li{
            width: 100%;height: 100%;
            font-size: 78px;color: white;background-color: orchid;
            display: flex;justify-content: center;align-items: center;
            position: absolute;top: 0;left: 0;display: none;}
        .tab ol li.active{display: flex;}
    </style>
</head>
<body>
    <div class="tab" id="box">
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ol>
    </div>
    <div class="tab" id="box2">
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ol>
    </div>
    <script>
        /*
        1.抽象内容
            +一个能够完成选项卡的对象，需要有哪些属性和方法
            +属性：所有可以点击的按钮盒子
            +属性：所有可以切换的选项盒子
            +方法：能添加点击事件的方法
        2.书写构造函数
            +能创建一个对象，包含两个属性和一个方法
            +属性直接写在构造函数体内
            +方法写在构造函数的原型上
        */
        // 书写构造函数
        function Tabs(ele){
            // 1.范围
            this.ele = document.querySelector(ele)
            // 2.在范围内找到所有可以点击的盒子
            this.btns =this.ele.querySelectorAll('ul > li')
            // 3.在范围内找到所有需要切换显示的盒子
            this.tabs = this.ele.querySelectorAll('ol > li')
        }

        // 4.原型上书写方法 (创建一个 change 函数方法)
        Tabs.prototype.change = function(){
            // 4.1执行给所有 btns 里面的按钮添加点击事件
            // 4.1.2 怎么拿到 btns
            console.log(this.btns) // 此处绝对不能直接使用 t.btns

            // 6 提前保存一下 this 
            var _this = this
            console.log(_this)

            for (var i = 0; i < this.btns.length; i++){
                // 5 提前保存索引 (setAttribute() 方法添加指定的属性，并为其赋指定的值。)为元素添加属性
                this.btns[i].setAttribute('index', i)

                this.btns[i].addEventListener('click',function(){
                    console.log('我被点击了')
                    //4.3 需要让实例的btns 里面的每一个没有 active 类名
                    //4.3 需要让实例的tabs 里面的每一个没有 active 类名

                    // 这里不是在change函数的作用域了，而是事件处理函数的作用域
                    // 在事件处理函数里面，this指向当前事件的事件源
                    console.log(_this)
                    // 当你访问_this 的时候，其实是在访问变量
                    // 自己作用域没有，就会去上一级作用域查找

                    for (var j = 0; j < _this.btns.length; j++){
                        _this.btns[j].className = ''
                        _this.tabs[j].className = ''
                    }
                    // 7 当前点击的这个 li 有 active 类名
                    this.className = 'active'
                    // 让实例身上的tabs 里面索引对应的哪一个 li 有actvie 类名
                    // 拿到当前 li 身上保存的索引
                    var index = this.getAttribute('index') - 0
                    _this.tabs[index].className = 'active'

                })
            }
        }

        // 使用的时候
        // 选项卡就可以使用了
        var t = new Tabs('#box')
        // 实例对象在调用方法
            // 函数调用方式，对象.函数名（）
            // 函数内部的 this 就是指向 点 前面的 xxx
            // 我在 change 函数里面写的 this 就是 t
        t.change()
        console.log(t)

        // 第二个选项卡
        var t2 = new Tabs('#box2')
        t2.change()
    </script>
</body>
</html>

js 时间常用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 获取当前终端时间
        console.log(new Date())
        // 自定义时间
        console.log(new Date( 2010, 0, 1, 8, 0)) // Fri Jan 01 2010 08:00:00 GMT+0800 (中国标准时间)
        // 获取 年
        var time = new Date()
        console.log(time.getFullYear())  // 2021
        // 获取 月 ； 0 表示 1 月，11 表示 12 月
        console.log(time.getMonth())
        // 获取 日
        console.log(time.getDate())
        // 获取 小时
        console.log(time.getHours())
        // 获取 分钟
        console.log(time.getMinutes())
        // 获取 秒
        console.log(time.getSeconds())
        // 获取一周中的第几天
        console.log(time.getDay())
        // 获取时间戳
        console.log(time.getTime())

        // 时间的设置 设置一个时间 2020年2月3日4时5分6秒
        // 设置 年
        console.log(time.setFullYear(2020))  
        // 设置 月 ； 0 表示 1 月，11 表示 12 月
        console.log(time.setMonth(1))
        // 设置 日
        console.log(time.setDate(3))
        // 设置 小时
        console.log(time.setHours(4))
        // 设置 分钟
        console.log(time.setMinutes(5))
        // 设置 秒
        console.log(time.setSeconds(6))
        
        console.log(time)
    </script>
</head>
<body>
    <div>
        <img src="./img/hqsj.png" alt="获取时间">
    </div>
    <div>
        <img src="./img/szsj.png" alt="设置时间">
    </div>
</body>
</html>

js 时间常用方法案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

        function getDiff(NewTime){
            // 获取两个时间节点之间的时间差
        // 设置两个时间点
        var OldTime = new Date()  // 当前时间
        /*
        var NewTime = new Date(2022, 0, 31, 0, 0, 0) // 2022-01-31-00-00-00
        */
        // 两个时间点的时间戳相减,得到两个时间点之间相差的毫秒数
        var a = NewTime.getTime() - OldTime.getTime()
        // 把相差的毫秒数换算成秒
        var b =Math.floor (a / 1000)
        // 相差的 日
        var d = Math.floor(b / (24*60*60))
        // 相差的 小时
        var h = Math.floor(b % (24*60*60) / (60*60))
        // 相差的 分钟
        var m = Math.floor(b % (60 *60) / 60)
        // 相差的 秒
        var s = b % 60
        
        return { day:d, hour:h, minutes:m, seconds:s}
        }
        var t = new Date(2022,0,31,23,59,59)
        console.log(getDiff(t))
    </script>
</head>
<body>
    
</body>
</html>

js 实现全选案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{width: 100px;padding: 20px; border: 1px solid black;border-radius: 5px;}
        hr{margin: 10px 0;}
    </style>
</head>
<body>
    <div class="box">
        全选：<input type="checkbox"><br>
        <hr>
        <input type="checkbox">选项一<br>
        <input type="checkbox">选项二<br>
        <input type="checkbox">选项三<br>
        <input type="checkbox">选项四<br>
    </div>
    <script>
        /*
        代码逻辑：
        1.给 全选按钮 绑定点击事件
        -拿到自己的选中状态
        -给所有选项按钮设置选中状态
        2.给每一个选项按钮绑定点击事件
        -判断是不是所有选项按钮都是选中的
        -根据判断结果给全选按钮设置选中状态
        */
       // 获取元素
       var allBtn = document.querySelector('input')
       var items = document.querySelectorAll('input:nth-child(n + 2)')
       console.log(items)
       // 给全选按钮绑定事件
       allBtn.onclick = function(){
            // 选中状态
            var type = allBtn.checked
            console.log(type)  
            // 把自己的选中状态设置给每一个选项按钮
            for (var i = 0; i < items.length; i++){
                items[i].checked = type
                }
        }
        //循环给每一个选项按钮绑定点击事件
        for (var i = 0; i < items.length; i++){
            items[i].onclick =function(){
                // 假设所有按钮都是选中的
                var flag = true
                // 通过循环来验证假设
                for (var j = 0; j < items.length; j++){
                    if(items[j].checked === false){
                        flag = false
                        break
                    }
                }
                console.log(flag)
                // 把得到的结果设置个全选按钮
                allBtn.checked = flag
            }
        }
        
    

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

js 事件下事件传播和阻止

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        ul li{list-style: none;}
        .outer{width: 300px;height: 300px;background-color: pink;
            display: flex;justify-content: center;align-items: center;
            margin: 0 auto;}
        .center{width: 200px;height: 200px;background-color: skyblue;
            display: flex;justify-content: center;align-items: center;}
        .inner{width: 100px;height: 100px;background-color: tomato;}

        ul{width: 400px;height: 100px; margin: 30px auto;background-color: turquoise;
            display: flex;justify-content: space-around;align-items: center;}
        ul li{width: 50px;height: 50px;font-size: 28px;background-color: tomato;
        color: white;display: flex;justify-content: center;align-items: center;}
    </style>
</head>
<body>
    <!-- 事件传播 -->
    <div class="outer">
        <div class="center">
            <div class="inner">
            </div>
        </div>
    </div>
    <script>
        // 逐渐向外传播
        // 获取元素
        var a = document.querySelector('.outer')
        var b = document.querySelector('.center')
        var c = document.querySelector('.inner')
        // 添加绑定点击事件
        a.onclick = function(){console.log('我是outer,我被点击了')}
        b.onclick = function(){console.log('我是center,我被点击了')}
        c.onclick = function(e){
            e.stopPropagation() // 阻止了传播
            console.log('我是inner,我被点击了')}
    </script>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        // 获取元素
        var d = document.querySelector('ul')
        // 添加绑定点击事件
        d.onclick = function(e){
            console.log('我是ul,我被点击了')
            // 获取点击的是哪一个标签
            console.log(e.target)
            // 通过事件目标判断点击的标签
            if (e.target.tagName === 'LI'){
                console.log('你点击的是li')
            }
        }
        
    </script>
</body>
</html>

js 鼠标跟随案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{width: 30px;height: 30px;border-radius: 50%;background-color: red;
        position: fixed;left: 0;top: 0;}
    </style>
</head>
<body>
    <div></div>
    <script>
        // 获取元素
        var d = document.querySelector('div')
        // 给整个窗口添加鼠标移动事件
        document.onmousemove = function(e){
            // 获取鼠标移动的坐标
            var x = e.clientX
            var y = e.clientY
            // 坐标 赋值给 元素
            d.style.left = x + 5 +'px'
            d.style.top = y + 5 + 'px'
        }
    </script>
</body>
</html>

js 数字常用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
        random()
        语法：Math.random()
        作用：获取0~1之间的随机小数，包含0，但是不包含1
        返回值：0~1之间的随机小数
        */
       console.log(Math.random())

       /*
        round()
        语法：Math.round(数字）
        作用：对数字进行四舍五入取整
        返回值：四舍五入后的整数
        */
       console.log(Math.round(10.5))

       /*
        ceil()
        语法：Math.ceil（数字）
        作用：对数字进行向上取整
        返回值：向上取整后的整数
        */
       console.log(Math.ceil(10.5))

       /*
        floor(）
        语法：Math.floor(数字）
        作用：对数字进行向下取整
        返回值：向下取整后的整数
        */
       console.log(Math.floor(10.5))

       /*
        Row()
        语法：Math.pow（底数，指数）
        作用：对数字进行取幂运算
        返回值：取幂后的结果
        */
       console.log(Math.pow(2, 3))

       /*
        sqrt()
        语法：Math.sqrt（数字）
        作用：对数字进行二次方根运算
        返回值：二次方根后的结果
        */
       console.log(Math.sqrt(16))

       /*
        abs()
        语法：Math.abs(数字）
        作用：对数字进行绝对值运算
        返回值：绝对值运算后的结果
        */
        console.log(Math.abs(-10))

        /*
        max()
        语法：Math.max（数字1,数字2,数字3,.）
        作用：获取若干数字的最大值
        返回值：若干个数字中的最大值
        */
       console.log(Math.max(1, 20, 3, 50, 10))

       /*
        min()
        语法：Math.min(数字1,数字2,数字3,.）
        作用：获取若干数字的最小值
        返回值：若干个数字中的最小值
        */
        console.log(Math.min(-1, 20, 3, 50, 10))

        /*
        PI
        语法：Math.PI
        作用：得到一个近似T的值
        */
       console.log(Math.PI)
    </script>
</head>
<body>
    
</body>
</html>

js 数字常用方法案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 获取0-10范围内的随机数
        var rando = function(){
            // 获取一个随机小数
            var n = Math.random()
            // 用这个小数乘以10
            var num = n * 10
            // 对这个数四舍五入取整
            return Math.round(num)
        }
        console.log(rando())
        // 存在的问题
        /*
        0 ~ 0. 499...        0
        0.5 ~ 1.499...       1
        8.5 ~ 9.499...       9
        9.5 ~ 9.999..        10
        0 和 10 的概率较小。
        */

        // 利用 floor 向下取整
        var rand = function(){
            // 获取一个随机小数
            var n1 = Math.random()
            // 用这个小数乘以11
            var num1 = n1 * 11
            // 对这个数向下取整
            return Math.floor(num1)
        }
        console.log(rand())

        // 升级......

        // 获取一定范围内的随机数
        // 准备两个数字当作范围
        var min = 15
        var max = 26
        // 两数差的随机整数
        var res = Math.floor(Math.random() * (max - min + 1))
        // 使用随机整数 + 相对较小的数字
        var res2 = res + min
        console.log(res2)

        // 封装函数
        var r = function (x, y){
            var res_1 =Math.floor(Math.random() * (y - x + 1))
            return res_1 + x
        }
        console.log( r(15, 20))
    </script>
</head>
<body>
    <div>
        <img src="./img/zjszff.png" alt="">
    </div>
</body>
</html>

js 数组redecu累加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>求1-100的和！</div>
    <button onclick="handleClick()">累加求和</button>
    <button onclick="handleClick2()">reduce累加求和</button>
    <div>和是：<span></span></div>
</body>
<script>

    // 声明指定长度的数组
    var arr = new Array(101)
    // 创建一个 0-100 的数组
    for(var i = 0;i<arr.length;i++){arr[i]=i}
    function handleClick () {
        let total = 0
        arr.forEach((item) => {total += item})
        document.getElementsByTagName('span')[0].innerHTML = total
    }
    function handleClick2 () {
        // 数组.reduce((上次计算的结果，当前循环的item项) => {return 上次的结果 + 当前循环的 item 项},初始值)
        const sum = arr.reduce((val,item) => { return val + item},0)
        document.getElementsByTagName('span')[0].innerHTML = sum
        
    }

    // reduce 第二种方法
    var obj = {
        name:'猴子',
        info:{
            skill:{
                location:'花果山水帘洞',
                sex:'male'
            }
        }
    }
    var arrys = ['info','skill','location']
    var located = arrys.reduce((newObj,key) => {return newObj[key]},obj)
    console.log(located)
    // 如果是一个字符串,则需要把这个字符串分割成一个数组，再用 reduce 
    const attrStr = 'info.skill.location'
    var locat =  attrStr.split('.').reduce((newObj,k) => newObj[k],obj)
    console.log(locat)
</script>
</html>

js 数组的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 创建一个数组
        var arr = [1, 2, 3, 4, 5]

        // push 方法 将数据 追加 到数组的 末尾
        arr.push(7)
        console.log(arr)
        // 返回值 ： 追加数据后数组 最新的长度
        var res = arr.push('返回值')
        document.write(res)
        // 发生了变化
        delete arr[3]
        console.log(arr)

        // pop 方法 删除数组 最后一个 数据
        // 返回值 ： 被删除的数据
        var res_1 = arr.pop()
        document.write(res_1)
        console.log(arr)

        // unshift() 将数据 添加 到数组的 最前
        // 返回值 ： 添加数据后的 最新长度
        var res_2 = arr.unshift('最前')
        console.log(res_2)
        console.log(arr)

        // shift() 删除数组 最前面一个 数据
        // 返回值 ： 被删除的数据
        var res_3 = arr.shift('最前')
        console.log(res_3)
        console.log(arr)

        // reverse() 将数组反转
        // 返回值 ： 反转后的数组
        var res_4 = arr.reverse()
        console.log(res_4)
        console.log(arr)

        // splice()
        /*
        语法：数组.splice（开始索引，多少个，要插入的数据）
            开始索引：默认是0
            多少个：默认是0
            要插入的数据：默认是没有
        作用：删除数组中若干数据，并选择是否插入新的数据
        返回值：以新数组的形式返回被删除的数据
        */
        var res_5 = arr.splice(1, 3, '新来的')
        console.log(res_5)
        console.log(arr)

        // sort()
        /*
        语法：
            数组.sort（）
            数组.sort( function (a, b) { return a - b } ）
            数组.sort( function (a, b) { return b - a } ）
        作用：将数组进行 排序
        返回值：排序好的新数组
        */
        var arr_1 = [5, 1, 11, 2, 133, 3, 1111, 4]
        var res_6 = arr_1.sort()
        console.log(res_6)
        console.log(arr_1)
        var res_61 = arr_1.sort(function(a, b){ return a - b })
        console.log(res_61)
        console.log(arr_1)
        var res_62 = arr_1.sort(function(a, b){ return b - a })
        console.log(res_62)
        console.log(arr_1)

        // join() 将数组用连接符连接成为一个字符串
        // 返回值：连接好的字符串
        var arr_3 = [2021, 12, '01', 18, '00']
        var res_7 = arr_3.join('-')
        console.log(res_7)

        // contact() 将其他数组和数组 拼接 在一起
        // 返回值 ： 拼接好的 新数组
        var res_8 = arr_3.concat(arr_1)
        console.log(res_8)

        // slice()
        /*
        语法：数组.slice（开始索引，结束索引）
            开始索引：默认是0
            结束索引：默认是数组长度
        作用：截取数组中的某些数据
        返回值：以新数组的形式返回截取出来的数据
        */
        var res_9 = arr_3.slice(0, 3)
        console.log(res_9)

        // indexof()
        /*
        作用：查找数据在数组中的索引位置
        返回值：
            有该数据，返回第一次出现的索引位置
            没有该数据，返回-1
        */
        var arr_10 = [1, 2, 3, 2]
        var resl = arr_10.indexOf(2)
        console.log(resl)
        var resl_1 = arr_10.indexOf(4)
        console.log(resl_1)

        // forEach()
        // 语法：数组.forEach(function（item,index,arr）{}）
        // 作用：遍历数组
        arr.forEach( function ( item, index, arr){
            // item 就是数组的每一项
            console.log(item)
            // index 就是索引
            console.log(index)
            // 原始数组
            console.log(arr)
            // 打印分隔线
            console.log('---------------------------')
        })

        // map()
        /*
        语法 ： 数组.map( function ( item, index, arr) {})
        作用 ： 映射 数组
        返回值 ： 映射后的 新数组
        */
        var resl_2 = arr.map( function ( item, index, arr) {
            // 以 return 书写映射条件
            return item * 10
        })
        console.log(resl_2)

        // filter()
        // 语法：数组.filter(function（item,index,arr）{}）
        // 作用：过滤数组
        // 返回值：过滤后的新数组
        var arr_4 = [100, 200, 300, 400]
        var resl_3 = arr_4.filter( function(item, index){
            // 以 return 方式书写过滤条件
            return item > 150
        })
        console.log(resl_3)

        /*
        every()
        语法：数组.every(function（item,index,arr）{})
        作用：判断数组是不是每一项都满足条件
        返回值：一个布尔值
        */
       var resl_4 = arr_4.every( function( item, index,arr){
           return item > 150
       })
       console.log(resl_4)

       /*
        some()
        语法：数组.some(function（item,index,arr）{}）
        作用：判断数组是不是有某一项满足条件
        返回值：一个布尔值
       */
      var resl_5 = arr_4.some(  function (item, index, arr){
          return item < 200
      })
      console.log(resl_5)
    </script>
</head>
<body>
    <div>
        <img src="./img/szff.png" alt="">
    </div>
</body>
</html>

js 循环练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 打印10*10方形
        for(var a = 0; a < 10; a++){
            for(var i = 0;i < 10; i++){
            document.write(' * &nbsp&nbsp')}
        document.write('</br>')
        }
        // 打印三角形
        for(var d = 1; d <= 10; d++){
            for(var c = 0; c < d; c ++){
            document.write(' * &nbsp&nbsp')}
        document.write('</br>')
        }
        // 打印99乘法表
        for(var e = 1; e < 10; e++){
            for(var f = 1; f <= e; f++){
                document.write(f + " * " + e + " = " + e*f + "&nbsp&nbsp&nbsp&nbsp")
            }
        document.write('</br>')
        }
        // 最大公约数
        // 准备两个变量，保存两个数字
        var max = 24;
        var min = 12;
        for (g = min;g >= 1; g--){
            if (max % g === 0 && min % g === 0){
                console.log(g)
                break
            }
        }
        // 最小公倍数
        // 准备两个变量，保存两个数字
        var max = 15;
        var min = 10;
        for (var i = max; i <= min * max; i += max){
            // console.log(i)
            if (i % min === 0){
                console.log(i)
                break
            }
        }
    </script>
</head>
<body>
    
</body>
</html>

js 原型，原型链

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        <script>
            /*
            ﹢解决问题
                =>当你需要给实例对象添加方法
                =>直接书写在构造函数体内
                =>这个行为并不好
                =>我们的原型就是解决了这个问题
            不好的原因
                =>当我把方法书写在构造函数体内
                =>每次创建实例的时候，都会创建一个函数数据类型
                =>多个函数方法，一模一样，但是占据了多分存储空间
            */
            function Person(name, age){
                // 向实例随想内添加属性
                this.name = name
                this.age = age
                // 向实例对象内添加方法
                // 在构造函数体内直接向实例对象添加方法，这个行为并不好
                this.sayHi = function(){ console.log('hello world')}
            }
            console.log(Person.prototype)
            // 创建一个实例
            var p1 = new Person('jack', 18)
            // 创建第二个实例
            var p2 = new Person('rose', 19)

            console.log(p1, p2)

            p1.sayHi()
            p2.sayHi()
        </script> 
    -->
    <script>
        /*
        解决问题
            原型
            =>概念：每一个构造函数天生自带一个prototype属性，是一个对象数据类型
            =>概念：每一个对象天生自带一个属性__proto__，指向所属构造函数的prototype
            =>概念：当你访问对象的成员的时候，首先在自己身上查找，如果没有，自动去到_proto__上查找
        如何解决问题
            =>我们把需要添加给实例的方法，放在构造函数的原型（prototype）上
            =>就可以有实例进行访问使用
        原型：
            =>构造函数天生自带的一个prototype
            =>作用：有构造函数添加方法，专门给实例对象使用
        */
        function Person(name, age){
            // Person.prototype.name = name
            // Person.prototype.age = age
            this.name = name
            this.age = age

            console.log(Person.prototype)
        }
        // 创建一个实例对象
        // p1 所属的构造函数就是 Person
        // p1.__proto__ === Person.prototype
        var p1 = new Person('jack', 18)
        // console.log(p1.__proto__ === Person.prototype)
        console.log(p1.__proto__ )

        // 当你访问 p1 的 name 成员
        // 因为当你访问p1.a 的时候，自己没有，会自动去自己的__proto__ 上查找
        // 又因为自己的__proto___就是 perosn.prototype
        // 所以，其实就是去到 person.prototype 上查找

        console.log(p1.name)

        // 如何解决问题
        // 把想添加给实例对象的方法，书写在原型上
        Person.prototype.sayHi = function (){console.log('hello world')}

        // 再创建一个实例对象
        // p2 所属的构造函数就是 Person
        var p2 = new Person('rose', 19)

        console.log(p2.__proto__ ===  Person.prototype )

        // 当你访问 p1 的sayHi的时候
        // 自己没有, 回去自己的 __proto__ 上找
        console.log(p1.sayHi)
        // 当你访问 p2 的sayHi的时候
        // 自己没有, 回去自己的 __proto__ 上找
        console.log(p2.sayHi)

        // 因为p1.__proto__和p2.__proto__是一个对象空间
        // p1和p2的sayHi是一个
        console.log(p1.sayHi === p2.sayHi)

        function People(name, age){
            this.name = name
            this.age = age

            this.sayH = function (){console.log('hi world')}
        }
        var P1 = new People('bob', 14)
        var P2 =new People('Tom', 16)
        console.log(P1, P2)
        P1.sayH()
        console.log(P1.sayH === P2.sayH)
    </script>
</body>
</html>

js 原型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /*
        原型prototype
            +定义：每一个函数天生自带一个属性，叫做prototype，是一个对象
            +构造函数也是函数，也会有这个自带的空间prototype
            +既然prototype是一个对象，我们就可以使用对象操作的语法，向里面添加一些内容
        对象
            +定义：每一个对象，在你访问他的成员的时候，如果自己没有这个属性
                =>会自动去所属构造函数的prototype上查找
            +自定义构造函数创建的对象也是对象，当你访问某一个成员的时候
                =>如果没有，也会自动去所属构造函数的原型上查找
                =>哪一个构造函数创建的对象，这个对象就属于哪一个构造函数
                =>因为构造函数在创建对象的过程，我们起名为实例化的过程
                    >创建出来的对象叫做这个构造函数的一个实例化对象


        */
       function Person(){}
       Person.prototype.sayHi = function(){console.log('我是 Person 原型上的方法')}
       console.log(Person.prototype)

       // 创建一个实例化对象
        // 因为 p1 是 Person 实例化出来的对象
        // p1 就是属于 Person 这个构造函数的
        // 当你访问 p1 的sayHi成员的时候，p1 自己是没有的
        // 会自动去 Person 的原型（prototype）上查找

        var p1 = new Person()
        console.log(p1)
        p1.sayHi()

        // 创建第二个实例化对象
        // 因为 p2  也是Person 的实例化对象
        // p2 没有 sayHi成员，也会自动去 Person 的原型上查找
        var p2 = new Person()
        console.log(p2)
        p2.sayHi()
    </script>
</body>
</html>

js 原型链

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        <script>
        /*
        问题1：实例对象身上的__proto__指向谁？
            =>指向所属构造函数的prototype
            =>p1所属的构造函数是Person
            =>p1.__proto__指向Person.prototype

        问题2:Person.prototype 的__proto___指向谁?
            =>Person.prototype所属的构造函数是谁
            =>因为Perosn.prototype是一个对象数据类型(object）
            =>在Js内所有的object数据类型都是属于object这个内置构造函数
            =>Person.prototype是属于 object 这个内置构造函数的
            =>Person.prototype的__proto__指向object.prototype

        问题3： Person 的__proto__ 指向谁？
            =>Person是一个函数，函数本身也是一个对象，就会有__proto___
            =>在JS内，所有的函数都是属于内置构造函数Function的实例
            =>Person.__proto__指向 Function.prototype

        问题4:object.prototype 的__proto__指问谁?
            =>object.prototype是一个对象数据类型，只要是对象，都是数据object这个内置构造函数的
            =>注意：object.prototype 在 Js 内叫做顶级原型,不在有__proto___了
            =>object.prototype的__proto__指向 null

        问题5:object 的__proto__指问谁?
            =>object是内一个内置构造函数，同时也是一个函数，同时也是一个对象
            =>在JS内，所以的函数都是属于内置构造函数Function的实例
            =>object也是Function的实例
            =>object.___proto__指向Function.prototype

        问题6:Function.prototype 的 __proto__指向谁?
            =>Function.prototype也是一个对象数据类型
            =>只要是对象数据类型都是object的实例
            =>Function.prototype的__proto__指向object.prototype

        问题7：Function 的__proto__ 指向谁?
            =>Function也是一个内置构造函数，也是一个函数
            =>在JS内，所有的函数都是属于内置构造函数Function的实例
            =>Function自己是自己的构造函数
            =>Function自己是自己的实例对象
            =>Function所属的构造函数的是Function
        
            原型链
                + 用 __proto__ 串联起来的对象链状结构
                注意：使用__proto__
                +每一个对象数据类型，都有一个属于自己的原型链
                +作用：为了访问对象成员

            对象访问机制：
                +当你需要访问对象的成员的时候
                +首先在自己身上查找，如果有直接使用
                + 如果没有,会自动去 __proto__ 上查找
                + 如果还没有，就再去__proto___ 上查找
                +直到object.prototype都没有，那么返回 undefiend
            */
       function Person(){}
    
       var p1 = new Person()
        </script> 
    -->
    <div>
        <img src="./img/原型.png" alt="">
    </div>
</body>
</html>

js 字符串常用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
        charAt()
        语法：字符串.charAt（索引）
        作用：获取对应索引位置的字符
        返回值：对应索引位置的字符
        */

        /*
        toLowerCase()
        语法：字符串.toLowerCase(）
        作用：将字符串内的字母全部转换成小写
        返回值：转换好的字符串
        */
        var s = 'Hello, This is WTO  and This is BBC'
        var res = s.toLowerCase()
        console.log(res)

        /*
        toUpperCase()
        语法：字符串.toUpperCase(）
        作用：将字符串内的字母全部转换成大写
        返回值：转换好的字符串
        */
       var res_1 = res.toUpperCase()
       console.log(res_1)

       /*
        replace()
        语法：字符串.replace(换下内容，换上内容）
        作用：将字符串内第一个满足换下内容的片段替换成换上内容
        返回值：替换好的字符串
        */
       var res_2 = s.replace('This','That')
       console.log(res_2)

       /*
        trim()
        语法：字符串.trim(）
        作用：去除字符串首尾的空格
        返回值：去除空格后的字符串
        */
       var res_3 = s.trim()
       console.log(res_3)

       /*
        split()
        语法：字符串.split（分隔符）
        作用：按照分隔符将字符串切割成为一个数组
        返回值：切割后的数组
       */
      var str = '2021-12-02'
      console.log(str.split('-'))

      console.log(s)                // Hello, This is WTO  and This is BBC
      console.log(s.substr(1, 8))    // ello, Th
      console.log(s.substring(1, 8)) // ello, T
      console.log(s.slice(1, 8))    //  ello, T
    </script>
</head>
<body>
    <div>
        <img src="./img/zfcff.png" alt="">
    </div>
    <div>
        <img src="./img/zfcff_1.png" alt="">
    </div>
</body>
</html>

js案例回到顶部

<!-- 
    /*
    1.滚动条滚动不超过临界点，顶部通栏显示，否则隐藏
    2.滚动条滚动超过临界点，回到顶部按钮显示，否则隐藏
    3.点击回到顶部按钮，滚动条滚动回到顶部
    */
 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;padding: 0;
        }
       body{height: 3000px;}

       .head{width: 100%;height: 80px;
        display: flex;justify-content: center;align-items: center;
        font-size: 30px;color: #fff;background-color: skyblue;
        transition: top .5s linear;
        position: fixed;top: -80px;left: 0;
        }

        .Gotop{width: 50px;height: 50px;background-color: pink;
        font-size: 20px;text-align: center;line-height: 25px;color: #fff;
        position: fixed;bottom: 50px;right: 50px;
        display: none;}

    </style>
</head>
<body>
    <!-- 
    1.需要一个顶部通栏标签和一个回到顶部按钮标签
    2.让页面超过浏览器可视窗口高度
    3.设置顶部通栏样式，默认是在超出页面的
    4.设置回到顶部按钮样式，默认是在隐藏的
     -->
     <header class="head">这是导航栏</header>
     <section class="Gotop">返回顶部</section>
    <script>
       /*
        代码逻辑：
        1.给浏览器绑定滚动事件，实时获取浏览器卷去的高度
        2.判断卷去的高度决定隐藏还是显示
        3.给回到顶部按钮绑定点击事件
        */
       // 获取元素
       var header = document.querySelector('.head')
       var goTop = document.querySelector('.Gotop')
       // 绑定滚动事件
       window.onscroll = function(){
           // 获取浏览器卷去的高度
        var height = document.documentElement.scrollTop || document.body.scrollTop
        // 判断卷去的高度
        if(height >= 300){
            header.style.top = '0px'
            goTop.style.display = 'block'
        }else{
            header.style.top = '-80px'
            goTop.style.display = 'none'
        }
       }
       // 绑定点击事件
       goTop.onclick = function(){
           // 让页面滚回到顶部
        window.scrollTo({
            top:0,
            behavior:'smooth'
        })
       }
    </script>
</body>
</html>

js动态渲染数据案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{width: 300px;text-align: center;}
    </style>
</head>
<body>
    <table border="1" cellspacing='0'>
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <!-- js 渲染 -->
        </tbody>
    </table>

    <script>
       var users = [
           {id: 01, name: '孙悟空1', age: 50},
           {id: 2, name: '猪八戒', age: 5},
           {id: 31, name: '沙和尚', age: 500},
           {id: 4, name: '小白龙', age: 30}]

       var tbody = document.querySelector('tbody')

       // 循环遍历 users 的数据
       users.forEach(function (item){
           // 这里的 item 是数组的每一个对象
           console.log(item)
           // 每一个对象生成一个 tr 标签
           var tr = document.createElement('tr')
           // 循环遍历 item 
           for(var key in item){
            // 生成 td 标签
            var td = document.createElement('td')
            td.innerHTML = item[key]
            // td 标签插入到 tr
            tr.appendChild(td)
           }
           //把本次的循环结果 tr 插入到 tbody 的内部
           tbody.appendChild(tr)
       })
    </script>
</body>
</html>

js行内书写

<!-- 
    行内式
-直接把代码书写在标签身上
a 标签 - 书写在 href 属性上
<a href="javascript：JS代码;">点我一下</a>
非 a标签-书写在行为属性上
<div onclick="alert('hello world'）">点我一下</div>

外链式
-把代码书写在一个.js文件内
外链式JS代码，不需要依赖任何行为，打开页面就会执行
使用 script 标签的src属性引入指定 JS 文件

 -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
     <a href="javascript:alert('hello world')">点我一下</a>
    <div onclick="alert('hello world')">点我</div>
 </body>
 </html>

js冒泡案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 创建一个数组
        var arr = [9, 7, 3, 5, 1, 4, 8, 2, 6]
        for (var j = 0; j < arr.length-1; j++){
            // arr.length-1-j 已经比较了的，放在最后就已经不不要再比较了，
            // 因此最后一步只需要比较第一位和第二位，比较是越来越少的。
            for (var i = 0; i < arr.length-1-j; i++){
                // 判断 前后数字大小，如果前面的大于后面的则交换位置。
                if(arr[i] > arr[i + 1]){
                // 创建一个临时变量
                var temp = arr[i]
                // 前后两位交换位置
                arr[i] = arr[i + 1]
                arr[i + 1] = temp
                }
            }
        }
        console.log(arr)
    </script>
</head>
<body>
    
</body>
</html>

js条件分支语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var money = 0
        //满足哪一个if的条件，就执行哪一个条件后面的{}
        //前面的如果满足了，就不去考虑后面的内容了
        //当所有条件都不满足的时候，就会执行 else 后面的{}
        if (money >= 100){console.log('大于100')}
        else if (money >= 50){console.log('小于100大于50')}
        else{console.log('小于50')}

    </script>
</head>
<body>
    <div>
        <img src="./img/if.png" alt="if 条件分支语句总结">
    </div>
</body>
</html>

js网页倒计时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <input type="datetime-local">
    </div>
    <div id="times"></div>
    <script>
        var end = document.querySelector('input')
        function _fresh() {
            var endtime = new Date(end.value);
            var nowtime = new Date();
            var leftsecond = parseInt((endtime.getTime()-nowtime.getTime()) / 1000);
            __d = parseInt(leftsecond / 3600 / 24);
            __h = parseInt((leftsecond / 3600) % 24);
            __m = parseInt((leftsecond / 60) % 60);
            __s = parseInt(leftsecond % 60);
            document.getElementById("times").innerHTML = "" + __d + "天 " + "" + __h + "" + "小时 " + "" + __m + "" + "分 " + "" + __s + "" + "秒";
            if (leftsecond <= 0) {
                document.getElementById("times").innerHTML = "活动已结束";
                clearInterval(sh);
            }
        }

    var sh;
    sh = setInterval(_fresh, 1000);
    </script>
</body>
</html>

js选项卡案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 重置样式 */
        *{margin: 0;padding: 0;}
        ul , ol{list-style: none;}

        .box{width: 800px;height: 400px;
            display: flex;flex-direction: column; 
            /*flex-direction: column; 主轴为垂直方向 */}

        .box ul{height: 60px;display: flex;}
        .box ul li{font-size: 24px;background-color: rgb(64, 46, 85);color: white;
            flex: 1;display: flex;justify-content: center;align-items: center;
            cursor: pointer;}
        .box ul li.active{background-color: orange;}

        .box ol{flex: 1;position: relative;}
        .box ol li{width: 100%;height: 100%;font-size: 48px;background-color: orchid;color: white;
        display: flex;justify-content: center;align-items: center;
    position: absolute;left: 0;top: 0;display: none;}
    .box ol li.active{display: flex;}

    img{width: 800px;height: 340px;}
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ol>
            <li class="active"><img src="./img/32.png" alt=""></li>
            <li><img src="./img/33.png" alt=""></li>
            <li><img src="./img/31.png" alt=""></li>
        </ol>
    </div>
    <script>
        // 每个 按钮盒子 绑定一个点击事件
        // 获取 按钮盒子元素
        var btns = document.querySelectorAll('ul>li')
        // 获取 内容盒子元素
        var conts = document.querySelectorAll('ol>li')
        // 给每个按钮添加绑定点击事件
        btns.forEach(function( item, index){
            item.onclick = function(){
                // 所有按钮盒子取消高亮状态 取消类名 active
                btns.forEach(function(t, i){
                    t.className = ''
                    // 所有内容盒子隐藏
                    conts[i].className = ''
                })
                // 当前点击的按钮和索引对应的盒子添加 active 类名
                item.className = 'active'
                conts[index].className = 'active'
            }
        })
    </script>
</body>
</html>

js选择排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 创建一个数组
        var arr = [9, 3, 5, 2, 7, 1, 4, 6, 8]
        for (var j = 0; j < arr.length-1; j++){
        // 逐个比较，把最小数字 1 的索引 5 替换成 0
        // 假设 原来数组的最小数字索引为 0
            var min_index = j;
            // 与数组后面的数字进行逐个比较
            for (var i = j+1; i < arr.length; i++){
                // 判断是不是比我假设索引位置的数字小
                if (arr[i] < arr[min_index]){
                // 如果条件为 True 则替换 min_index
                    min_index = i
                }
                // 先得到最小数字的索引。
            }
            // 交换索引 0 位置和 minindex 位置
            var temp = arr[j]
            arr[j] = arr[min_index]
            arr[min_index] = temp

            console.log(arr)
        }
    </script>
</head>
<body>
    
</body>
</html>

js运算符

<!-- 
    算数运算符
    赋值运算符
    比较运算符
    逻辑运算符
    自增自减运算符

 -->

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <script>
         console.log(10 == '10')
         console.log(10 === '10')
         var n = 5;
         n--;
         console.log(n)  //4
         --n;
         console.log(n)  //3b
         var num = 10
         --num; 
         console.log(num) //9
         var num2 = 20
         num2--
         console.log(num2) //19

         var a = 5
         console.log(1 + ++a) //7
         console.log(a) //6
         // 先执行++ ， 1+6=7
         // 即是 先算++a 等于6，再算1+6=7

         var b = 5
         console.log(1 + b++)//6
         console.log(b) //6
         // 后执行++ ，1+5=6
         // 即是 先算1+b=6

         c = 6
         console.log(c++) //6
     </script>
 </head>
 <body>
     <h3> 算数运算符</h3>
     <section>
         <img src="./img/ssysf.png" alt="算数运算符">
     </section>
     <h3>赋值运算符</h3>
     <section>
         <img src="./img/fzysf.png" alt="赋值运算符">
     </section>
     <h3>比较运算符</h3>
     <section>
         <img src="./img/bjysf.png" alt="比较运算符">
         <p> == 只比较值是不是相等，不考虑数据类型 </p>
         <p> === 既比较值是不是相等，又要考虑数据类型 </p>
     </section>
     <h3>总结</h3>
     <section>
         <img src="./img/ysfzj.png" alt="">
     </section>
 </body>
 </html>

Drizzlejj

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js 基础学习笔记

js for 循环js join方法js switch条件语句js while 循环js 递归函数js 定时器js 对象数据类型js 构造函数js 构造函数的不合理js 构造函数的使用js 回答问题循环案例js 轮播图案例js 面向对象选项卡js 时间常用方法js 时间常用方法案例js 实现全选案例js 事件下事件传播和阻止js 鼠标跟随案
复制链接

扫一扫