<!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. html5学习(一)--canvas画时钟

    利用空余时间学习一下html5. <!doctype html> <html> <head></head> <body> <canva ...

  2. [java]SpringMVC+Swagger实现自动接口

    项目使用SpringMVC+Maven 1.在站点项目的POM文件中引入Swagger的jar包 <properties> <project.build.sourceEncoding ...

  3. iOS基础 - UITableView的数据源(dataSource)和代理(delegate)

    UITableView的数据源(dataSource)和代理(delegate) UITableView需要一个数据源(dataSource)来显示数据,UITableView会向数据源查询一共有多少 ...

  4. hadoop大数据处理之表与表的连接

    hadoop大数据处理之表与表的连接 前言:  hadoop中表连接其实类似于我们用sqlserver对数据进行跨表查询时运用的inner join一样,两个连接的数据要有关系连接起来,中间必须有一个 ...

  5. CSS3(transform/transition/animation) 基础 总结

    1.CSS3新增的样式(常用) //颜色透明表示rgba(0,0,0,.5) //圆角(定义角半径)border-radius: 5px 10px 15px 20px; //文字/盒子阴影text-s ...

  6. 写入与导出excel

    检索 COM 类工厂中 CLSID 为 {00024500-0000-0000-C000-000000000046} 的组件失败,原因是出现以下错误: 80070005 拒绝访问. (异常来自 HRE ...

  7. 自定义表单-jsonform

    项目文件地址:https://github.com/powmedia/backbone-forms#editor-list DEOM:http://jsfiddle.net/evilcelery/dW ...

  8. How to upload a file in MVC4

    Uploading a file in Asp.Net MVC application is very easy. The posted file is automatically available ...

  9. 企业架构与建模之ArchiMate的由来和详述（上）

    终于完成了关于企业架构框架理论的总结,谢谢各位看官的支持,能挺过之前过于理论化的叙述而坚持到现在着实不易,笔者也自愧没有实践经验可以分享,希望日后有兴趣的看官能够不吝赐教.在本系列后面的也是最后一个大 ...

  10. C++应用程序在Windows下的编译、链接（一）概述

    C++应用程序在Windows下的编译.链接(一)概述 本文是对C++应用程序在Windows下的编译.链接的深入理解和分析,文章的目录如下: 我们先看第一章概述部分. 1概述 1.1编译工具简介 c ...