设为首页 加入收藏

TOP

用JavaScript写一个简单的倒计时,可以应用在发送短信验证码的“59秒后重新发送验证短信”
2019-09-17 15:38:54 】 浏览:14
Tags:JavaScript 一个 简单 倒计时 可以 应用 发送 短信 验证 59秒 重新
倒计时——从10倒数到0,点击按钮会还原倒计时
<body>
    <!-- 将textvalue值设为10,从10倒数 -->
    <input type="text" value="10" id="txt">
    <input type="button" value="重新开始" id="btn">
</body>
<script>
    var oT = document.getElementById("txt"); var oB = document.getElementById("btn"); var timer; //封装一个开始倒数的函数
    function start(){ //开启计时器,每秒text框中的数值自减1
        timer = setInterval(function(){ oT.value--; //当text框中的数值为0时,停止计时器
            if(oT.value<=0){ clearInterval(timer); } },1000) } //封装一个清楚延时器的函数
    function stop(){ clearTimeout(timer); } //当网页加载完毕时的行为如下
    window.onload = function(){ //只要text里面的数值还未到0,则不停地以每秒减一的速度进行着
        if(oT.value>0){ start(); //一旦清零,就停止
        }else{ stop(); } } //当点击按钮时的行为
    oB.onclick = function(){ //此处要设清除计时器,否则中断text倒数后的重新倒数将会加速,甚至会递减到负值
 clearInterval(timer); //点击按钮后,无论text中的数值时多少,都变为10
        oT.value = 10; //重复上面函数的行为
        if(oT.value>0){ start(); }else{ stop(); } } </script>

 

】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇数字字母混合的4位验证码 下一篇vue 移动端列表筛选功能实现

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目