发送验证码倒计时

最新推荐文章于 2023-03-14 11:56:42 发布

转载最新推荐文章于 2023-03-14 11:56:42 发布 · 65 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qhorse/p/4599200.html

文章标签：

#javascript #ViewUI

本文介绍了如何使用JavaScript实现发送验证码并设置倒计时功能，包括按钮点击触发发送验证码、倒计时显示以及验证时间结束后重新获取验证码的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发送验证码倒计时</title>
</head>
<body>
    <input type="button" style="height:32px;width:120px;" value="点击发送验证码" onclick="sendCode(this)" />
    <script type="text/javascript">
        var clock = '';
        var nums = 10;
        var btn;
        function sendCode(thisBtn)
        {
            btn = thisBtn;
            btn.disabled = true; //将按钮置为不可点击
            btn.value = nums+'秒后可重新获取';
            clock = setInterval(doLoop, 1000); //一秒执行一次
        }
        function doLoop()
        {
            nums--;
            if(nums > 0){
                btn.value = nums+'秒后可重新获取';
            }else{
                clearInterval(clock); //清除js定时器
                btn.disabled = false;
                btn.value = '点击发送验证码';
                nums = 10; //重置时间
            }
        }
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/qhorse/p/4599200.html