文档章节

倒计时

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

 

© 著作权归作者所有

共有 人打赏支持
小星星_cjx
粉丝 0
博文 15
码字总数 18529
作品 0
广州
前端工程师

暂无相关文章

收集自网络的wordpress 分页导航的代码教程(全网最全版)

wordpress 分页导航是用来切换文章的一个功能,添加了 wordpress 分页导航后,用户即可自由到达指定的页面数浏览分类文章,而这样的一个很简单功能却有很多朋友在用插件:WP-PageNavi,插件的...

Rhymo-Wu ⋅ 40分钟前 ⋅ 0

微服务 WildFly Swarm 入门

Hello World 就像前面章节中的其他框架一样,我们希望添加一些基本的 Hello-world 功能,然后在其上逐步添加更多的功能。让我们从在我们的项目中创建一个 HolaResources 开始。您可以使用您的...

woshixin ⋅ 47分钟前 ⋅ 0

Maven的安装和Eclipse的配置

1. 下载Maven 下载地址 2. 解压压缩包,放到自己习惯的硬盘中 此处我将其放到了 D:\Tools 目录下。 3. 配置环境变量 右键此电脑 -> 属性 -> 高级系统设置 -> 环境变量。 在系统变量中新建,变...

影狼 ⋅ 54分钟前 ⋅ 0

python pip使用国内镜像的方法

国内源 清华:https://pypi.tuna.tsinghua.edu.cn/simple 阿里云:http://mirrors.aliyun.com/pypi/simple/ 中国科技大学 https://pypi.mirrors.ustc.edu.cn/simple/ 华中理工大学:http://......

良言 ⋅ 55分钟前 ⋅ 0

对于url变化的spa应该如何使用微信jssdk

使用vue单页面碰上微信jssdk config验证失败的坑。第一次成功 之后切换页面全部失败,找到了解决方法,第一次验证成功后保存验证信息 切换页面时验证信息直接拿来用,加一个wx.error() 失败时...

孙冠峰 ⋅ 59分钟前 ⋅ 0

Spring Cloud Gateway 一般集成

SCF发布,带来很多新东西,不过少了点教程,打开方式又和以前的不一样,比如这个SCG,压根就没有入门指导,所以这里写一个,以备后用。 一、集成 pom.xml <dependency> <groupI...

kut ⋅ 今天 ⋅ 0

建造模式

《JAVA与模式》之建造模式

Cobbage ⋅ 今天 ⋅ 0

WePY框架开发的小程序如何在微信web开发者工具中运行起来

一、首先需要安装node.js,安装步骤如下: 首先下载安装包 https://nodejs.org/en/download/ 点击下载相应的zip版本 然后将文件夹解压到任意目录 比如我这里解压到了:C:\Program Files\node...

Helios51 ⋅ 今天 ⋅ 0

使用EnumSet 代替位域(32)

1、位域(Bit field):使用or 运算将几个常量合并到一个集合中 位操作,可以有效地执行 AND 、OR 这样的位操作 但是 位域比int 常量枚举缺点更多 2、java.util 包里面的EnumSet 类是有效的替...

职业搬砖20年 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部