<!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. glibc-2.19 之 strlen 实现

    前几天遇到一个有意思的问题,实现strlen 不考虑线程安全: 下面是我的实现: size_t strlen(const char* s) { const char* p = s; while (*p ...

  2. 使用指定格式的字符串变量格式化日期字符串，DateAndTime取时间间隔

    private void btn_GetTime_Click(object sender, EventArgs e) { lab_time.Text = DateTime.Now.ToString(& ...

  3. 监听JVM关闭

    使用Runtime的addShutdownHook(thread)方法: for(int i=0; i<5; i++){ System.out.println(i); } Thread th = ...

  4. Navicat Premium 11.0.10破解补丁

    Navicat Premium 11.0.10破解补丁   Navicat Premium 是一个可多重连接的数据库管理工具,让你以单一程序同時连接到 MySQL.SQL Server.SQLite. ...

  5. 对象池化技术 org.apache.commons.pool

    恰当地使用对象池化技术,可以有效地减少对象生成和初始化时的消耗,提高系统的运行效率.Jakarta Commons Pool组件提供了一整套用于实现对象池化的框架,以及若干种各具特色的对象池实现,可以 ...

  6. Java 多线程系列

    要编写线程安全的代码,其核心在于要对状态访问操作进行管理,特别是对共享的(Shared)和可变的(Mutable)状态的访问. Java中的主要同步机制是关键字synchronized,它提供了一种独 ...

  7. 转-Linux系统下安装rz/sz命令及使用说明

    时间: 2013/03/20 | 分类: Linux常用命令 | 作者: 李坏 | 浏览:39,146 | 评论:5   对于经常使用Linux系统的人员来说,少不了将本地的文件上传到服务器或者从服务 ...

  8. linux学习心得之目录树开端与/etc(图文)

    linux学习心得之目录树开端与/etc(图文) linux中“一切皆文件”,学习linux一年了,在学习过程中对目录树的一点心得,分享给大家,有不对的地方敬请斧正. 不多说了,先上图: 根目录: / ...

  9. Easyui + asp.net MVC 系列教程 完成登录

    Easyui + asp.net MVC 系列教程 第09-17 节 完成登录 高清录制 前面八节 在这里 Easyui + asp.net mvc + sqlite 开发教程(录屏)适合入门 在接下 ...

  10. JS左侧菜单-02

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns=" ...