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

// 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. C 语言的 GCC 扩展

    GNU 编译器(GCC)提供了很多 C 语言扩展,编译器会使用该信息生成更高效的机器代码. 内联函数 static inline __attribute__ ((always_inline)) int ...

  2. RN错误随笔 - Unable to resolve module 'AccessibilityInfo'

    错误信息:.React Native 运行报错:Unable to resolve module 'AccessibilityInfo' 可以看到在 异常的返回的JSON 结构中给出了推荐的解决方法 ...

  3. [转]安卓手机google商店的账号切换退出方式

    来源:http://blog.csdn.net/bianchengninhao/article/details/42240839 1.设置 2.账户 3.Google 4. 5.点击菜单键 6.最后删 ...

  4. Javascript \x 反斜杠x 16进制 编解码

    js 里 \x 开头的通常是16进制编码的数据,下面代码实现编解码: 解码 function decode(str){ return str.replace(/\\x(\w{2})/g,functio ...

  5. 基于nopcommerce b2c开源项目的精简版开发框架Nop.Framework

    http://www.17ky.net/soft/70612.html?v=1#0-sqq-1-39009-9737f6f9e09dfaf5d3fd14d775bfee85 项目详细介绍 该开源项目是 ...

  6. Python_logging模块

    日志:方便用户了解系统.软件或应用的运行情况,及时发现问题并快速定位.解决问题. 一个日志信息对应的是一个事件的发生,而一个事件需要包括的几个内容: 事件发生时间 事件发生位置 事件发生严重程度(日志 ...

  7. redis中实现redis-cli任意目录执行

  8. sparkStreaming序列化问题

    执行sparkSTreaming+kafka 报错如下: org.apache.spark.SparkException: Task not serializable ...... Caused by ...

  9. AtCoder Regular Contest 102 (ARC102) E - Stop. Otherwise... 排列组合

    原文链接https://www.cnblogs.com/zhouzhendong/p/ARD102E.html 题目传送门 - ARC102E 题意 有 $n$ 个取值为 $[1,k]$ 的骰子,对于 ...

  10. Codeforces 1000G Two-Paths 树形动态规划 LCA

    原文链接https://www.cnblogs.com/zhouzhendong/p/9246484.html 题目传送门 - Codeforces 1000G Two-Paths 题意 给定一棵有 ...