发送短信验证码倒计时

最新推荐文章于 2024-05-03 11:47:20 发布

花胖胖

最新推荐文章于 2024-05-03 11:47:20 发布

阅读量138

点赞数

分类专栏：前端开发中的问题 js 常见方法文章标签： javascript

本文链接：https://blog.csdn.net/qq_37144354/article/details/79905304

版权

js 常见方法同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

前端开发中的问题

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>短信验证码</title>
</head>
<body>
<input type="number" id="tel" value="13303861063">
<button for="pwd"  id="btnCode">发送验证码</button>
</body>
<script>
    var tel = {phone:13303861063}//tel 为 {phone:13303861063} 格式
    var url = 'https://blog.csdn.net/qq_37144354/article/details/79905304'
    sendcode(tel,url);
    function sendcode(tel,url) {
        //code 基础部分不用改，按钮id为 btnCode
        code = {
            url:url,
            data:tel,
            btn:"btnCode",//按钮的类名，id名
            time:120,
            sendSF:true,//状态判断
            sendfn:function () {
                if(code.sendSF){
                    code.sendSF = false;
                    var t = setInterval(function () {
                        code.time--;
                        obj.innerText="重新发送("+code.time+")";
                        if (code.time == 0){
                            clearInterval(t);
                            obj.innerText='重新获取';
                            code.sendSF = true;
                            code.time = 120;
                        }
                    },1000)
                }
            },
            handler:function () {
                if (code.time >0 && code.time <120){
                    alert('验证码30分钟才能获取一次')
                }else {
                    code.ajaxfn(code.url,code.data)
                }
            },
            ajaxfn:function (url,data) {
                code.sendfn();
                /* $.ajax({
                 type:'GET',
                 url:url,
                 data:data,
                 success:function (data) {
                 if(data == 'success'){
                 alert( '验证码30分钟内有效，请注意查收');
                 code.sendfn();
                 }else if (data == 'fail'){
                 alert( '验证码30分钟内只能发送一次，请等候');
                 }
                 },
                 error: function () {
                 alert('网络异常，通信错误，请检查你的网络');
                 }
                 })*/
            }
        }
        var obj = document.getElementById(code.btn);
        //ajaxfn 用于ajax发送验证码 url 为ajax接口，data：{phone:tel}为向后台传送数据
        obj.addEventListener("click",code.handler,false)
    }
</script>
</html>

花胖胖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
发送短信验证码倒计时

&lt;!DOCTYPE html&gt;&lt;html lang="cn"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;短信验证码&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;input typ
复制链接

扫一扫