【原生js】原生js实现验证码短信发送倒计时
<!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实现验证码短信发送倒计时的更多相关文章
- thinkphp 5.0整合阿里大于验证码短信发送接口,含完整模型验证实例DEMO
为大家分享一个阿里大于短信发送接口: 首先创建一个发送模型(Send.php): <?php namespace app\index\model; use think\Validate; cla ...
- jQ效果:jQuery之插件开发短信发送倒计时功能
实现的主要功能如下: 1.点击按钮的时候,可以进行倒计时,倒计时自定义. 2.当接收短信失败后,倒计时停止,可点击重新发送短信. 3.点击的元素支持一般标签和input标签. html代码: < ...
- 短信发送接口demo
public class SendValidCode { // 短信发送的接口网关 private static String sendUrl = "******************** ...
- js手机短信按钮倒计时
/* 120秒手机短信按钮倒计时 */ exports.sendmessage = function (name) { var second = 120; $(name). ...
- laravel中实现短信发送验证码
前段时间想实现一个短信验证码的功能,但是卡了很长时间. 首先我用的是阿里云的短信服务业务,其首次接入流程如下: 在阿里云上开通短信服务后需要做的: 1,申请签名 2,申请模板 3,创建Acces ...
- day80:luffy:短信sdk接入&点击获取验证码&注册功能的实现&Celery实现短信发送功能
目录 1.短信sdk接入 2.前端点击获取验证码效果 3.注册后端接口实现 4.注册-前端 5.Celery 6.Celery完成短信发送功能 1.短信sdk接入 1.准备工作 1.下载云通讯相关的文 ...
- PHP 手机短信发送验证码
点击链接加入群[php/web 学习课堂]:https://jq.qq.com/?_wv=1027&k=5645xiw 欢迎大家加入,一起讨论学习 本篇设计的知识点有点多,我会分类将,同学们可 ...
- day102:MoFang:后端完成对短信验证码的校验&基于celery完成异步短信发送&flask_jwt_extended&用户登录的API接口
目录 1.用户注册 1.后端完成对短信验证码的校验 2.基于celery实现短信异步发送 2.用户登录 1.jwt登录验证:flask_jwt_extended 2.服务端提供用户登录的API接口 1 ...
- laravel+阿里大于实现发送验证码短信
一.短信服务使用阿里大于提供的短信接口 阿里大于官方网站上的接入流程: 在阿里大于申请接口后,需要做以下操作: 申请签名 申请短信模板 创建Accesskey,可以通过权限最大的Accesskey创建 ...
随机推荐
- BrnShop:自定义插件
BrnShop开源网上商城第四讲:自定义插件 重要通知:BrnShop企业版NOSQL设计(基于Redis)已经开源!源码内置于最新版的BrnShop中,感兴趣的园友可以去下载来看看.官网地址:www ...
- Javascript多线程引擎(四)
Javascript多线程引擎(四)--之C语言单继承 因为使用C语言做为开发语言, 而C语言在类的支持方面几乎为零, 而Javascript语言的Object类型是一个非常明显的类支持对象,所以这里 ...
- 事件处理(Event Handlers) ng-click操作
事件处理(Event Handlers) ng-click操作 step 10 本文主要通过介绍ng-click方法来对angularjs中的事件处理方法做个了解. 1.切换目录 git checko ...
- 【推荐】30个Matlab视频教程合集(含GUI视频教程)下载
自己收集别人网盘上存的资源,分享一下[点击文件名可得到下载地址] Matlab 7.8 基础视频教程 实例1 数据传递和多窗口编程_avi.zip 205.11 MB Matlab ...
- SET IDENTITY_INSERT详解
声明:本博文摘自http://www.lmwlove.com/ac/ID500 自增列默认是不能插入显式值的,当我们试图给自增列插入值时,会报以下错误:当 IDENTITY_INSERT 设置为 OF ...
- C#自动选择出系统中最合适的IP地址
写这个是因为很长时间以来,碰到过很多次这个问题,但都没当回事,这次又碰到了这个老问题,无奈百度了一圈儿未果,身边又没有大牛可以请教,就自己先“总结”了一套方法,一来给自己记录,二来如果碰巧能有朋友看到 ...
- js读取 存入cookie
<script language=javascript> //获得coolie 的值 function cookie(name){ var cookieArray=document.coo ...
- CentOS 6下安装nodejs 0.9.0(转)
确保安装了python,大部分安装失败都是由于python版本过低导致.安装之前,升级python版本,升级步骤 http://www.tomtalk.net/wiki/Python. [root@S ...
- 3分钟教你做一个iphone手机浏览器
3分钟教你做一个iphone手机浏览器 第一步:新建一个Single View工程: 第二步:新建好工程,关闭arc. 第三步:拖放一个Text Field 一个UIButton 和一个 UIWebV ...
- CF 332A Down the Hatch! 超级水题。。不过题目太长了
A. Down the Hatch! time limit per test 2 seconds memory limit per test 256 megabytes input standard ...