倒计时

倒计时常用于发送验证码

前端代码如下：

<!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倒计时、计时的更多相关文章

  1. js倒计时-倒计输入的时间

    计算指定时间到指定时间之间相差多少天.时.分.秒. 节日.活动.商城常用. 原理: 主要使用到时间戳,也就是从1970 年 1 月 1 日 到指定时间的毫秒数. 1. 求出毫秒差 :当两个时间直接进行 ...

  2. js倒计时 手机休眠时 时间不进行减少

    http://www.111cn.net/wy/js-ajax/94218.htm 手机版网页js倒计时存在的问题与解决的方法 www.111cn.net 更新:2015-09-16 编辑:kp123 ...

  3. JS倒计时（刷新页面不影响）的实现思路

    最近在做一个项目,用到了点击按钮实现倒计时,这个用js来实现很简单.但是遇到了一个问题 页面刷新后js重新加载导致 倒计时重新开始,或者直接初始化了 后来通过 cookie 保存来实现了js倒计时,关 ...

  4. js 倒计时（可自定义时间）

    <html> <head> <title>js 倒计时</title> </head> <body> <div> & ...

  5. js倒计时显示

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...

  6. Js倒计时程序

    Js倒计时程序 点击下载

  7. JS倒计时网页自动跳转代码

    <title>JS倒计时网页自动跳转代码</title> <script language="JavaScript" type="text/ ...

  8. JS倒计时 代码

    JS倒计时 代码 <div> <span id="KSD">3</span>天 <span id="KSH">1 ...

  9. js倒计时函数和(js禁用和恢复a标签的操作)

    <script type="text/javascript"> /*获取手机号*/ var start_time=60; function get_phone_nums ...

  10. js 倒计时跳转

    用js实现简单的倒计时结束页面跳转效果,主要用到setInterval()和clearInterval()方法,页面跳转使用window.location.href = " ".倒 ...

随机推荐

  1. python 文件读写，打开 未完。。。

    导入库 os库   import os 获取当前目录 os.getcwd() 切换目录 os.chdir('路径') 打开写入文件 import osos.getcwd()os.chdir('E:\\ ...

  2. P2015 二叉苹果树

    P2015 二叉苹果树 有一棵苹果树,如果树枝有分叉,一定是分2叉(就是说没有只有1个儿子的结点) 这棵树共有N个结点(叶子点或者树枝分叉点),编号为1-N,树根编号一定是1. 我们用一根树枝两端连接 ...

  3. Java Socket Timeout 总结

    原文出处:囚兔 摘要: Java的网络编程Socket常常用于各种网络工具,比如数据库的jdbc客户端,redis客户端jedis,各种RPC工具java客户端,这其中存在一些参数来配置timeout ...

  4. Java基础-面向对象第一特性之封装(Encapsulation)

    Java基础-面向对象第一特性之封装(Encapsulation) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.理解什么是面向过程和面向对象 面向过程与面向对象都是我们编程中 ...

  5. windows下静态编译pthread

    1. Building the library as a statically linkable library-------------------------------------------- ...

  6. Broker流量均衡 prefer reassign

    0.均衡流量的步骤 现在的kafka集群,只要遇到过weibo_common_act2 topic的节点在ZK中丢失,就要prefer一次流量,否则不均匀. 总结均衡流量的一般步骤: 通过hpm查询b ...

  7. [USACO07NOV]挤奶的时间Milking Time

    https://daniu.luogu.org/problemnew/show/2889 按右端点从小到大排序后DP dp[i] 到第i个时间段的最大产奶量 不能按左端点排序,第i段由第j段更新时,第 ...

  8. windows下用python转换markdown到html

    方法一: 安装markdown, pip install markdown, 安装好后,python -m markdown xxx.md -f xxx.html 方法二:安装markdown2, p ...

  9. java.lang.IllegalArgumentException: class com.beisheng.maerte.mode.MyCouponVO declares multiple JSON fields named count

    原因是:子类和父类有相同的字段属性.解决办法:(1)将父类中的该字段去掉(不要),或者在需要打印的字段上加上注解@Expose (2):由于我报错的类都是在jar包里面,所以第一种方法不好使.只好采用 ...

  10. 读后感+资源-----java8函数式编程pdf

    花了两周时间工作之余抽空读完了这本书,对lamdba以及java的理解又有了一个新的认识(装个逼,哈哈) 以前看视频学习的还是太基本了,感觉读书更容易理解背后的设计思想和编程思路 这本书还是挺不错,就 ...