倒计时

倒计时常用于发送验证码

前端代码如下：

<!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. 题解 P2486 【[SDOI2011]染色】

    写在前面 对于刚学树剖的同学比如我这种大大大蒟蒻来说,做这题会给你带来很大的提升:不仅可以对树剖有更深刻的理解,还可以更好的理解线段树,所以这是一道好题哦 为了更好懂,我一点一点说说思路吧 思路 首先 ...

  2. SourceTree使用SSH克隆码云项目

    SourceTree使用SSH克隆码云项目 觉得有用的话,欢迎一起讨论相互学习~Follow Me SourceTree使用SSH克隆码云项目 参考文献 https://blog.csdn.net/q ...

  3. vuejs2.0 vue实例的生命周期

    每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 DOM .下图展示的就是一个v ...

  4. codevs 1540 1540 银河英雄传说

    1540 银河英雄传说 题目描述 Description 公元五八○一年,地球居民迁移至金牛座α第二行星,在那里发表银河联邦创立宣言,同年改元为宇宙历元年,并开始向银河系深处拓展. 宇宙历七九九年,银 ...

  5. HDU 1715 大斐波数 加法高精度

    解题报告:求 斐波那契数,不过这题的n的范围是1000,肯定是早就超过了的,所以要用到高精度,所以这题其实就是一个加法高精度的题. 我的做法 是写一个大数相加的函数,然后打表就是了,这里注意的就是每次 ...

  6. c++刷题（15/100）矩阵转置，最深子树

    题目一:矩阵转置 给定一个矩阵 A, 返回 A 的转置矩阵. 矩阵的转置是指将矩阵的主对角线翻转,交换矩阵的行索引与列索引. 示例 1: 输入:[[1,2,3],[4,5,6],[7,8,9]] 输出 ...

  7. Python练习-天已经亮了计算器也终于完成了

    # 编辑者:闫龙 import re #导入re模块(正则表达式) calc2 = "1-2*((60-30+(-40/52)*(9-2*5/3+7/3*-99/4*2998+10*568/ ...

  8. ubuntu安装Android Studio开发环境

    1.下载 https://developer.android.com/studio/ 2.解压文件,将文件夹copy到/opt/ 3.进入/opt/android-studio/bin,运行./stu ...

  9. IIS8.0 配置应用程序初始化功能

    IIS进程回收后,第一次访问会超级慢,这对于用户是不能接受的,怎么解决这个问题? 我们不能设置IIS不回收进程,因为这样可能会导致IIS内存泄漏.有效的方法时,尽量在业务空闲时间回收进程,回收后立刻预 ...

  10. C++ Primer 5th 第19章 特殊工具与技术

    C++是一种通用型语言,其设计者希望它能处理各种各样的问题,因此除了一些能适用于所有问题的语言特性,还有一些适用于特定问题的特性. 控制内存分配 某些程序对内存分配有着特殊的需求,它们不适合使用标准的 ...