1、功能描述

　　当用户想要获取验证码时，就点击 免费获取验证码 ，然后开始倒计时，倒计时期间按钮文字为剩余时间x秒，且不可按状态，倒计时结束后，按钮更改为点击重新发送。

2、分析

　　必须用到定时器。按钮点击后，在定时器内做出判断。倒计时60秒，到0结束。

3、代码实现：

　　重点介绍：定时器在进行下一次倒计时之前，一定要清除一下，这样的话保证下一次定时器倒计时是正常的。

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             *{margin: 0;padding: 0;}
  8.             .send{
  9.                 width:250px;
  10.                 margin:0 auto;
  11.             }
  12.             .send input{
  13.                 display: block;
  14.                 width:200px;
  15.                 font:400 16px/30px "微软雅黑";
  16.                 outline: none;
  17.                 border: none;
  18.             }
  19.             .send button{
  20.                 height:30px;
  21.                 border: none;
  22.                 outline: none;
  23.                 font:400 16px/30px "微软雅黑";
  24.                 text-align: center;
  25.             }
  26.         </style>
  27.         <script type="text/javascript">
  28.             window.onload=function(){
  29.                 var button=document.getElementsByTagName("button")[0];
  30.                 button.innerText="免费获取验证码";
  31.                 var timer=null;
  32.                 button.onclick=function(){
  33.                     clearInterval(timer);//这句话至关重要
  34.                     var time=6;
  35.                     var that=this;//习惯
  36.                     timer=setInterval(function(){
  37.                         console.log(time);
  38.                         if(time<=0){
  39.                             that.innerText="";
  40.                             that.innerText="点击重新发送";
  41.                             that.disabled=false;
  42.  
  43.                         }else {
  44.                             that.disabled=true;
  45.                             that.innerText="";
  46.                             that.innerText="剩余时间"+(time)+"秒";
  47.                             time--;
  48.                         }
  49.                     },1000);
  50.                 }
  51.             }
  52.         </script>
  53.     </head>
  54.     <body>
  55.         <div id="send">
  56.             <input type="text" name="in" id="in" value="" /><button></button>
  57.         </div>
  58.     </body>
  59. </html>

JS——实现短信验证码的倒计时功能（没有验证码，只有倒计时）的更多相关文章

  1. iOS打电话、发短信、发邮件功能开发

    本文转载至 http://www.lvtao.net/ios/506.html 今天把APP里常用小功能 例如发短信.发邮件.打电话.全部拿出来简单说说它们的实现思路. 1.发短信实现打电话的功能,主 ...

  2. Android 节日短信送祝福（功能篇：1-数据库操作类与自定义ContentProvider）

    首先,还是展示一下部分目录结构:  在节日短信送祝福的功能实现方面,为了能够方便直观展示实现过程,小编我以Java文件为基础,一个一个来展示,免得到时候这个java文件写点,一下又跳到另外一个java ...

  3. js 发送短信验证码倒计时

    html <input type="button" id="btn" value="免费获取验证码" onclick="se ...

  4. day80:luffy:短信sdk接入&点击获取验证码&注册功能的实现&Celery实现短信发送功能

    目录 1.短信sdk接入 2.前端点击获取验证码效果 3.注册后端接口实现 4.注册-前端 5.Celery 6.Celery完成短信发送功能 1.短信sdk接入 1.准备工作 1.下载云通讯相关的文 ...

  5. js手机短信按钮倒计时

    /*   120秒手机短信按钮倒计时   */    exports.sendmessage = function (name) {        var second = 120; $(name). ...

  6. js 发送短信倒计时、秒杀倒计时实现代码

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

  7. JS发送短信验证码

    <div> <input type="tel" id="mobile" name="mobile" placeholder ...

  8. flask+阿里云短信服务实现注册发送手机验证码

    效果图: 该效果主要讲解实现通过调用阿里云的SDK实现发送注册验证码短信(阿里云短信付费使用) 购买阿里云短信服务 购买链接:https://www.aliyun.com/product/sms 1. ...

  9. Laravel实现大型商城网站之用户注册短信发送项目实战功能开发

    确定短信运营商 我这里采用的云片,不过大家使用其它的也可以. 首先自己注册一个帐号,然后找到这个 点击开始接入,完成新手引导过程. 第二部的签名和模板必须填写,类似我下面填写的这样 值得注意的是这个模 ...

  10. 脚本控制向Android模拟拨打电话，发送短信，定位设置功能

    做行为触发的时候要向模拟器实现拨打电话,发送短信,定位设置的的功能,可以很方便通过telnet localhost  5554实现. 写个脚本很快的搞定了.网上资料很多,脚本的很少,也所积点德啦. 写 ...

随机推荐

  1. 改变vim配色：安装colorscheme【转】

    主要有两种方式安装colorscheme: 自行下载colorscheme安装,下载的文件扩展名通常为.vim. 通过安装相关vim的插件获取. 自行下载colorscheme安装 以mac为例,在系 ...

  2. 用TLS实现安全TCP传输及配置和访问https的web服务(转)

    tls相关 大致原理 为了让两个之间实现安全传输,(我们把服务端统一叫做TcpServer,客户端统一叫做TcpClient),TcpServer在listen完了accept之后要用一个证书来声明自 ...

  3. javase swing

    package com.test; import java.awt.BorderLayout; import java.awt.Color; import java.awt.event.ActionE ...

  4. socket小解

    要理解socket,首先得理解TCP/IP协议族, TCP/IP (Transmission Control Protocol/Internet Protocol)传输控制协议/网间协议 定义: TC ...

  5. JS动态引入js、CSS动态创建script/link/style标签

    一.动态创建link方式 我们可以使用link的方式.如下代码所示. function addCssByLink(url){ var doc=document; var link=doc.create ...

  6. zzuli 1907: 小火山的宝藏收益 邻接表+DFS

    Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 113  Solved: 24 SubmitStatusWeb Board Description    ...

  7. XAMPP(v1.83)中的PHP(v5.5.15)访问SQLServer2014

    驱动安装: 1. 下载SQLServer的微软官方PHP驱动,http://msdn.microsoft.com/en-us/sqlserver/ff657782.aspx 2. 安装SQLSRV31 ...

  8. C++调用com控件方法

    转载自:http://blog.csdn.net/haijun286972766/article/details/6273414 最近要求做一个C++调用com组件的DEMO.由于自己对C++并无研究 ...

  9. boost库之graph入门

    #include <boost/graph/undirected_graph.hpp> #include <boost/graph/adjacency_list.hpp> us ...

  10. HDU4815/计数DP

    题目链接[http://acm.hdu.edu.cn/showproblem.php?pid=4815] 简单说一下题意: 有n道题,每到题答对得分为a[ i ],假如A不输给B的最小概率是P,那么A ...