文档章节

倒计时

小星星_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
博文 35
码字总数 31189
作品 0
深圳
前端工程师
私信 提问

暂无文章

Dubbo下一站:Apache顶级项目

摘要: 导读: 近日,在Apache Dubbo开发者沙龙杭州站的活动中,阿里巴巴中间件技术专家曹胜利(展图)向开发者们分享了Dubbo2.7版本的规划。 本文将为你探秘 Dubbo 2.7背后的思考和实现方式。...

阿里云云栖社区
15分钟前
1
0
Vim中快捷键命令介绍

map命令简介 map是一个映射命令,将常用的很长的命令映射到一个新的功能键上。map是Vim强大的一个重要原因,可以自定义各种快捷键,用起来自然得心应手。Vim中有五种映射存在: 用于普通模式:...

陶小陶
19分钟前
2
0
结合实际场景谈一谈微服务配置

作为 Nacos 5W1H 的系列文章,本文将围绕“Where”,讲述 Nacos 配置管理的三个典型的应用场景: 数据库连接信息 限流阈值和降级开关 流量的动态调度 上一篇:Nacos帮我解决了什么问题? 数据...

阿里云官方博客
21分钟前
1
0
Docker | 采用镜像alpine缺少时区解决方法

加入: RUN apk --update add tzdata当然也可以安装其他的如 procps, php 等

云迹
21分钟前
2
0
在Python中调用Java扩展包HanLP测试记录

最近在研究中文分词及自然语言相关的内容,关注到JAVA环境下的HanLP,HanLP是一个致力于向生产环境普及NLP技术的开源Java工具包,支持中文分词(N-最短路分词、CRF分词、索引分词、用户自定义...

左手的倒影
32分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部