适用于获取验证码等其他场景,下面代码直接粘贴句可以使用

// 60s获取验证码的js与html
var timer = null;
var count = 60;
$('.box>button').click(function() {
var codeText = $('.code').text();
if (codeText == '获取验证码') {
timer = setInterval(function(){
count--;
$('.code').text(count+'后获取验证码');
if (count <=0) {
clearInterval(timer);
$('.code').text('获取验证码');
}
},1000);
}
});
html:
<!-- 60s倒计时 -->
<div class='box'>
<button class='code'>获取验证码</button>
</div>

  

js实现60s倒计时效果的更多相关文章

  1. JS实现60s倒计时(亲测有效),及span标签如何使用和禁用onclick事件

    效果如下图:点击按钮出现60秒倒计时,60s内按钮不可用,倒计时到了时间方可再次点击获取. 另外还有一个知识点,只有input 及button这样的表单元素有disbale属性,如何设置是否可用属性的 ...

  2. JS实现验证码倒计时效果

    通常做注册页面时会有获取验证码按钮,然后点击后过60秒才能重新获取,比如现在项目中遇到的 然后点击后的样式,并且数字是递减的,到0时重新回到最初的状态(上图). 首先构造HTML结构 <butt ...

  3. 页面倒计时跳转页面效果,js倒计时效果

    页面倒计时跳转页面效果,js倒计时效果 >>>>>>>>>>>>>>>>>>>> ...

  4. 纯js倒计时效果(交流加群:452892873)(本群每天都更新学习资料)

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. JS实现倒计时效果,并退出系统

    背景:由于单点登录后,一直在本系统操作,可是门户体统的会话失效时间有30分钟,所以30分钟后,需要重新登录系统才可以进行操作. 方法:想过在本系统中的每个操作都先跟门户系统进行交互,渠道refresh ...

  6. js实现倒计时效果

    <!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/htm ...

  7. 二、JavaScript语言--JS实践--倒计时效果

    主要内容:分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计效果. Javascript 日期对象: Date()返回当前的日期和时间 getY ...

  8. Andorid实现点击获取验证码倒计时效果

    这篇文章主要介绍了Andorid实现点击获取验证码倒计时效果,这种效果大家经常遇到,想知道如何实现的,请阅读本文   我们在开发中经常用到倒计时的功能,比如发送验证码后,倒计时60s再进行验证码的获取 ...

  9. jquery网页倒计时效果,秒杀,限时抢购!

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. 20165323 结对编程之四则运算week2-整体总结

    一.需求 实现一个命令行程序,要求: 1.自动生成小学四则运算题目(加.减.乘.除) 2.支持整数 3.支持多运算符(比如生成包含100个运算符的题目) 4.支持真分数 5.能判断错误,在输入错误结果 ...

  2. Update openssh7.9 on centos6

    一.制作RPM安装包1)依赖安装yum install rpm-build gcc make wget openssl-devel krb5-devel pam-devel libX11-devel ...

  3. WPF 对控件进行截图且不丢失范围(转载)

    原文:Taking WPF “Screenshots” I was recently working on a Surface project at Microsoft (that will be s ...

  4. BootStrap标题制作模板

    <!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8&q ...

  5. UE4 日志

    第一种 输出在控制台中,需要在启动之后的游戏窗口中点击~以打开控制台,然后输入showlog,这时候会弹出一个cmd日志窗口.在程序中使用代码 UE_LOG(LogTemp, Warning, TEX ...

  6. html5 之 local storage \sessjion storage

    转载: HTMl5的sessionStorage和localStorage html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessi ...

  7. 【C#】使用OWIN创建Web API

    OWIN的介绍 OWIN 的全称是 "Open Web Interface for .NET", OWIN 在 .NET Web 服务器和 .NET Web 应用之间定义了一套标准 ...

  8. Telnet和SSH

    1. 协议用途 Telnet和SSH用于远程访问服务器的的两大常用协议.利用它们,我们可以管理并监控生产服务器和企业服务器,更新服务器内核,安装最新的软件包和补丁,能够远程登录服务器,开展软件开发.测 ...

  9. weblogic弱密码检测

    http://www.secbox.cn/hacker/tools/6252.html http://60.12.168.73:8088/console/login/LoginForm.jsp htt ...

  10. Flink--3种分区方式

    partitionByHash //TODO partitionByHash val data = new mutable.MutableList[(Int, Long, String)] data. ...