前端 短信 倒计时按钮

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

猜你喜欢

转载自blog.csdn.net/qq_42383787/article/details/83377854