<!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. ODBC操作数据库

    /*ODBC使用步骤:(ODBC数据源由微软平台提供) * 1.配置ODBC数据源(控制面板->管理工具->ODBC数据源) * 2.加载并注册驱动程序,导入java.sql.*包 * 3 ...

  2. Carmichael Numbers - PC110702

    欢迎访问我的新博客:http://www.milkcu.com/blog/ 原文地址:http://www.milkcu.com/blog/archives/uva10006.html 原创:Carm ...

  3. 统计重1到n的正整数中1的个数

    问题: 给定一个十进制正整数N,写下从1开始,到N的所有整数,然后数一下其中出现的所有“1”的个数. 例如:N= 2,写下1,2.这样只出现了1个“1”. N= 12,我们会写下1, 2, 3, 4, ...

  4. pearl（二分查找，stl）

    最近大概把有关二分的题目都看了一遍... 嗯..这题是二分查找...二分查找的代码都类似,所以打起来会水很多 但是刚开始打二分还是很容易写挂..所以依旧需要注意 题2 天堂的珍珠 [题目描述] 我有很 ...

  5. WebForm和Asp.Net MVC的理解

    我对WebForm和Asp.Net MVC的理解   比较WebForm和Mvc的请求处理方式 首先简单了解一下Asp.Net中怎么对页面进行请求处理的: 在管道的第7-8个事件之间,有一个MapHt ...

  6. vim插件：显示树形目录插件NERDTree安装 和 使用

    下载和配置 NERDTree插件的官方地址如下,可以从这里获取最新的版本 https://github.com/scrooloose/nerdtree 下载zip安装包 或者使用下面官网源文件安装方法 ...

  7. nginx开启后主机无法访问虚拟机的nginx解决方案

    如果IP可以通的话 一般是防火墙引起 方法1.cat /etc/sysconfig/iptables # Generated by iptables-save v1. :: *filter :INPU ...

  8. synchronized简介

    synchronized简介 Java提供了一种内置的锁机制来支持原子性:同步代码块(Synchronized Block).同步代码块包括两部分:一个作为锁对象的引用,一个作为由这个锁保护的代码块. ...

  9. [转载]linux下编译php中configure参数具体含义

    编译N次了   原来这么回事 原文地址:linux下编译php中configure参数具体含义作者:捷心特 php编译参数的含义 ./configure –prefix=/usr/local/php ...

  10. kivy Create an application

    http://kivy.org/docs/guide/basic.html#quickstart I followed this tutorial about how to create basic ...