短信验证码案例

最新推荐文章于 2023-11-15 14:15:14 发布

转载最新推荐文章于 2023-11-15 14:15:14 发布 · 293 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://blog.csdn.net/weixin_43392489/article/details/105455839

标签

#html #html5 #javascript

收录于

js 专栏收录该内容

9 篇文章

订阅专栏

这是一个简单的HTML页面，包含一个手机号码输入框和一个发送按钮。点击发送按钮后，按钮会被禁用，并开始显示3秒倒计时。倒计时结束后，按钮重新启用并恢复初始文本。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style></style>
    </head>

    <body>
手机号码：
<input type="number">
<button>发送</button>
<script>      
       var btn = document.querySelector('button');
        var time = 3;
        btn.addEventListener('click', function() {
            btn.disabled = 'ture';
             var timer = setInterval(function(){
            if (time == 0){
                clearInterval(timer);
                btn.disabled = false;
                btn.innerHTML = '发送';
                time = 3;
            } else {                
                btn.innerHTML = '还剩下' + time + '秒';
                time--;
            }
            },1000)  
        })
        
    </script>
</body>
</html>