<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><!--强制以webkit内核来渲染-->

     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

     <!--按设备宽度缩放，并且用户不允许手动缩放-->

     <meta name="format-detection" content="telephone=no"><!--不显示拨号链接-->

     <title>非会员未关注</title>

     <link rel="stylesheet" href="css/common.css">

     <link rel="stylesheet" href="css/registered.css">

 </head>

 <body>

     <div class="main">

         <div class="top"></div>

         <div class="form">

             <input type="text" placeholder="请输入您的手机号">

             <div class="yzm">

                 <input type="text" class="left"><span class="right getCode">获取验证码</span>

             </div>

             <div class="btn-xiadan">注册并下单</div>

         </div>

     </div>

     <script>

         function getClass(className) {

             return document.getElementsByClassName(className)[0];

         }

         var getCode=getClass('getCode');

         var countdown={

             timeAll:30,

             state:true,

             //计时器

             clickFun:function (domName) {

                 countdown.state=false;

                 var time=setInterval(function () {

                     domName.innerText="剩余"+countdown.timeAll+"秒";

                     domName.style.backgroundColor="grey";

                     countdown.timeAll=countdown.timeAll-1;

                     if(countdown.timeAll==-1){

                         clearInterval(time);

                         domName.innerText="获取验证码";

                         domName.style.backgroundColor="#f54339";

                         countdown.timeAll=5;

                         countdown.state=true;

                     }

                 },1000)

             }

         };

         getCode.addEventListener('touchstart',function () {

             //防止点击以后还可以继续点击生效加快计时,通过state来判断是否可点击

             if(countdown.state){

                 countdown.clickFun(getCode);

             }

         },false);

     </script>

 </body>

 </html>

个人博客：[**午后南杂**](http://recoluan.gitlab.io)

【原生js】原生js实现验证码短信发送倒计时的更多相关文章

  1. thinkphp 5.0整合阿里大于验证码短信发送接口，含完整模型验证实例DEMO

    为大家分享一个阿里大于短信发送接口: 首先创建一个发送模型(Send.php): <?php namespace app\index\model; use think\Validate; cla ...

  2. jQ效果：jQuery之插件开发短信发送倒计时功能

    实现的主要功能如下: 1.点击按钮的时候,可以进行倒计时,倒计时自定义. 2.当接收短信失败后,倒计时停止,可点击重新发送短信. 3.点击的元素支持一般标签和input标签. html代码: < ...

  3. 短信发送接口demo

    public class SendValidCode { // 短信发送的接口网关 private static String sendUrl = "******************** ...

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

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

  5. laravel中实现短信发送验证码

    前段时间想实现一个短信验证码的功能,但是卡了很长时间. 首先我用的是阿里云的短信服务业务,其首次接入流程如下: 在阿里云上开通短信服务后需要做的: 1,申请签名  2,申请模板   3,创建Acces ...

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

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

  7. PHP 手机短信发送验证码

    点击链接加入群[php/web 学习课堂]:https://jq.qq.com/?_wv=1027&k=5645xiw 欢迎大家加入,一起讨论学习 本篇设计的知识点有点多,我会分类将,同学们可 ...

  8. day102:MoFang:后端完成对短信验证码的校验&基于celery完成异步短信发送&flask_jwt_extended&用户登录的API接口

    目录 1.用户注册 1.后端完成对短信验证码的校验 2.基于celery实现短信异步发送 2.用户登录 1.jwt登录验证:flask_jwt_extended 2.服务端提供用户登录的API接口 1 ...

  9. laravel+阿里大于实现发送验证码短信

    一.短信服务使用阿里大于提供的短信接口 阿里大于官方网站上的接入流程: 在阿里大于申请接口后,需要做以下操作: 申请签名 申请短信模板 创建Accesskey,可以通过权限最大的Accesskey创建 ...

随机推荐

  1. MySql 集群配置

    MYSQL CLUSTER方案介绍 本文的大致框架来自罗志威.黄川的报告, 在它的基础上进行简化和修改一些bug并且添加了主从复制的章节,最后做出该文档 MySQL Cluster 是MySQL适合于 ...

  2. 【推荐】推荐一本学习ExtJS4的好书《ExtJS江湖》（含pdf电子书和源代码下载地址）

    最近在网上游逛,突然发现了一本介绍ExtJS 4框架的好书,书名叫<ExtJS江湖>,作者是大漠穷秋,个人感觉非常不错,书写得很幽默,很具有可读性,在此推荐给各位. 以下是这本书的介绍: ...

  3. Visual Studio 编辑器

    如何扩展 Visual Studio 编辑器 在 Visual Studio 2010 的时代,扩展 Visual Studio 的途径有很多,开发者可以选择宏.Add-in.MEF 和 VSPack ...

  4. Ajax提交底层原型XMLHttpRequest

    相信接触过ajax的都觉得其post,get提交很方便,那么他是怎么实现的呢?基于此我们就不得不谈到js中的XMLHttpRequest对象. 其中w3c中是这样解释的: XMLHttpRequest ...

  5. Windows Phone App Studio发布

    Windows Phone App Studio发布重要更新-支持Windows 8.1 源代码生成 自2013年8月Apps Team发布Windows Phone App Studio以来,由于其 ...

  6. javascript设计模式系列

    javascript设计模式系列   创建型: 1.抽象工厂模式(Abstract Factory) 2.构建者模式(Builder) 3.工厂方法模式(Factory Method) 4.原型模式( ...

  7. WCF 自承载

    WCF 自承载 提供源码 一.WCF 简单介绍 Windows Communication Foundation(WCF)是由微软发展的一组数据通信的应用程序开发接口,是一套通讯接口.现在比较流行的S ...

  8. 状态机图statechart diagram

    [UML]UML系列——状态机图statechart diagram 系列文章 [UML]UML系列——用例图Use Case [UML]UML系列——用例图中的各种关系(include.extend ...

  9. noip模拟赛：电话时间[字符串]

    [问题描述] 某人总是花很多时间给父母打电话.有一次他记录了打电话的开始时间和结束时刻t1和t2,请你帮他算算此次通话一共用了多少秒.又有一次,他记录了打电话的开始时刻t1和通话的时间长度len,请你 ...

  10. LigerUI+MVC的应用1

    [项目开发]LigerUI+MVC的应用(一) 近期因为稍微空闲有点时间,就晚上回家自己在随便写写代码,也就边写边记,中间主要采用了微软的MVC4.0框架.虽然目前公司也是使用的MVC的模式,但是因为 ...