JS倒计时、计时
倒计时
倒计时常用于发送验证码
前端代码如下:
<!DOCTYPE html>
<html>
<head>
<title>倒计时、计时</title>
</head>
<body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<input type="text" id="phoneId" name="phone" placeholder="填写手机号">
<button type="button" id="sendVerifyCodeId" style="height: 46px;">获取验证码</button>
<script>
$(document).ready(function() {
// 查看js是否被引入
console.log( "JS引入成功" );
}); // 发送验证码
var clock = "";
var countDown = 5; // 倒计时采用的秒数,测试可以用5,6这样的小一点的数字,线上一般用60
var seconds = countDown;
var $getVerifyCodeButton;
$( "#sendVerifyCodeId" ).click(function() {
$getVerifyCodeButton = $( this );
var mobile = $.trim($( "#phoneId" ).val());
var patPhone = /^1\d{10}$/;
if(mobile == "" || !patPhone.test(mobile)) {
// 这里用于校验手机号码是否有误,暂时放空不演示
}
$getVerifyCodeButton.attr( "disabled", true );
$getVerifyCodeButton.text("重新获取(" + seconds + "s)");
clock = setInterval(doLoop, 1000);
}); function doLoop() {
seconds--;
if(seconds > 0) {
$getVerifyCodeButton.text("重新获取(" + seconds + "s)");
} else {
clearInterval(clock); //清除js定时器
$getVerifyCodeButton.attr( "disabled", false );
$getVerifyCodeButton.text( "获取验证码") ;
seconds = countDown; //重置时间
}
}
</script>
</body>
</html>
计时
计时代码可参照倒计时,也可以查看本博客页面中计时源码
效果如下:
JS倒计时、计时的更多相关文章
- js倒计时-倒计输入的时间
计算指定时间到指定时间之间相差多少天.时.分.秒. 节日.活动.商城常用. 原理: 主要使用到时间戳,也就是从1970 年 1 月 1 日 到指定时间的毫秒数. 1. 求出毫秒差 :当两个时间直接进行 ...
- js倒计时 手机休眠时 时间不进行减少
http://www.111cn.net/wy/js-ajax/94218.htm 手机版网页js倒计时存在的问题与解决的方法 www.111cn.net 更新:2015-09-16 编辑:kp123 ...
- JS倒计时(刷新页面不影响)的实现思路
最近在做一个项目,用到了点击按钮实现倒计时,这个用js来实现很简单.但是遇到了一个问题 页面刷新后js重新加载导致 倒计时重新开始,或者直接初始化了 后来通过 cookie 保存来实现了js倒计时,关 ...
- js 倒计时(可自定义时间)
<html> <head> <title>js 倒计时</title> </head> <body> <div> & ...
- js倒计时显示
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...
- Js倒计时程序
Js倒计时程序 点击下载
- JS倒计时网页自动跳转代码
<title>JS倒计时网页自动跳转代码</title> <script language="JavaScript" type="text/ ...
- JS倒计时 代码
JS倒计时 代码 <div> <span id="KSD">3</span>天 <span id="KSH">1 ...
- js倒计时函数和(js禁用和恢复a标签的操作)
<script type="text/javascript"> /*获取手机号*/ var start_time=60; function get_phone_nums ...
- js 倒计时跳转
用js实现简单的倒计时结束页面跳转效果,主要用到setInterval()和clearInterval()方法,页面跳转使用window.location.href = " ".倒 ...
随机推荐
- P1792 [国家集训队]种树
P1792 [国家集训队]种树 题目描述 A城市有一个巨大的圆形广场,为了绿化环境和净化空气,市政府决定沿圆形广场外圈种一圈树. 园林部门得到指令后,初步规划出n个种树的位置,顺时针编号1到n.并且每 ...
- NP难问题
转自https://blog.csdn.net/u014295667/article/details/47090639 1.首先涉及到的基本概念有: (1)确定性算法(Determinism): 设A ...
- 关于JSON的解析方式
借鉴:站在巨人的肩膀上 一.json-lib json-lib最开始的也是应用最广泛的json解析工具,json-lib 不好的地方确实是依赖于很多第三方包,在Json.org网站上,Java可以使用 ...
- VS2010 中更改项目名称
Time.vcxproj修改项目名称,主要是通过以下几个步骤就能完成: 修改解决方案的名称. 修改解决项目名称. 修改项目的程序集名称和默认命名空间 替换整个项目或解决方案中的出现该名称的地方. 修改 ...
- bootstrap-switch与angularjs结合使用
bootstrap-switch和angularjs结合使用 由于angularjs的dom操作总是先执行,导致$(input[name="switch"])找不到元素,所以使用d ...
- jquery实现行列的单向固定和列的拖拽
其实这些功能在PL/SQL Dev中都有实现,在页面中还是蛮常见的. 我实现列的单向固定的原理:将需要单向固定的列放在一个<table>标签中,而整体的数据放在另一个<table&g ...
- python学习笔记3-函数的递归
递归就是指自己函数的自我调用 #递归 #自己调用自己,函数的循环 def test1(): num = int(input('please enter a number:')) if num%2==0 ...
- [整理]C语言中字符常量与ASCII码
所有的ASCII码都可以用“\”加数字(一般是8进制数字)来表示.而C中定义了一些字母前加"\"来表示常见的那些不能显示的ASCII字符,如\0,\t,\n等,就称为转义字符,因为 ...
- bzoj 3676 [Apio2014]回文串(Manacher+SAM)
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3676 [题意] 给定一个字符串,定义一个串的权值为长度*出现次数,求最大权的回文子串. ...
- 【专题】计数问题(排列组合,容斥原理,Prufer序列)
[容斥原理] 对于统计指定排列方案数的问题,一个方案是空间中的一个元素. 定义集合x是满足排列中第x个数的限定条件的方案集合,设排列长度为S,则一共S个集合. 容斥原理的本质是考虑[集合交 或 集合交 ...