js实现倒计时

简介: js实现倒计时

今天和大家分享一个小功能,在我们进行需要获取手机验证码或其他方式的验证码进行登录时会有一个功能,就是当你点击发送验证码时会有一个倒计时,倒计时没有结束时按钮是禁用的状态,防止重复发送短信,下面我们来看一下这个功能使用JS该如何实现。


一、功能分析


按钮点击之后,会禁用按钮,disable为true。


同时按钮里面的内容发生变化,button里面的内容通过innerHTML修改。


同时秒数发送变化,所以我们需要用到定时器。


定义一个变量在定时器里面不断的递减。


如果变量为0时就说明到了时间,我们需要停止定时器并且复原按钮初始状态。


二、具体实现


首先写我们的html部分:

<input type="number">
<button>获取验证码</button>

创建一个输入手机号的输入框和一个获取验证码的按钮。


再写我们的js部分:

var but = document.querySelector('button');
      var time = 10; //定义剩下的秒数
      but.addEventListener('click', function() {
        but.disabled = true;
        var timer = setInterval(function() {
          if (time == 0) {
            //清除定时器和复原按钮
            clearInterval(timer);
            but.disabled = false;
            but.innerHTML = '发送';
            time = 10; //这个10是重新开始
          } else {
            but.innerHTML = '剩余' + time + '秒';
            time--;
          }
        }, 1000);
      })
相关文章
|
2月前
|
JavaScript 索引
js倒计时功能
js倒计时功能
32 0
|
4月前
|
前端开发 JavaScript
HTML+CSS+JS 倒计时动画效果
HTML+CSS+JS 倒计时动画效果
|
5月前
|
JavaScript 前端开发
JavaScript解决生日倒计时的问题
JavaScript解决生日倒计时的问题
31 0
|
5月前
|
JavaScript 前端开发
JavaScript编写一个倒计时
JavaScript编写一个倒计时
28 0
|
5月前
|
JavaScript
JS利用时间戳倒计时案例
JS利用时间戳倒计时案例
|
5月前
|
JavaScript 前端开发 小程序
element 订单列表中 实现多个倒计时(vue+js)
element 订单列表中 实现多个倒计时(vue+js)
|
5月前
|
移动开发 JavaScript 前端开发
分享75个JS特效倒计时,总有一款适合您
分享75个JS特效倒计时,总有一款适合您
76 0
|
5月前
h5+JavaScript实现一个倒计时功能
h5+JavaScript实现一个倒计时功能
|
5月前
|
JavaScript
实现一个网页同时调用多个倒计时 jquery/js
实现一个网页同时调用多个倒计时 jquery/js
|
5月前
|
JavaScript
JS倒计时
JS倒计时