JS实现倒计时发送验证码

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

寻找优秀的自己

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

阅读量410

点赞数

分类专栏：笔记文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_52160611/article/details/126456618

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>xzm </title>
</head>
<body>

<button id="timer" onclick="ATimer('timer')">获取验证码</button>

</body>

<script type="text/javascript" src="js/计时器.js"></script>
</html>

计时器.js


var times=0//计时器初始化

/**
 *
 * @param id 被修改的id
 * @constructor
 */
function Interval(id){

    var oo=setInterval(function(){
        if (times-1<=0){
            Close(oo)
        }
        times--
        // console.log(times)
        if (times<=0){//当计时器小于0
            var id1 = document.getElementById(id);
            id1.textContent="重新获取验证码"//修改指定id的数据
        }else {
            var id1 = document.getElementById(id);//动态显示计时器
            id1.textContent=times
        }

    },200)  //每隔一秒钟

}

/**
 * 关闭计时器
 * @param id 要关闭计时器的变量名
 * @constructor
 */
function Close(id){
    clearInterval(id)
}

function ATimer(id) {
    if (times <= 0) {
        times = 60
        Interval(id);
    }else {
        alert("请在"+times+"秒后再试")

    }
}

最后别忘了，修改js的路径与本地路径匹配！！！

寻找优秀的自己

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS实现倒计时发送验证码

初级前端
复制链接

扫一扫

专栏目录

JS实现倒计时发送验证码

index.html

计时器.js

“相关推荐”对你有帮助么？