码迷,mamicode.com
首页 > 其他好文 > 详细

提交安钮 提交一次加了 59秒倒计时

时间:2015-07-02 19:10:13      阅读:115      评论:0      收藏:0      [点我收藏+]

标签:

实现点击“发送验证码”按钮后,按钮依次显示为“59秒后重试”、“58秒后重试”…直至倒计时至0秒时再恢复显示为“发送验证码”。在倒计时期间按钮为禁用状态

技术分享

 PS:  当倒计时开始的时候。 要把 计时器 清了。 不要然会点击, 加快秒数。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        window.onload = function () {
            var send = document.getElementById(send),
                times = 60,
                timer = null;
            send.onclick = function () {
                // 计时开始
                timer = setInterval(function () {
                    times--;
                    if (times <= 0) {
                        send.value = 发送验证码;
                        clearInterval(timer);
                        send.disabled = false;
                    } else {
                        send.value = times + 秒后重试
                        send.disabled = true;
                    }
                    console.log(times)
                }, 1000)

            }
        }
    </script>
</head>
<body>
<input type="button" id="send" value="发送验证码">
</body>
</html>

 

提交安钮 提交一次加了 59秒倒计时

标签:

原文地址:http://www.cnblogs.com/yjhua/p/4616682.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!