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

// 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. 定时获取MySQL库的大小

    定时获取MySQL库的大小 获取数据库单个库的大小命令 [root@admin ~]# cat db_size.txt mysql -h 192.8.1.1 -uUSER -pPASSWORD -e' ...

  2. win10ssh连接ubuntu服务器并本地绘图

    update @ 2018-11-07 00:36:38 用xrdp+tigervnc等的组合,可以使用原生unity桌面.具体教程见ubuntu日常使用指南 工具准备 win10上: xshell, ...

  3. Git基础(一) 创建项目仓库

    一.取得Git项目仓库的两种方法: 在现有目录中初始化仓库 git init 如果是在一个已经存在文件的文件夹(而不是空文件夹)中初始化Git仓库来进行版本控制的话,应该跟踪这些文件并提交,通过git ...

  4. jQuery中的extend()方法

    通常我们使用jquery的extend时,大都是为了实现默认字段的覆盖,即若传入某个字段的值,则使用传入值,否则使用默认值.如下面的代码: function getOpt(option){ var _ ...

  5. Python自带IDE设置字体

    打开Python 3.7.0 shell 点击菜单项 “”Options“”>"Configure IDLE" 可选择窗口的字体和大小 可选择背景主题颜色 可自定义配置

  6. Flink--基于mysql的sink和source

    基于mysql的source操作 object MysqlSource { def main(args: Array[String]): Unit = { val env = StreamExecut ...

  7. Docker技术底层架构剖析

    [Docker  底层技术] docker底层的 2 个核心技术分别是 Namespaces 和 Control groups 在操作系统中,网络配置,进程,用户,IPC(进程之间的调用)等信息之间的 ...

  8. Fiddler的安装与使用

    Fiddler是位于客户端和服务器端之间的代理,也是目前最常用的抓包工具之一 .它能够记录客户端和服务器之间的所有 请求,可以针对特定的请求,分析请求数据.设置断点.调试web应用.修改请求的数据,甚 ...

  9. Count the string kmp

    问题描述众所周知,aekdycoin擅长字符串问题和数论问题.当给定一个字符串s时,我们可以写下该字符串的所有非空前缀.例如:S:“ABAB”前缀是:“A”.“AB”.“ABA”.“ABAB”对于每个 ...

  10. day 47 htm-part2

    列表 无序列表====所谓无序就是显示出来的效果没有编号排序 <ul type='disc'> <li>第一项</li> <li>第二项</li& ...