发送验证码

实现发送按钮倒计时与验证码功能

最新推荐文章于 2023-08-08 19:50:01 发布

原创最新推荐文章于 2023-08-08 19:50:01 发布 · 473 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

此HTML和JavaScript代码示例展示了如何在点击发送按钮后禁用按钮并开始60秒倒计时。在倒计时期间，用户无法点击提交按钮，只有当倒计时结束且输入正确的验证码（0505）时，才会弹窗提示成功。

内容
1.发送按钮点击后，会被禁用;
2.被点击后，按钮里面的内容会变化成1分钟的倒计时;
3.待发送按钮被触发后才可以点击提交按钮，需在验证码框里填写0505，用弹窗提示成功。
原理
倒计时实现60秒倒数
（注：“眼睛”显示密码为浏览器自带！！）
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
	<style>
	*{
        margin: 0;
        padding: 0;
    }
	</style>
</head>
<body>
    <div>
        验证码：
        <input type="password" class="password">
        <button class="send">发送</button>
        <input type="submit" class="get">
    </div> 
    <script>
        var passWord = document.querySelector('.password')
        var osend = document.querySelector('button')
        var oget = document.querySelector('.get')
        var time = 60;
        oget.disabled = true

        osend.addEventListener('click', function(){
            osend.disabled = true
            var oTime = setInterval(function(){
                if(time == 0){
                    clearInterval(oTime)
                    osend.disabled = false
                    osend.innerHTML = '发送'
                }else{
                    osend.innerHTML = '等待' + time + '秒'
                    time--
                    oget.disabled = true
                }
            }, 1000)
        })

        oget.addEventListener('click', function() {
            if(passWord.value=='0505'){
                alert("成功")
            }else{
                alert("错误")
            }
        })
    </script>
</body>
</html>