纯原生JS实现一个发送短信验证码倒计时功能

最新推荐文章于 2024-05-13 08:00:00 发布

Sspit

最新推荐文章于 2024-05-13 08:00:00 发布

阅读量290

点赞数

文章标签： js

本文链接：https://blog.csdn.net/qq_35126546/article/details/108850146

版权

话不多说，上代码啦

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    </style>
</head>
<body>
<div id="checkCodeBtn" style="width: 150px;height: 150px;text-align: center" data-status="ready">获取验证码</div>
<script>
    var btnDom = document.getElementById("checkCodeBtn");
    (function getCheckCode(dom,timer) {
        this.timer = timer || 60;
        this.dom = dom;
        this.status = dom.dataset['status'] || null;
        var self = this;
        var out;
        function sendSms() {
            var st = self.status;
            var time = self.timer;
            if (time === 0){
                self.dom.style.color = "black";
                self.status = 'ready';
                self.timer = timer;
                self.dom.innerHTML = "获取验证码"
                clearTimeout(out)

            }else {
                out = setTimeout(function () {
                    self.timer --;
                    self.dom.innerHTML = self.timer;
                    self.status = "loading"
                    sendSms()
                },1000)
            }
        }
        this.dom.onclick = sendSms
    })(btnDom,5)
</script>
</body>
</html>

Sspit

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯原生JS实现一个发送短信验证码倒计时功能

话不多说，上代码啦<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> </style></head><body><div id="checkCodeBtn" style="width: 150px;height:
复制链接

扫一扫