文档章节

倒计时

小星星_cjx
 小星星_cjx
发布于 2017/05/03 15:19
字数 545
阅读 6
收藏 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);
})

 

© 著作权归作者所有

共有 人打赏支持
小星星_cjx
粉丝 1
博文 33
码字总数 29685
作品 0
深圳
前端工程师

暂无文章

python:关于读取文件的指定行的问题

先来造一个文件:就叫做 test.txt吧,内容是下面这个样子: 表头1,数据12,数据23,数据34,数据45,数据56,数据67,数据7 那么我们并不打算把这个表头给读出来 怎么办呢? 先来打开文...

Oh_really
17分钟前
1
0
Rails 用现代 Rails 逃离单页面应用 “兔子洞”

在工作共总是觉得turbolinks非常爽,但是却总是被说成是过时的技术,大家都喜欢spa,哪怕不用的spa的人也是禁用掉的多,找不到很好的理由劝说别人使用,这篇文章说的很到位,或者说至少是牛人...

wmzsonic
22分钟前
0
0
Hive 分布式搭建,Spark集成Hive记录

本帖详细介绍搭建步骤,仅仅记录自己搭建过程以及采坑经历。 前提环境: Hadoop集群 版本2.7.2 Spark集群 版本2.1.0 Linux版本 Centos7 准备搭建 MySql版本5.5.61 ,Hive-2.1.0 去官网下载M...

我爱春天的毛毛雨
24分钟前
2
0
打包QML程序

1、windeployqt执行路径(D:\Qt\5.12.0\msvc2017_64\bin)加入到PATH中 2、使用Qt自带的命令行交互 Command 终端(Qt 5.12.0 64-bit for Desktop (MSVC 2017))切换到 Release 编译成功的exe...

渣渣曦
今天
4
0
优秀互联网高级测试工程师应该具备的能力

概述 在之前写的互联网高级测试工程师至少具备的能力一文中,提到了测试工程师至少具备的能力,但是并没有提到优秀测试工程师应该具备的能力,下文简单的谈一谈。当然这些全部都是我的个人理...

Sam哥哥聊技术
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部