js案例：点击获取验证码后，文本换成倒计时

最新推荐文章于 2024-02-03 11:02:39 发布

前端嘻嘻哥

最新推荐文章于 2024-02-03 11:02:39 发布

阅读量109

点赞数

分类专栏：前端算法/案例文章标签： javascript 前端开发语言算法数据结构 Powered by 金山文档

本文链接：https://blog.csdn.net/xixi1811/article/details/128620975

版权

前端算法/案例专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!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>正则表达式</title>
    <style>
        .user{
            width: 225px;
        }
        .fs{
            width: 80px;
        }
    </style>
</head>
<body>
    <form action="#" method="get">
        <input type="text" class="user" value="" /><br>
        <input type="password" class="pow" value=""/>
        <button onclick="fs()" class="fs">发送验证码</button><br>
        <button type="submit">登录</button>
        <button type="reset">重置</button>
    </form>
    <script>
        function fs() {
            // console.log(document.querySelector("button").innerHTML);
            let user=document.querySelector(".user").value;
            // console.log(user);
            var test=/\d{11}/;
            if (test.test(user)){
                // alert("手机号验证通过");
                let set=setInterval("set()",1000);
                let timeout=setTimeout(clearInterval(set),5000)
            }else{
                alert("格式不对,");
                let newwindow=window.open("http://www.baidu.com");
            }
        }
        let i=5;
        function set(){
            if(i>=0){
                document.querySelector("button").innerHTML=`(${i})`;
                // console.log(document.querySelector("button").innerHTML);
                i--;
                // console.log(i);
            }else{
                document.querySelector("button").innerHTML=`发送验证码`;
            }  
        }
        
    </script>
</body>

</html>