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

// 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. 008-Python-模块

    1.模块 1.1什么是模块 一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀: 模块分为: 内置模块(内部定义的如time,os,sys等) 第三方模块(需要安装 ...

  2. js中匿名函数和回调函数

    匿名函数: 通过这种方式定义的函数:(没有名字的函数) 作用:当它不被赋值给变量单独使用的时候 1.将匿名函数作为参数传递给其他函数 2.定义某个匿名函数来执行某些一次性任务 var f = func ...

  3. jquery表单提交的新写法

    $('form').submit()和$("form").submit() 这两种都可以实现form表单的提交 jquery中$('form').submit()和$(" ...

  4. jQuery数字滚动(模拟网站人气、访问量递增)原创

    插件描述:实现数字上下滚动,模拟网站人气.访问量递增的动画效果,兼容性如下: 使用方法 $(el).runNum(val,params);   参数详解 val:数值型(默认70225800): pa ...

  5. LeetCode高频148错题记录

    3. Max Points on a Line 共线点个数3种解法 思路一:思考如何确定一条直线,两点法,确定斜率后带入一点.有三种情况,1. 两点重合,2. 斜率不存在,3. 正常算,依次以每个点为 ...

  6. 如何在grails2.3.x中的fork模式下进行调试?-【grails】

    grails2.3.x中默认情况下运行模式被设置成了fork模式,在这种模式下,大家会发现设置了断点后无法进行中断.这是由于fork模式造成的,因为在fork模式下,JVM新起了一个进程,这样调试器就 ...

  7. Android开发——使用Jword生成本地word文档

    本文主要介绍如何使用Jword生成本地word文档,这里涉及到Jword的使用技巧,本文给出相应的代码,需要的朋友可以参考下. 为什么使用Jword呢?因为IText .Freemark在安卓平台上压 ...

  8. Fatal NI connect error 6413的解决办法 http://www.itpub.net/thread-107518-1-1.html

    在进行Oracle开发的时候,碰到了这样一个稀奇古怪的问题:每次连接数据库都不成功,并且在应用程序目录下的sqlnet.log中有这样的记录: Fatal NI connect error 6413, ...

  9. 0day漏洞

    0Day的概念最早用于软件和游戏破解,属于非盈利性和非商业化的组织行为,其基本内涵是“即时性”. Warez被许多人误认为是一个最大的软件破解组 织,而实际上,Warez如黑客一样,只是一种行为. 0 ...

  10. 实际生产用法CMS和G1

    java -Xms100m -Xmx100m -Xmn50m -XX:MetaspaceSize=20m -XX:MaxMetaspaceSize=20m -XX:+UseConcMarkSweepG ...