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

// 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. TagCanvas 插件

    TagCanvas是一个基于HTML5 Canvas技术开发的标签云动画.还提供一个以jQuery插件形式实现的版本. 它支持文本和图片两种格式,能够以Sphere, hcylinder 或 vcyl ...

  2. (转载)C#压缩解压zip 文件

    转载之: C#压缩解压zip 文件 - 大气象 - 博客园http://www.cnblogs.com/greatverve/archive/2011/12/27/csharp-zip.html C# ...

  3. hdu2036

    题解: 求多边形面积 分成很多块三角形求就可以了 凹的也是支持的 代码: #include <bits/stdc++.h> using namespace std; #define rin ...

  4. markdown 语法小结

    1 标题 # 一级标题 ## 二级标题 2  字体加粗和斜体 *斜体* **加粗** 3.引用 > 4.换行 空行 或两个空格+tab 5.无序列表 + 第一个 + 第二个 - 第一个 - 第二 ...

  5. WPF中datagrid不显示滚动条问题

    WPF中DataGrid是自带滚动条的,当内容显示不下时可以使用滚动条显示.但是,开发中遇到了DataGrid一直不显示滚动条.之前也曾遇到过同类问题,再次经过查找,发现是StackPanel的原因, ...

  6. linux脚本实现scp命令自动输入密码和yes/no等确认信息

    实现方式: 通过expect工具实现 #!/bin/bash yum -y install expect expect -c " spawn scp -r root@192.168.10.1 ...

  7. Codeforces 1101F Trucks and Cities dp (看题解)

    Trucks and Cities 一个很显然的做法就是二分然后对于每个车贪心取check, 这肯定会TLE, 感觉会给人一种贪心去写的误导... 感觉有这个误导之后很难往dp那个方向靠.. dp[ ...

  8. Centos7创建CA和申请证书

    转载:http://rackie386.blog.51cto.com/11279229/1947999 Centos7.3创建CA和申请证书 openssl 的配置文件:/etc/pki/tls/op ...

  9. 数学模型:3.非监督学习--聚类分析 和K-means聚类

    1. 聚类分析 聚类分析(cluster analysis)是一组将研究对象分为相对同质的群组(clusters)的统计分析技术 ---->> 将观测对象的群体按照相似性和相异性进行不同群 ...

  10. OpenJ_Bailian 4017 爬楼梯

    时间限制: 1000 ms  空间限制: 262144 KB 题目描述 树老师爬楼梯,他可以每次走1级或者2级,输入楼梯的级数,求不同的走法数.例如:楼梯一共有3级,他可以每次都走一级,或者第一次走一 ...