2021.12.17周五二阶段 day_10 js笔记

本文链接：https://blog.csdn.net/WyHHZKA/article/details/122031743

一、知识点回顾

1. 数组和对象的比较

数组存储同一类型的数据        有序性，存数据

对象存储不同类型的数据无序性，对一类事物的描述

2.对象属于引用数据类型

3.对象的深复制和浅复制

       4.对象的遍历 for(var key in obj) 其中key为字符串


        var cat = new Object() ; 
        cat.name = '猫';
        cat.age = 2 ;
        cat.say = function(){
            console.log('喵');
        } 

        var cat = {
            // 键名 ：键值
            name : '猫',
            age : 2 ,
            say :function(){
                console.log('喵');
            }
        }


        var obj = {
            0 : 1 ,
            1 : 2 ,
            2 : 3 ,
            名字 : '数组',
        }

        console.log(obj['名字']);

二、多维数组的深复制

思路为：遍历多维数组，直到每一个数据不为数组，则把它放入一个新的空数组中。


        var arr = [1,2,3,4,[5,6,[7,8]]];
        
        var arr2 = arr.slice();



        function deepArr(arr){
            var newArr = [];
            for(var i = 0 ; i < arr.length ; i++){
            // newArr.push(arr[i]) //这个arr[i]有可能还是一个数组
                if(Array.isArray(arr[i])){
                    // 继续遍历数组，还是得到一个数组
                    var list = deepArr(arr[i]);
                    // 再把得到的数组放入newArr
                    newArr.push(list)
                }
                else{
                    newArr.push(arr[i])
                }
            }
            return newArr
        }

        // console.log(deepArr([1,2,3,4,[5,6]]));

        var res = deepArr(arr);

        res[4].push('a');

        console.log(res);

        console.log(arr);

三、字符串

1.字符串创建方式2种

        var str = 'hello';  // string
        var str2 = new String('hello'); 
        console.log(typeof str2); // object

2.角标和长度

        var str = 'hello';  // string
        console.log(str.length);  // 5
        console.log(str[0]);      // h

3.字符串的长度和角标只能读取，不能改写

        // str[5] = 'w' ; // 无效

           var str = 'hello';  // string
           str += 'w';
           console.log(str); // hellow

四、字符串的方法

includes 判断字符中是否存在某个值

indexOf 判断字符串中是否存在某个值，存在就返回角标，不存在就返回-1

lastIndexOf 判断数组中是否存在某个值，返回最后一次出现的下标

concat 字符串拼接

slice 截取数组中的部分值，返回一个新的数组包前不包后

charAt(）访问角标对应的值

charCodeAt() 访问角标对应的值的ASCII值

String.fromCharCode() 把ASCII值转成对应的字符

substring(i,i) 截取（1,2）角标第二个到第三个

substr(i,数量) （2,2）第二个开始截2个

trim() 去掉首尾的字符

split() 把字符串切割成数组

replace(old,new) 替换（默认只会替换第一个）

toUpperCase() 大写

toLowerCase() 小写

var str = 'hello';
console.log(str.includes('o')); // true
console.log(str.indexOf('lo')); // 3

var str2 = 'world';
console.log(str.concat(str2));  // helloworld

console.log(str[0]); // h
console.log(str.charAt(0));  // h 访问角标对应的值
console.log(str.charCodeAt(0)); //104 访问角标对应的值的ASCII值

console.log(String.fromCharCode(97)); // a 把ASCII值转成对应的字符

console.log(str.slice(0,2)); // he 截取 包前不包后

console.log(str.substring(1,2)); // e  截取 第2到第三个 包前不包后
console.log(str.substr(1,2)); // el 截取 从第2开始，截2个

var str = '  fvg  3ff  l  ';
console.log(str.trim()); // fvg  3ff  l  去掉首尾空格

var str = 'day day up' ; 
var arr = str.split('');
console.log(arr);  // ['d', 'a', 'y', ' ', 'd', 'a', 'y', ' ', 'u', 'p'] 把字符串切割成数组

 var str = '卧槽,字符串这简单,卧槽';

 var res = str.replace('卧槽','**')

 document.write(res) //替换 有bug 只能替换一次  
 // **,字符串这简单,卧槽


 var str = 'hello' ;

 var str2 = 'HELLO';
        
 // 不分大小写 都转为大写或者小写再做比较
 if(str.toLowerCase() === str2.toLowerCase()){

          alert(666)
   }

五、随机验证码

思路：1.先写四个数组数字，小写，大写，all;

2.封装随机数封装get方法

3.封装随机验证码 function randCode(){}

3.1.获取第一位，第二位，第三位，剩下的几位（默认最小4位 n= n || 4）

3.2 打乱字符串的顺序 -> 把字符串转为数组 var res = res.split('');

3.3 交换顺序 ->遍历数组用for in 遍历

3.4 把数组转回字符串 res = arr.join('');

4.绑定点击事件 -> 验证码刷新效果

5.第一次打开时网页就有显示 get('code').innerHTML = randCode()

6.绑定点击事件 -> 验证码验证

6.1 获取输入框的值（value）获取验证码的值(inner.HTML)

6.2 if判断两值是否相等（验证码不分大小写）

相等 -> 验证通过

不相等 -> 验证码重新刷新输入框清空

验证失败

    <input type="text" id="inp">
    <span id="code">dwef</span>
    <span id="msg">验证码不分大小写</span>
    <br>
    <button id="btn">验证</button>

    <script>

        var numArr = [] ; 
        for(var i = 0 ; i < 10 ; i++){
            numArr.push(i + '');
        }

        var smallArr = [] ;
        for(var i = 97 ; i <= 122 ; i++){
            smallArr.push(String.fromCharCode(i))
            // 把ASCII码转成对应的字符
        }

        var bigArr = [];
        for(var i = 65 ; i <= 90 ; i++){
            bigArr.push(String.fromCharCode(i))
        }  // 把ASCII码转成对应的字符

        var allArr = numArr.concat(smallArr,bigArr);

        // 第一个参数是最大值，第二个参数是最小值，最小值默认是0
        function rand(max,min){
            min = min || 0 ;
            return parseInt(Math.random()*(max - min)+ min)
        }

        // 随机生成验证码
        function randCode(n){
            n = n || 4 ;

            var res = '' ;

            //第一位在数字数组里面取
            res += numArr[rand(numArr.length)];

            //第二位在小写字母里面取
            res += smallArr[rand(smallArr.length)];

            //第三位在大写字母里面取
            res += bigArr[rand(bigArr.length)];

            //剩下的在allArr数组里面取
            for(var i = 0 ; i < n -3 ; i++){
                res += allArr[rand(allArr.length)];
            }

            console.log(res);  //9mXn

            // 想打乱字符串的顺序  --- 字符串不能赋值

            // 把字符串转数组
            var arr = res.split('');

            // console.log(arr);
            //['9', 'm', 'X', 'n']

            // 遍历此数组
            for(var i in arr){
                // 交换位置
                var index = rand(arr.length);
                var t = arr[i];
                arr[i] = arr[index];
                arr[index] = t ;
            }

            // 把数组转回字符串
            res = arr.join('');
            // console.log(res);  Xmn9
            return res 
        }

        // 封装get方法获取元素
        function get(id){
            return document.getElementById(id)
        }

        //  显示验证码在页面的验证码上
        get('code').innerHTML = randCode()

        //绑定点击事件
        get('code').onclick = function(){
            get('code').innerHTML = randCode()
        }

        // 验证 
        get('btn').onclick = function(){
            //获取输入框的值
            var str = get('inp').value;
            //拿到显示的验证码
            var str2 = get('code').innerHTML;
            if(str.toLowerCase() === str2.toLowerCase()){
                get('msg').innerHTML = '验证通过';
                get('msg').style.color = 'green'
            }else{
                get('code').innerHTML = randCode()
                get('inp').value = '' // 刷新
                get('msg').innerHTML = '验证失败';
                get('msg').style.color = 'red'
            }
        }

    </script>

六、注册验证

思路：1. 封装rand get 验证码函数

2. 通过get方法拿到需要的对象例如：var oUser = get('user');

3. 创建四个数组

4. 绑定点击事件->验证码刷新

           5. 第一次打开时网页就有显示  get('code').innerHTML = randCode()

6. 绑定点击事件->验证

6.1 用户名验证

6.11 去掉首尾空格 var username = oUser.value.trim（）

6.12 判断为空

6.13 验证长度（长度必须在3-6位之内）

6.14 验证数字（不能以数字开头） if(numArr.includes(username.charAt(0)))

6.15 验证非法字符（不能包含非法字符）if(! allArr.includes(username[i])）

6.16 用户名验证成功   oUserSpan.innerHTML = '√'

6.2 密码验证

6.21 去掉首尾空格 var password = oPwd.value.trim()

6.22 判断为空

6.23 验证长度（长度必须在3-6位之内）

6.24 验证数字（不能以数字开头）if(numArr.includes(password.charAt(0)))

6.25 验证非法字符（不能包含非法字符）

6.26 强度验证纯数字，字母，则弱；字母结合数字，则强

6.27 密码验证成功 oPwdSpan.innerHTML = '√'

6.3 验证码验证

6.31 获取输入框的值获取验证码的值

6.32 判断两值是否相等（验证码不分大小写）

                                        相等 -> 验证通过

                不相等 -> 验证码重新刷新输入框清空

                  验证失败

7.用户名密码验证码三者全部成功，则注册成功

<script>
        //拿对象
        var oUser = get('user');
        var oUserSpan = get('userSpan')
        var oPwd = get('pwd')
        var oPwdSpan = get('pwdSpan')
        var oYzm = get('yzm')
        var oCode = get('code')
        var oMsg = get('msg')
        var oBtn = get('btn')
        var oStrong = get('strong')

        var numArr = [];
        for(var i= 0 ; i < 10 ; i++){
            numArr.push(i + '');
        }

        var smallArr = [];
        for(var i = 97 ; i <= 122 ; i++){
            smallArr.push(String.fromCharCode(i))
            //把ASCII码转为对应的字符
        }

        var bigArr = [];
        for(var i = 65 ; i <= 90 ; i++){
            bigArr.push(String.fromCharCode(i))
        } 

        var allArr = numArr.concat(smallArr,bigArr);

        oCode.innerHTML = randCode();

        //验证码刷新
        oCode.onclick = function(){
            oCode.innerHTML = randCode()
        }

        //验证
        oBtn.onclick = function(){
            // 首先验证用户名 -- 去掉首尾空格
            var username = oUser.value.trim();
            // 判断为空 
            if( username.length === 0){
                oUserSpan.innerHTML = '输入不能为空'
                oUserSpan.style.color = 'red'
                //直接结束函数`
                return
            }
            //验证长度
            if(username.length < 3 || username.length > 6){
                oUserSpan.innerHTML =  '长度应在3-6位之内'
                oUserSpan.style.color = 'red'
                return ;
            }
            //验证数字
            if(numArr.includes(username.charAt(0))){
                oUserSpan.innerHTML = '不能以数字开头'
                oUserSpan.style.color = 'red'
                return 
            }
            // 不能包括非法字符
            for(var i = 0 ; i < username.length ; i++){
                if(!allArr.includes(username[i])){
                    oUserSpan.innerHTML = '用户名只能是数字或者字母'
                    oUserSpan.style.color = 'red'
                    return
                }
            }
            oUserSpan.innerHTML = '√'
            oUserSpan.style.color = 'green'


            // 密码验证
            // 去掉首尾空格
            var password = oPwd.value.trim();
            // 判断为空 
            if(password.length === 0){
                oPwdSpan.innerHTML = '输入不能为空'
                oPwdSpan.style.color = 'red'
                return
            }
            // 验证长度
            if(password.length < 3 || password.length > 6){
                oPwdSpan.innerHTML = '长度必须在3-6位之内'
                oPwdSpan.style.color = 'red'
                return
            }
            // 验证数字 
            if(numArr.includes(password.charAt(0))){
                oPwdSpan.innerHTML = '不能以数字开头'
                oPwdSpan.style.color = 'red'
                return
            }
            // 不能包括非法字符
            for(var i = 0 ; i < password.length ; i++){
                if(!allArr.includes(password[i])){
                    oPwdSpan.innerHTML = '密码只能是数字或者字母'
                    oPwdSpan.style.color = 'red'
                    return
                }
            }
            //强度验证 
            // for(var i = 0 ; i < password.length;i++){
            //     if(!numArr.includes(password[i]) || !smallArr.includes(password[i]) || !bigArr.includes(password[i])){
            //     oStrong.innerHTML = '弱'
            //     oStrong.style.color = 'grey'
            //     }else{
            //         if(numArr.includes(password[i]) && smallArr.includes(password[i]) && bigArr.includes(password[i])){
            //         oStrong.innerHTML = '强'
            //         oStrong.style.color = 'goldenrod'
            //         }
            //     }
            // }
            for(var i = 0 ; i < password.length;i++){
                    if(numArr.includes(password[i]) && smallArr.includes(password[i]) && bigArr.includes(password[i])){
                    oStrong.innerHTML = '强'
                    oStrong.style.color = 'goldenrod'
                    }else{
                    oStrong.innerHTML = '弱'
                    oStrong.style.color = 'grey'
                }
            }
          
            oPwdSpan.innerHTML = '√'
            oPwdSpan.style.color = 'green'



            // 验证码 
            var str = oYzm.value;
            var str2 = oCode.innerHTML;
            if(str.toLowerCase() === str2.toLowerCase()){
                oMsg.innerHTML = '验证通过'
                oMsg.style.color = 'green'
            }else{
                oCode.innerHTML = randCode();
                oYzm.value = ''
                oMsg.innerHTML = '验证失败'
                oMsg.style.color = 'red'
            }
          

        }

七、切割地址栏

目的：想得到二维数组的格式

[

['username' , 'wy'],

['password','123456'],

['email','wuyi@qq.com']

]

思路：1.按问号切割 var arr= url.split('?');

2.第一步切割完为两个数组我们要得到第二个 var str = arr[1];

3.按&切割 var arr = str.split('&');

4.按=切割再用map函数实现二维数组

目的：想得到数组里是对象的格式

[

{'username' , 'wy'},

{'password','123456'},

{'email','wuyi@qq.com'}

]

思路：在上述基础上实现。

1. 声明一个空对象

2. 按=切割

3. 对象键名=键值

4. 把上述用map函数封装起来


 var url = 'file:///C:/Users/Administrator/Desktop/h5_2114/%E4%BA%8C%E9%98%B6%E6%AE%B5/day_10/%E4%BD%9C%E4%B8%9A-2.%E5%88%87%E5%89%B2%E5%9C%B0%E5%9D%80%E6%A0%8F.html?username=wuyi&password=123456&email=wuyi%40qq.com'

        //想得到
        //    [
        //        ['username' , 'wy'],
        //        ['password','123456'],
        //        ['email','wuyi@qq.com']
        //    ]

        var str = url.split('?')[1];
        var arr = str.split('&')
        console.log(arr);

        var res = arr.map(function(v){
            return v.split('=')
        })
        console.log(res);

        //想得到
        //    [
        //        {'username' , 'wy'},
        //        {'password','123456'},
        //        {'email','wuyi@qq.com'}
        //    ]

        var res = arr.map(function(v){
            var obj ={}
            var list = v.split('=')
            obj[list[0]] = list[1];
            return obj 
        } )
        console.log(res);

八、过滤数据

思路：用过滤器过滤 var res = arr.filter(function(v){})


        var arr = ['hello','hi','hei','hehe','xixi','pupu'];

        // 找到包含h的

        var res = arr.filter(function(v){
            return v.includes('h')
        })
        console.log(res);

       
        var data = [
        {
                img :"https://img.alicdn.com/bao/uploaded/i1/3951599478/O1CN01WX3jUn2JsyXfgVnxC_!!0-item_pic.jpg_468x468q75.jpg_.webp",
                title : '小猪猪1',
                content : '可爱小猪猪',
                price : 100
            },
            {
                img : "https://img.alicdn.com/bao/uploaded/i1/3951599478/O1CN01WX3jUn2JsyXfgVnxC_!!0-item_pic.jpg_468x468q75.jpg_.webp",
                title : '小猪猪2',
                content : '可爱小猪猪',
                price : 200
            },  
            {
                img : "https://img.alicdn.com/bao/uploaded/i1/3951599478/O1CN01WX3jUn2JsyXfgVnxC_!!0-item_pic.jpg_468x468q75.jpg_.webp",
                title : '小猪猪2',
                content : '可爱小猪猪',
                price : 300
            }
        ]


        var res2 = data.filter(function(v){
            return v.title.includes('1')
        })
        console.log(res2);

九、日期对象

         日期对象：记录时间

         区时

在js里面 1970.1.1 0:0:0 标准时间

日期对象的创建

        无参创建 --- 拿到的是当前电脑的当前时间

        数字单参创建，毫秒数 1s = 1000ms

          数字多参创建年月日时分秒

                注意：月份是从0开始，时间可以自动计算

字符串单参创建年[-*,]月[-*,]日时：分：秒

时间是正常的，也是不能自动计算的

        var date = new Date();
        console.log(date); // 得到电脑的当前时间

        var date2 = new Date(0);
        console.log(date2); // Thu Jan 01 1970 08:00:00 GMT+0800 (中国标准时间)

        var date3 = new Date(1000);
        console.log(date3); // Thu Jan 01 1970 08:00:01 GMT+0800 (中国标准时间)

        var date4 = new Date(2020,13,1,1,1,1);
        console.log(date4); //Mon Feb 01 2021 01:01:01 GMT+0800 (中国标准时间) 13月就是2月

        var date5 = new  Date('2021-1-1 1:1:1');
        console.log(date5); // Fri Jan 01 2021 01:01:01 GMT+0800 (中国标准时间)

        var date6 = new Date(date2);
        console.log(date6); // date6 === date2

十、上个月的天数

        var date = new Date();
        // 本月的第0天也就是上个月的最后一天
        date.setDate(0);    //上个月的最后一天
        console.log(date);

十一、获取具体的日期

        function formatDate() {

            var date = new Date() ; 

            var year = date.getFullYear();

            var month = date.getMonth() +1 ;

            var day = date.getDate();

            var week = date.getDay();

            var hour = date.getHours();

            var minute = date.getMinutes();

            var second = date.getSeconds();

            var arr = ['星期天' , '星期一' ,'星期二' ,'星期三' ,'星期四' ,'星期五' ,'星期六'] ;

            return year + '-' + month + '-'  + day + ' '  + hour  + ':' + minute + ':' + second + ' ' + arr[week] 
            
        }

        var date = formatDate()
        document.write(date);

十二、设置时间


        var date = new Date() ; 

        date.setFullYear(2020); // 2020年
        // 时间可以自动计算 

        date.setMonth(12)   // 1月

        date.setDate(10)    // 10日

        date.setHours(10)   // 10点

        date.setMinutes(10) // 10分

        date.setSeconds(1000) // 1000秒

        // date.setDay(4);  err 星期不能设置

        console.log(date);

十三、本月的天数

   function currentMonth(){

            var date = new Date();
            date.setMonth(date.getMonth());
           // date.setMonth(12)   // 1月
           // date.getMonth(11)   // 12月
            console.log(date);
            return date 
        }

        var res = currentMonth()
        document.write(res)

十四、定时器

定时器：重复的闹钟

每隔一段时间，做一件事

延时器：一次性闹钟

一段时间之后，做一件事

setInterval(fn , time)

用变量存储定时器的时候,变量存储的是页面当中的第几个定时器

注意：

定时器是异步的(等所有的同步代码执行完毕之后才会执行)

同步和异步

一边敲代码,一边听歌异步 (同时干很多事情)

先烧水，再泡面同步 (先干，再干，再干 --- 排队)

单线程和多线程

单线程：一次干一件事情

多线程：一次干很多事情

js一种单线程的语言

js主要是进行标签操作(无法一边修改标签，一边删除标签)

js代码执行顺序

1 先在主线程上执行同步代码 ,遇到异步, 就放在任务队列中

2 所有的同步执行完毕以后,如果任务队列中有已经到时间了,可以执行了,(这个任务就可以在主线程上执行)

    var t = setInterval(function(){
            console.log(666);
        },0)

        var t2 = setInterval(function(){
            console.log(777);
        },2000)

        document.onclick = function(){
            console.log(999);
        }

        console.log(1);
        console.log(2);

十五、页面停留时间

<body>
    <h1 id="time"></h1>

    <script>
        var oH1 = document.getElementById('time');
        var count = 0 ;

        oH1.innerHTML = '你在页面停留了'  + count + 's'

        setInterval(function(){
            count++ ;
            oH1.innerHTML = '你在页面停留了' + count + 's'

        },1000)

    </script>
</body>

效果图如下：

十六、走动的时间

思路：用定时器效果实现。

通过日期函数获取当前年月日分秒时等信息。

细节处理：在分秒时个位的时候，通过字符串拼接的方法，在前一位补0 例如9为09

把week通过数组转为星期*

        // 补零

        var oH1 = document.getElementById('time');

        var res = formatDate();

        oH1.innerHTML = res;

        setInterval(function(){
            var res = formatDate();
            oH1.innerHTML = res; 
        },1000)


        function formatDate(){
            var date = new Date();

            var year = date.getFullYear();

            var month = date.getMonth() + 1;

            var day = date.getDate();

            var week = date.getDay();

            var hour = date.getHours();

            var minute = date.getMinutes();

            var second = date.getSeconds();
            if(hour < 10 && hour >= 0){
                hour = '0'+ hour 
            }
            if(minute < 10 && minute >= 0){
                minute = '0'+ minute 
            }
            if(second < 10 && second >= 0){
                second = '0'+ second 
            }

            var arr = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];

            return year + '-' + month + '-' + day +' ' + hour + ':' + minute + ':' + second + '  '  + arr[week]
        }

十七、倒计时

思路：1. get方法获取元素 oTime , oH1

2. 声明一个未来时间（想要倒计时的时间比如明天）

3. 开始封装函数

3.1 var gap = 未来时间-现在时间

3.2 相减得到的gap为毫秒因此需要转换

3.21 allSeconds = parseInt(gap/1000)

3.22 时分秒转换 var h = parseInt(allSeconds / 3600）

var m = parseInt(allSeconds % 3600 / 60)

var s = allSeconds % 60

3.3 if判断，allSeconds若小于等于0，则过期

3.4 输出  oTime.innerHTML = h + ':' + m + ':' + s;

4. 开始写计时器 var t = setInterval(function(){ }，1000)

4.1 先执行函数  showDate(tt)

4.2 计时器时间若小于0，则清空计时器。

                         if(allSeconds <= 0){

                        clearInterval(t)

                          }

<body>

    <h1 id="h1">距离下课还有<span id="time"></span></h1>

    <script>

        var oTime = document.getElementById('time');

        var oH1 = document.getElementById('h1');

        var tt = new Date('2021-12-20 0:49:0')

        showDate(tt)

        function showDate(tt){
            var future = new Date(tt);
            var now = new Date();
            // 时间可以相减   --- 得到的是毫秒数
            var gap = future - now;
            allSeconds = parseInt(gap/1000) 
            //把allSeconds声明为全局变量
            console.log(allSeconds);

            if(allSeconds <= 0){
                oH1.innerHTML = '时间已经过期了'
                return
            }

            var h = parseInt(allSeconds / 3600)
            var m = parseInt(allSeconds % 3600 / 60)
            var s = allSeconds % 60 ;

            oTime.innerHTML = h + ':' + m + ':' + s;
        }

            // setInterval的第三个包括后面的参数都是给第一个函数的参数
            // var t = setInterval(showDate,1000,tt)


            var t = setInterval(function(){
                showDate(tt)
                if(allSeconds <= 0){
                    clearInterval(t)
                }
            },1000) 

    </script>

</body>