JavaScript_Day11(注册验证、弹窗广告、日历)

我喜欢大太阳

于 2021-12-20 19:04:44 发布

阅读量965

点赞数 1

文章标签： javascript

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

版权

注册验证

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



        function tips(obj , msg , color) {  
            obj.innerHTML = msg ;
            obj.style.color = color ;
        }

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


        oBtn.onclick = function () {  
            // 验证用户名  -- 去掉首尾空格    
            var username = oUser.value.trim() ;
            // 为空
            if(username === '') {
                tips(oUserSpan , '输入不能为空' , 'red') ;
                return 
            }
            // 长度
            if(username.length < 3 || username.length > 6) {
                tips(oUserSpan , '长度必须早3-6之间' , 'red') ;
                return 
            }
             // 数字开头  -- 判断第一个字符是不是数字
            //  if(username[0] <= 9 && username[0] >= 0) {
            // includes 都是严格判断(数据类型也必须是一样的)
            if(numArr.includes(username[0])) {
            // if(!isNaN(username[0])){
                tips(oUserSpan , '不能用数字开头' , 'red') ;
                return 
            }
            // 必须是字母，数字组成
            for(var i in username) {
                if(!allArr.includes(username[0])) {
                    tips(oUserSpan , '用户名只能是字母和数字' , 'red') ;
                    return 
                }
            }

            // 密码的验证
            var password = get('pwd').value.trim() ;
            var oPwdSpan = get('pwdSpan') ;

            var count1 = 0 ;   // 数字
            var count2 = 0 ;  // 小写
            var count3 = 0 ;  // 大写
            // for(var i in password) {
            //     if(numArr.includes(password[i])) {
            //         count1 = 1 ;
            //         break ;
            //     }
            // }
            // for(var i in password) {
            //     if(smallArr.includes(password[i])) {
            //         count2 = 1 ;
            //         break ;
            //     }
            // }
            // for(var i in password) {
            //     if(bigArr.includes(password[i])) {
            //         count3 = 1 ;
            //         break ;
            //     }
            // }
            for(var i in password) {
                // 如果有数字就标记为1
                if(numArr.includes(password[i])) {
                    count1 = 1 ;
                }
                // 如果有小写就标记为1
                if(smallArr.includes(password[i])) {
                    count2 = 1 ;
                }
                // 如果有大写就标记为1
                if(bigArr.includes(password[i])) {
                    count3 = 1 ;
                }
            }
            var count = count1 + count2 + count3 ;
            if(count === 1) {
                tips(oPwdSpan , '弱' , 'red')
            }
            if(count === 2) {
                tips(oPwdSpan , '中' , 'yellow')
            }
            if(count === 3) {
                tips(oPwdSpan , '强' , 'green')
            }
        }


    </script>
    
</body>

定时器

语法 : setInterval(fn , time)

变量存储的是一个数字（页面当中的第几个定时器）

清除定时器 clearInterval(第几个定时器)

    <script>
   
        var t = setInterval(function () {  
            console.log(666);
        } , 1000)
        console.log(1);

        clearInterval(t)

    </script>

倒计时

<body>

    <h1 id="h"></h1>

    <script>
        var oH1 = document.getElementById('h') ;

        var count = 10 ;
        oH1.innerHTML = count + 's' ;
        var t = setInterval(function () {  
            // count-- ;
            oH1.innerHTML = --count + 's' ;
            if(count === 0) {
                clearInterval(t)
            }
        },1000)

    </script>
    
</body>

按钮计时器

<body>

    <button id="btn">开始</button>
    <button id="pause" disabled>暂停</button>
    <button id="end" disabled>结束</button>
    <span id="span">0</span>


    <script>

        var oBtn = document.getElementById('btn') ;
        var oSpan = document.getElementById('span') ;
        var oPause = document.getElementById('pause') ;
        var oEnd = document.getElementById('end') ;


        // 每次点击的时候都会重新调用这个函数

        // oBtn.onclick = function () {  

        //     // var t ;


        //     if(oBtn.innerHTML === '开始') {
        //         oBtn.innerHTML = '暂停'
        //         // 声明的这个t是一个局部变量
        //         var t = setInterval(function () {  
        //             oSpan.innerHTML++ ;
        //         },1000)
        //     }
        //     else {
        //        // 定时器没有被清除
        //        console.log(t);  // undefined
        //        clearInterval(t) 
        //        oBtn.innerHTML = '开始'
        //     }
            
        // }

        // 存储定时器的变量必须在点击事件外面声明 -> 也就是说他必须是一个全局变量




        // var t ;

        // oBtn.onclick = function () {  



        //     if(oBtn.innerHTML === '开始') {
        //         oBtn.innerHTML = '暂停'
        //         // 声明的这个t是一个局部变量
        //         t = setInterval(function () {  
        //             oSpan.innerHTML++ ;
        //         },1000)
        //     }
        //     else {
        //     // 定时器没有被清除
        //     console.log(t);  // undefined
        //     clearInterval(t) 
        //     oBtn.innerHTML = '开始'
        //     }

        // }


        // var t ;
        // oBtn.onclick = function () {  
        //     // 每次点击的时候，都清除上一个定时器
        //     clearInterval(t)
        //     t = setInterval(function () {  
        //         oSpan.innerHTML++ ;
        //     },1000)
        // }

        var t ;
        oBtn.onclick = function () {  
            oBtn.disabled = true ;
            oPause.disabled = false ;
            oEnd.disabled = false ;
            t = setInterval(function () {  
                oSpan.innerHTML++ ;
            },1000)
        }

        oPause.onclick = function () {  
            clearInterval(t)
            oPause.disabled = true ;
            oBtn.disabled = false ;
        }


        oEnd.onclick = function () {  
            clearInterval(t)
            oSpan.innerHTML = 0 ;
            oEnd.disabled = true ;
            oBtn.disabled = false ;
            oPause.disabled = true ;
        }


        // var n ;

        // function fn() {  
        //     n = 5 ;
        // }


        // console.log(n);  // undefined


        // fn()


        // console.log(n);  // 5

    </script>
    
</body>

小广告

<!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>
        .ad{
            width: 300px;
            height: 200px;
            background-color: #ddd;
            position: fixed;
            right: 0;
            bottom: 0;
        }
        #close{
            float: right;
            width: 24px;
            height: 24px;
            background-color: #000;
            color: #fff;
            text-align: center;
            line-height: 24px;
            cursor: pointer;
        }
    </style>
</head>
<body>


    <div class="ad" id="ad">
        <span id="close">X</span>
        <p>
            <span id="time">10</span>
            <span>s之后自动关闭广告</span>
        </p>
    </div>

    <script>

        var oAd  = document.getElementById('ad') ;
        var oTime  = document.getElementById('time') ;
        var oClose  = document.getElementById('close') ;

        // 10s倒计时
        var t = setInterval(function () {  
            oTime.innerHTML-- ;
            if(oTime.innerHTML < 0) {
                oAd.style.display = 'none' ;
                // 倒计时结束之后清除定时器
                clearInterval(t);
            }
        },500)

        // 点X关闭
        oClose.onclick = function () {  
            oAd.style.display = 'none' ;
            clearInterval(t);
        }


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

延时器

定时器：重复的闹钟；

延时器：一次性的闹钟；

setTimeout(fn , time)

变量存储的是第几个闹钟(不分定时器和延时器)

*setTimeout 也是异步

clearInterval 可以清除定时器，也可以清除延时器；

clearTimeout 可以清除延时器，也可以清除定时器；


    <script>

        var t1 = setInterval(function () {  
            console.log(777);
        },1000)

        var t2 = setTimeout(function () {  
            console.log(666);
        },0)

        console.log(t1 , t2);

        // clearInterval(t1)

        clearTimeout(t2)

        // clearTimeout(t1)

        // clearInterval(t2)

    </script>

关于延时异步

异步：

在点击事件里面，绑定是同步的，事件处理函数是异步的；

在定时器里面，要做的事情是异步的；

<body>

    <h1 id="h">点我</h1>

    <script>

        var t = setTimeout(function () {  },1000)

        clearInterval(t)


        var oH1 = document.getElementById('h');
        oH1.onclick = function () {  
            console.log(666);
        }

    </script>
    
</body>

延时器改定时器

延时器：只会执行一次

    <script>

        
        // setTimeout(function () {  
        //     console.log(666);
        // } , 1000)

        // 死递归：短时间内内存溢出(递归一定要有结束的条件)


        // 每隔1s调用一次函数

        function fn() {  
            setTimeout(function () {  
                console.log(666);
                fn()
            } , 1000)
        }

        fn()

    </script>

流氓小广告

<!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>
        .ad{
            width: 300px;
            height: 200px;
            background-color: #ddd;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            display: none;
        }
        #close{
            float: right;
            width: 24px;
            height: 24px;
            background-color: #000;
            color: #fff;
            text-align: center;
            line-height: 24px;
            cursor: pointer;
        }
    </style>
</head>
<body>


    <div class="ad" id="ad">
        <span id="close">X</span>
        <p>
            <span id="time">10</span>
            <span>s之后自动关闭广告</span>
        </p>
    </div>

    <script>

        var oAd  = document.getElementById('ad') ;
        var oTime  = document.getElementById('time') ;
        var oClose  = document.getElementById('close') ;

        showAd()

        function showAd() {  
            // 3s之后弹出小广告
            setTimeout(function () {  
                oAd.style.display = 'block'
                // 10s倒计时
                var t = setInterval(function () {  
                    oTime.innerHTML-- ;
                    if(oTime.innerHTML < 0) {
                        oAd.style.display = 'none' ;
                        // 倒计时结束之后清除定时器
                        clearInterval(t);

                        // 广告关闭以后，下次还是10s
                        oTime.innerHTML = 10 ;
                        // 3s之后弹出小广告
                        showAd()
                    }
                },500)
                // 点X关闭
                oClose.onclick = function () {  
                    oAd.style.display = 'none' ;
                    clearInterval(t);
                    // 广告关闭以后，下次还是10s
                    oTime.innerHTML = 10 ;
                    showAd()
                }
            },3000)
        }


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

倒计时

<body>

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

    <script>

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

        var allSeconds;

        var tt = new Date('2021-12-20 16:8:0')
        showDate(tt)

        var t = setInterval(function () {  
            showDate(tt);
            // allSeconds这个变量本身属于showDate这个函数，所以必须提升为全局变量才可以访问
            if(allSeconds <= 0) {
                clearInterval(t) ;
                oTime.innerHTML = '时间已过期了'
            }
        },1000)


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

    </script>
    
</body>

日历

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

        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        ul{
            display: flex;
            width: 560px;
            margin: 0 auto;
            flex-wrap: wrap;
        }
        li{
            width: 80px;
            text-align: center;
            line-height: 40px;
            background-color: #000;
            color: #fff;
        }

        p{
            width: 560px;
            display: flex;
            justify-content: space-between;
            margin: auto;
            font-size: 40px;
            cursor: pointer;
        }

    </style>
</head>
<body>

    <p>
        <span id="prev">&lt;</span>
        <span id="next">&gt;</span>
    </p>
    <ul>
        <li>星期一</li>
        <li>星期二</li>
        <li>星期三</li>
        <li>星期四</li>
        <li>星期五</li>
        <li>星期六</li>
        <li>星期天</li>
    </ul>
    <ul id="list"></ul>




    <script>

        // 上下翻页，实际上就是改变了日期


        var oList = document.getElementById('list') ;
        var oPrev = document.getElementById('prev');
        var oNext = document.getElementById('next') ;

        var date = new Date() ;
        getList()
       


        // 下翻页：日期推到下个月
        oNext.onclick = function () {  
            date.setDate(32) ;
            getList()
        }

        oPrev.onclick = function () {  
            date.setDate(0) ;
            getList()
        }


        function getList() {  
            var res = '' ;
            // 拼接上个月的天数
            var prevDays = getPrevDays(date) ;
            console.log(prevDays);
            prevDays.forEach(function (v) {  
                res += `<li style="color:#666;">${v}</li>`
            })
            // 拼接本月的天数
            var nowDays = getNowDays(date) ;
            console.log(nowDays);
            nowDays.forEach(function (v) {  
                res += `<li>${v}</li>`
            })
            // 拼接下一个月的天数
            for(var i = 1 ; i <= 42 - prevDays.length - nowDays.length ; i++) {
                res += `<li style="color:#666;">${i}</li>`
            }

            oList.innerHTML = res
        }



        // 获取上个月的天数
        function getPrevDays(time) {  
            var date = new Date(time) ;

            // 先获取本月的第一天是星期几
            date.setDate(1) ;
            var week = date.getDay() ;
            console.log(week);

            // 把日期推到第0天
            date.setDate(0) ;
            var maxDay = date.getDate() ;
            // console.log(maxDay);

            var list = [] ;
            for(var i = maxDay - week + 2 ; i <= maxDay ; i++) {
                list.push(i)
            }
            // console.log(list);
            return list
        }

        // 获取本月 的天数
        function getNowDays(time) {  
            var date = new Date(time) ;
            // 把日期推到下个月
            date.setDate(32) ;
            // 把日期设置到第0天
            date.setDate(0) ;
            var maxDay = date.getDate() ;
            // console.log(maxDay);
            var list = [] ;
            for(var i = 1 ; i <= maxDay ; i++) {
                list.push(i)
            }
            // console.log(list);
            return list
        }

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

我喜欢大太阳

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript_Day11(注册验证、弹窗广告、日历)

注册验证<body> <p> 请输入用户名： <input type="text" id="user"> <span id="userSpan">用户名在3-6个字符，且只能是数字，字母组成，数字不能开头</span> </p> <p> 请输入密码： <input type="password" id="pw
复制链接

扫一扫