JavaScript_Day_10(验证码、定时器、倒计时)

我喜欢大太阳

于 2021-12-17 19:57:45 发布

阅读量975

点赞数 1

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/m0_64954239/article/details/122003558

版权

对象两种创建方式：


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


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

对象的遍历：

for(var key in obj) key字符串

* 对象属于引用数据类型

数组和对象的比较：

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

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

多维数组的深复制：

   <script>

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

    </script>

字符串：

字符串创建方式2种：角标和长度；

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

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

角标和长度

        console.log(str.length);
        console.log(str[0]);

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

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

        str += 'w';
        
        console.log(str);

字符串的方法：

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

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

* lastIndexOf

* concat 字符串拼接

* slice

charAt() 访问角标对应的值

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

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

substring (i , i)

substr (i , 数量)

trim() 去掉首尾的空格

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

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

toUpperCase() 大写

toLowerCase() 小写

    <script>

        var str = 'hello' ;
        console.log(str.includes('o'));
        console.log(str.indexOf('lo'));
        var str2 = ' world' ;
        console.log(str.concat(str2));

        console.log(str[0]);
        console.log(str.charAt(0));
        console.log(str.charCodeAt(0));

        console.log(String.fromCharCode(97));

        console.log(str.slice(0,2));


        console.log(str.substring(1,2));
        console.log(str.substr(1,2));


        var str = '     fvg   3ff l  ' ;
        console.log(str);


        console.log(str.trim());


        var str = 'day day up' ;
        var arr = str.split(' ') ;
        console.log(arr);

        var str = 'hello' ;
        console.log(str.split(''));


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

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


        var str = 'heLLo' ;

        var str2 = 'HELLO' ;

        // 不分大小写  都转为大写或者小写再做比较
        if(str.toLowerCase() === str2.toLowerCase()) {
            alert(666)
        }
        

    </script>

随机验证码代码：

<body>
    <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 + '') ;
        }
        console.log(numArr);
        var smallArr = [] ;
        for(var i = 97 ; i <= 122 ; i++) {
            smallArr.push(String.fromCharCode(i))
        }
        console.log(smallArr);
        var bigArr = [] ;
        for(var i = 65 ; i <= 90 ; i++) {
            bigArr.push(String.fromCharCode(i))
        }
        console.log(bigArr);
        var allArr = numArr.concat(smallArr , bigArr) ;
        console.log(allArr);


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

        // console.log(rand(100 ,10));


        function randCode(n) {  
            n = n || 4 ;

            var res = '' ;

            res += numArr[rand(numArr.length)] ;

            res += smallArr[rand(smallArr.length)] ;

            res += bigArr[rand(bigArr.length)] ;

            for(var i = 0 ; i < n - 3 ; i++) {
                res += allArr[rand(allArr.length)] ;
            }

            console.log(res);

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

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

            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);
            return res
        }

        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>
    
</body>

注册验证：

<body>

    <p>
        请输入用户名：
        <input type="text" id="user">
        <span id="userSpan">用户名在3-6个字符，且只能是数字，字母组成，数字不能开头</span>
    </p>
    <p>
        请输入密码：
        <input type="password" id="pwd">
        <span id="pwdSpan">密码在3-6个字符，且只能是数字，字母组成(密码强度验证)</span>
    </p>
    <p>
        请输入验证码：
        <input type="password" id="code">
        <span id="codeSpan">验证码</span>
    </p>

    <button id="btn">注册</button>


    <script src="../js/tools.js"></script>
    <script>

        // 那对象
        var oUser = get('user') ;
        var oUserSpan = get('userSpan') ;
        var oBtn = get('btn') ;

        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))
        }
        var bigArr = [] ;
        for(var i = 65 ; i <= 90 ; i++) {
            bigArr.push(String.fromCharCode(i))
        }
        var allArr = numArr.concat(smallArr , bigArr) ;


        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 = '长度不对'
                oUserSpan.style.color = 'red'
                return
            }
            // 数字不能开头
            //  判断是不是数字
            //    >=0  <= 9
            //    !isNaN()
            //    numArr.includes()
            if(numArr.includes(username.charAt(0))) {
                oUserSpan.innerHTML = '数字不能开头'
                oUserSpan.style.color = 'red'
                return
            }

            // 不能有非法字符  
            // 遍历用户名
            for(var i = 0 ; i < username.length ; i++) {
                // 只要有一个不在allArr里面，就非法
                if(!allArr.includes(username[i])) {
                    oUserSpan.innerHTML = '用户名只能是数字或者字母'
                    oUserSpan.style.color = 'red'
                    return
                }
            }

            oUserSpan.innerHTML = '√'
            oUserSpan.style.color = 'green'

        }


    </script>
    
</body>



 function rand(max , min) {  
    min = min || 0 ;
    return parseInt(Math.random() * (max - min) + min)
}


function get(id) {  
    return document.getElementById(id)
}

注册验证：

<body>

    <p>
        请输入用户名：
        <input type="text" id="user">
        <span id="userSpan">用户名在3-6个字符，且只能是数字，字母组成，数字不能开头</span>
    </p>
    <p>
        请输入密码：
        <input type="password" id="pwd">
        <span id="pwdSpan">密码在3-6个字符，且只能是数字，字母组成(密码强度验证)</span>
    </p>
    <p>
        请输入验证码：
        <input type="password" id="code">
        <span id="codeSpan">验证码</span>
    </p>

    <button id="btn">注册</button>


    <script src="../js/tools.js"></script>
    <script>

        // 那对象
        var oUser = get('user') ;
        var oUserSpan = get('userSpan') ;
        var oBtn = get('btn') ;

        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))
        }
        var bigArr = [] ;
        for(var i = 65 ; i <= 90 ; i++) {
            bigArr.push(String.fromCharCode(i))
        }
        var allArr = numArr.concat(smallArr , bigArr) ;


        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 = '长度不对'
                oUserSpan.style.color = 'red'
                return
            }
            // 数字不能开头
            //  判断是不是数字
            //    >=0  <= 9
            //    !isNaN()
            //    numArr.includes()
            if(numArr.includes(username.charAt(0))) {
                oUserSpan.innerHTML = '数字不能开头'
                oUserSpan.style.color = 'red'
                return
            }

            // 不能有非法字符  
            // 遍历用户名
            for(var i = 0 ; i < username.length ; i++) {
                // 只要有一个不在allArr里面，就非法
                if(!allArr.includes(username[i])) {
                    oUserSpan.innerHTML = '用户名只能是数字或者字母'
                    oUserSpan.style.color = 'red'
                    return
                }
            }

            oUserSpan.innerHTML = '√'
            oUserSpan.style.color = 'green'

        }


    </script>

切割地址：

    <body>

        <form action="" method="get">
            <input type="text" name="username">
            <input type="password" name="password">
            <input type="text" name="email">
            <button type="submit">注册</button>
        </form>


        <script>

            var url = 'file:///C:/Users/1/Desktop/wh2114%E4%BA%8C%E9%98%B6%E6%AE%B5/day10/%E8%AF%BE%E5%A0%82%E4%BB%A3%E7%A0%81/html/07%E5%88%87%E5%89%B2%E5%9C%B0%E5%9D%80%E6%A0%8F.html?username=yy&password=123&email=23%40qq.com' ;

            // [
            //     ['username' , 'yy'],
            //     ['password' , '123'],
            //     ['email' , '23@qq.com']
            // ]

            // var arr = url.split('?') ;
            // console.log(arr);
            // var str = arr[1] ;  // 'username=yy&password=123&email=23%40qq.com'
            // var arr = str.split('&') ;
            // console.log(arr);  // ['username=yy', 'password=123', 'email=23%40qq.com']

            // // 遍历数组
            // var res = [] ;
            // for(var i = 0 ; i < arr.length ; i++) {
            //     var list = arr[i].split('=');
            //     console.log(list);
            //     res.push(list)
            // }
            // console.log(res);



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

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

            // [
            //     {username : 'yy'},
            //     {password : '123'},
            //     {email : '23@qq.com'}
            // ]

            console.log(arr);   //  ['username=yy', 'password=123', 'email=23%40qq.com']

            var res = arr.map(function (v) {  
                
                // return ({
                //     此处语法报错，因为键名必须是字符串(字符串中不能有非法字符)，不能是变量
                //     v.split('=')[0] : v.split('=')[1] 
                // })

                var obj = {} ;
                var list = v.split('=') ;
                obj[list[0]] = list[1] ;
                return obj
            })

            console.log(res);


        </script>
    
</body>

过滤数据：

<body>

    <script>


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

        // 找到包含h的

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


        var data = [
            {
                img : 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6d0a3e7acc3e91e2cfd83dbbe1d1c029.jpg?thumb=1&w=400&h=400&f=webp&q=90' ,
                title : '小米11' ,
                content : '轻薄5G,内外兼修' ,
                price : 1999
            },
            {
                img : 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6d0a3e7acc3e91e2cfd83dbbe1d1c029.jpg?thumb=1&w=400&h=400&f=webp&q=90' ,
                title : '小米青春版2' ,
                content : '轻薄5G,内外兼修2' ,
                price : 1299
            },
            {
                img : 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6d0a3e7acc3e91e2cfd83dbbe1d1c029.jpg?thumb=1&w=400&h=400&f=webp&q=90' ,
                title : '小米家庭11' ,
                content : '轻薄5G,内外兼修' ,
                price : 1999
            }
        ]


        var res2 = data.filter(function (v) {  
            return v.title.includes('11')
        })

        console.log(res2);

    </script>
    
</body>

日期对象：

日期对象：记录时间

在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);

        var date3 = new Date(1000) ;
        console.log(date3);

        var date4 = new Date(2020,13,1,1,1,1) ;
        console.log(date4);

        var date5 = new Date('2021-1-1 1:1:1') ;
        console.log(date5);


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

获取具体时间：

相关单词:

Jan uary

Feb ruary

Mar ch

Apr il

May

Jun e

Jul y

Aug ust

Sep tember

Oct ober

Nov ember

Dec ember

week

Mon day

Tue sday

Wed nesday

Thu rsday

Fri day

Sat urday

Sun day

var date = formatDate()

document.write(date)

var date = new Date() ;

var year = date.getFullYear() ;

console.log(year);

// 月份是从0开始的

var month = date.getMonth() + 1;

console.log(month);

var day = date.getDate() ;

console.log(day);

// 星期也是从0开始，星期天0 0-6

var week = date.getDay() ;

console.log(week);

var hour = date.getHours() ;

console.log(hour);

var minute = date.getMinutes() ;

console.log(minute);

var second = date.getSeconds() ;

console.log(second);

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

document.write(year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second + ' ' + arr[week] )

星期五

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

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

            var year = date.getFullYear() ;

            // 月份是从0开始的
            var month = date.getMonth() + 1;

            var day = date.getDate() ;

            // 星期也是从0开始 ，星期天0  0-6
            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] 


        }

上个月的天数：

    <script>

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

    </script>

设置时间：

    <script>

        var date = new Date() ;
        date.setFullYear(2020) ;
        // 时间可以自动计算
        date.setMonth(12)
        date.setDate(10)
        date.setHours(10)
        date.setMinutes(10)
        date.setSeconds(1000)

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

        console.log(date);

    </script>

本月的天数：

    <script>

        // var date = new Date() ;
        // date.setMonth(date.getMonth() + 1) ;
        // console.log(date);
        // date.setDate(0) ;
        // console.log(date);
        
        var date = new Date('2021-1-31') ;
        // date.setMonth(date.getMonth() + 1) ;  // 2021-3-3
        // console.log(date);


        // 把日期推到下个月   32-58
        date.setDate(33) ;  // 2021-1-33   2021-2-2

        // 把日期推到第0天，也就是上个月的最后一天
        date.setDate(0) ;
        console.log(date);

       
    </script>

定时器：

定时器：重复的闹钟

每隔一段时间，做一件

延时器：一次性闹钟

一段时间之后，做一件

setInterval(fn , time

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

注意：

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

同步和异步

一遍敲代码，一边听歌异步（同时干很多事情）

先烧水，再泡面同步（先干，再干，再干 --- 排队）

单线程和多线程

单线程：一次干一件事情

多线程：一次干很多事情

js一种单线程的语言

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

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++ ;
            // document.write('你在页面停留了' + count + 's')
            oH1.innerHTML = '你在页面停留了' + count + 's'
        },1000)
    </script>
    
</body>

走动的时间：

<body>

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

    <script>


        // 补零
        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() ;

            // 月份是从0开始的
            var month = date.getMonth() + 1;

            var day = date.getDate() ;

            // 星期也是从0开始 ，星期天0  0-6
            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] 


        }


    </script>
    
</body>

倒计时：

<body>

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

    <script>

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

        var tt = new Date('2021-12-17 18:7:0')
        showDate(tt)

        // var allSeconds ;

        function showDate(t) {  
            var future = new Date(t) ;
            var now = new Date() ;
            // 时间是可以相减的  --- 毫秒数
            var gap = future - now ;
            console.log(gap);
            allSeconds = parseInt(gap / 1000) ;
            console.log(allSeconds);
            
            if(allSeconds <= 0) {
                oTime.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) ;
            console.log(allSeconds);
            if(allSeconds <= 0) {
                console.log(666);
                clearInterval(t)
            }
        },1000)

    </script>
    
</body>

我喜欢大太阳

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript_Day_10(验证码、定时器、倒计时)

对象两种创建方式： var cat = new Object() ; cat.name = '猫'; cat.age = 2 ; cat.say = function () { console.log('喵'); } var cat = { // 键名：键值 name : '猫', age : 2 ,
复制链接

扫一扫