前端短信倒计时按钮

最新推荐文章于 2023-04-07 10:51:28 发布

qq_42383787

最新推荐文章于 2023-04-07 10:51:28 发布

阅读量376

点赞数

分类专栏：前端文章标签： jQ 倒计时按钮

本文链接：https://blog.csdn.net/qq_42383787/article/details/83377854

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

    var InterValObj; //timer变量，控制时间
    var count = 60; //间隔函数，1秒执行
    var curCount;//当前剩余秒数

    function sendMessage() {
        curCount = count;
        //设置button效果，开始计时
        $("#btnSendCode").attr("disabled", "true");
        $("#btnSendCode").val(curCount + "秒后可重新发送");
        InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次

        //请求后台发送验证码 TODO

    }

    //timer处理函数
    function SetRemainTime() {
        if (curCount == 0) {
            window.clearInterval(InterValObj);//停止计时器
            $("#btnSendCode").removeAttr("disabled");//启用按钮
            $("#btnSendCode").val("重新发送验证码");
        }
        else {
            curCount--;
            $("#btnSendCode").val(curCount + "秒后可重新发送");
        }
    }
</script>
<body>
    <form action="/upload" method="POST" enctype="multipart/form-data">
        文件：<input type="file" name="file"/>
        <input type="submit" value="提交"/>
    </form>

    <p><input id="btnSendCode" type="button" value="发送验证码" onclick="sendMessage()" /></p>

</body>
</html>

qq_42383787

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端短信倒计时按钮

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt;&lt;/head&gt;&lt;script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type=&quo
复制链接

扫一扫