<!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. gulp package.json

    { "name": "gulpAngular1", "version": "0.0.0", "dependen ...

  2. FileWriter字符输出流和FileReader字符输出流

    //FileWriter public class FileWriterDemo { //字符流:适用于文本文件,以字符为单位进行操作,经常和缓冲流一起使用 /**  * 字符流操作步骤:  * 1. ...

  3. strus2 action重复执行问题

    近日做项目,有两个模块功能类似,就写到了一个action中,方法起名为getXXX1,getXXX2 最后在两个模块去调用的时候,分别调用DemoAction!getXXX1.action和DemoA ...

  4. jQuery的入门与简介

    jQuery的入门与简介<思维导图>   <初学者请各位高手指点指点> jQuery是继Prototype之后又一个优秀的JavaScript库,在JavaScript基础上我 ...

  5. sql 数据库的备份还原问题

    今天工作中犯了一个严重的错误,就是在sql中写了一个update语句,还没写条件呢,结果误按了F5,唉,太佩服自己啦...这个脑子怎么不管用了呢?? 唉不说了,我在网上翻来覆去的找资料,最终想是不是可 ...

  6. BEncoding的编码与解码

    BEncoding的编码与解码   1. BEncoding规则 BEncoding是BitTorrent用在传输数据结构的编码方式,我们最熟悉的“种子”文件,它里面的元数据就是 BEncoding ...

  7. 【July】从头到尾彻底理解KMP

    从头到尾彻底理解KMP 作者:July时间:最初写于2011年12月,2014年7月21日晚10点 全部删除重写成此文,随后的半个多月不断反复改进. 1. 引言 本KMP原文最初写于2年多前的2011 ...

  8. OpenCascade

    Hello World of OpenCascade   Hello World of OpenCascade eryar@163.com 摘要Abstract:以一个经典的Hello World程序 ...

  9. CSS3 3D笨蛋教程

    英文原文An Introduction to CSS 3-D Transforms 爱因斯坦说所有概念都必须介绍给儿童们,若他们无法了解,这些理论就毫无价值. 透视 一个元素需要一个透视点才能激活3D ...

  10. JavaScript 实现文本编辑器

    JavaScript 实现文本编辑器 最近,我需要做一个非常基本的网页内容编辑功能.我不想使用 iframe ,我也不想要一个功能特别多的复杂编辑器,只需要很基本的内容编辑功能,例如粗体,斜体,列表, ...