倒计时
倒计时
小星星_cjx 发表于6个月前
倒计时
  • 发表于 6个月前
  • 阅读 4
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

摘要: 发送验证码,页面进行倒计时

发送验证码常见于,用户注册和登录的时候,这里主要讲一下倒计时功能,分两种情况来说明:

倒计时过程中,应将按钮设置为不可用即不可点击:

$("#btn").attr("disabled", "disabled");

倒计时结束后,将按钮设置为可用即可点击:

$("#btn").removeAttr("disabled");

一、页面一打开就进行倒计时,倒计时结束后可点击再次进行倒计时    

在这里有个问题,在倒计时过程中刷新页面时,倒计时会重新开始,这不是我们想要的结果,我们要做到的是页面刷新仍继续上一秒的倒计时,可以把倒计时的时间存在一个不受刷新影响的变量里,我是存在 window.name里:

window.name —— 当前window的名称,name属性可设置或返回存放窗口的名称的一个字符串。

<button id="codeBtn"></button>
$(function () {
  //这里写获取验证码的事件

  var clocks; //定时器的名称
  var time; //定义倒计时总时间
  if(window.name == ''){
    time = 20;
  }else{
     time = window.name;
  }

  //一进入页面就进行倒计时
  j = setInterval(function () {
    if(time > 0){
      $("#codeBtn").html(time+"s后重发");
      window.name = time;
      time --;
    }else{
      clearInterval(j);
      $("#codeBtn").html("重发验证码");
      time = 20;
      $("#codeBtn").click(function () {
        sendCode(this)
      })
     }
  },1000)

  //点击按钮重新倒计时
  function sendCode(thisBtn) {
    btn = thisBtn;
    btn.innerHTML = time + "s后可重发"
    clocks = setInterval(doLoop, 1000)
  }

  //定义倒计时函数
    function doLoop(){
      if(time > 0){
        btn.innerHTML = time + "s后可重发"
        window.name = time;
        time --;
      }else{
        clearInterval(clocks);
        btn.innerHTML = "重发验证码";
        time = 20;
      }
    }
})

 

二、点击按钮进行倒计时,倒计时结束后可点击再次进行倒计时

<button id="codeBtn">获取验证码</button>
var clock, //计时器名称
  time = 20, //倒计时总时间
  btn;
function sendCode(thisBtn) { //点击按钮进行倒计时
  btn = thisBtn;
  btn.innerHTML = time + 's';
  clock = setInterval(doLoop, 1000);
}
function doLoop() {
  time --;
  if(time > 0){
    btn.innerHTML = time + "s";
  }else{
    clearInterval(clock);
    btn.innerHTML = "获取验证码";
    time = 20;
  }
}
$("#codeBtn").click(function () {
  sendCode(this);
})

 

共有 人打赏支持
粉丝 0
博文 15
码字总数 9255
×
小星星_cjx
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: