1、功能描述

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

2、分析

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

3、代码实现：

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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{margin: 0;padding: 0;}

            .send{

                width:250px;

                margin:0 auto;

            }

            .send input{

                display: block;

                width:200px;

                font:400 16px/30px "微软雅黑";

                outline: none;

                border: none;

            }

            .send button{

                height:30px;

                border: none;

                outline: none;

                font:400 16px/30px "微软雅黑";

                text-align: center;

            }

        </style>

        <script type="text/javascript">

            window.onload=function(){

                var button=document.getElementsByTagName("button")[0];

                button.innerText="免费获取验证码";

                var timer=null;

                button.onclick=function(){

                    clearInterval(timer);//这句话至关重要

                    var time=6;

                    var that=this;//习惯

                    timer=setInterval(function(){

                        console.log(time);

                        if(time<=0){

                            that.innerText="";

                            that.innerText="点击重新发送";

                            that.disabled=false;

                        }else {

                            that.disabled=true;

                            that.innerText="";

                            that.innerText="剩余时间"+(time)+"秒";

                            time--;

                        }

                    },1000);

                }

            }

        </script>

    </head>

    <body>

        <div id="send">

            <input type="text" name="in" id="in" value="" /><button></button>

        </div>

    </body>

</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. 状压dp Codeforces Beta Round #8 C

    http://codeforces.com/contest/8/problem/C 题目大意:给你一个坐标系,给你一个人的目前的坐标(该坐标也是垃圾桶的坐标),再给你n个垃圾的坐标,这个人要捡完所有的 ...

  2. network: 思科-华为光模块

    思科-华为光模块的分类比较   摘要:本文介绍:思科GLC-SX-MM,GLC-LH-SM光模块等产品参数与图片,华为光模块的型号与分类等知识. 光模块分类与介绍 一.思科厂家 1.多模光模块 型号: ...

  3. Android sdk content loader

    方法一(关闭后重启): 遇到Eclipse右下角一直显示“Android sdk content loader 0%”的情况时,直接关掉Eclipse,有ADB进程在运行时通过进程管理器结束进程,然后 ...

  4. .net网站报错：对象的当前状态使该操作无效

    微软在2011年12月29号发布的2011年最后一个更新让哥哥为程序出现的异常头痛了一天． 这个异常在页面数据量小的时候并不会触发,只在页面数据量大的情况下才会出现,开始解决起来让人无从下手,最后才发 ...

  5. 四种xml的解析方式

    这篇文章是我上网找资料,加上自己总结了一些而得 资料来源: http://www.cnblogs.com/allenzheng/archive/2012/12/01/2797196.html http ...

  6. Enum 枚举基础

    1 定义一个枚举 enum Weekend { Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday } 2 得到每个枚举值 f ...

  7. GDT、GDTR、LDT、LDTR的理解

    GDT是全局描述附表,主要存放操作系统和各任务公用的描述符,如公用的数据和代码段描述符.各任务的TSS描述符和LDT描述符.(TSS是任务状态段,存放各个任务私有运行状态信息描述符)LDT是局部描述符 ...

  8. 会话管理---Cookie与Session

    会话可简单理解为:用户开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一个会话. 保存会话数据的两种技术:Cookie,Session Cookie是客户端技术, ...

  9. 通过intent启动Activity

    android应用程序内部通过Intent来实现Activity间的跳转.也知道通过Intent调用系统程序.但若想在应用程序A内开启应用程序B(前提是A.B均已安装),该如何去实现? 记录下实现过程 ...

  10. sessionStorage用于分页，瀑布流和存储用户数据等

    在手机网页开发中,会用到分页和瀑布流来分量显示数据.这里会遇到一个问题.当点击某条数据进入详情后,再按手机的返回键会到上一个页面,该页面是重新加载的. 本人在微信里用内置的qq浏览器打开页面,wind ...