JS——实现短信验证码的倒计时功能(没有验证码,只有倒计时)
1、功能描述
当用户想要获取验证码时,就点击 免费获取验证码 ,然后开始倒计时,倒计时期间按钮文字为剩余时间x秒,且不可按状态,倒计时结束后,按钮更改为点击重新发送。
2、分析
必须用到定时器。按钮点击后,在定时器内做出判断。倒计时60秒,到0结束。
3、代码实现:
重点介绍:定时器在进行下一次倒计时之前,一定要清除一下,这样的话保证下一次定时器倒计时是正常的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
.send{
width:250px;
margin:0 auto;
}
.send input{
display: block;
width:200px;
font:400 16px/30px "微软雅黑";
outline: none;
border: none;
}
.send button{
height:30px;
border: none;
outline: none;
font:400 16px/30px "微软雅黑";
text-align: center;
}
</style>
<script type="text/javascript">
window.onload=function(){
var button=document.getElementsByTagName("button")[0];
button.innerText="免费获取验证码";
var timer=null;
button.onclick=function(){
clearInterval(timer);//这句话至关重要
var time=6;
var that=this;//习惯
timer=setInterval(function(){
console.log(time);
if(time<=0){
that.innerText="";
that.innerText="点击重新发送";
that.disabled=false; }else {
that.disabled=true;
that.innerText="";
that.innerText="剩余时间"+(time)+"秒";
time--;
}
},1000);
}
}
</script>
</head>
<body>
<div id="send">
<input type="text" name="in" id="in" value="" /><button></button>
</div>
</body>
</html>
JS——实现短信验证码的倒计时功能(没有验证码,只有倒计时)的更多相关文章
- iOS打电话、发短信、发邮件功能开发
本文转载至 http://www.lvtao.net/ios/506.html 今天把APP里常用小功能 例如发短信.发邮件.打电话.全部拿出来简单说说它们的实现思路. 1.发短信实现打电话的功能,主 ...
- Android 节日短信送祝福(功能篇:1-数据库操作类与自定义ContentProvider)
首先,还是展示一下部分目录结构: 在节日短信送祝福的功能实现方面,为了能够方便直观展示实现过程,小编我以Java文件为基础,一个一个来展示,免得到时候这个java文件写点,一下又跳到另外一个java ...
- js 发送短信验证码倒计时
html <input type="button" id="btn" value="免费获取验证码" onclick="se ...
- day80:luffy:短信sdk接入&点击获取验证码&注册功能的实现&Celery实现短信发送功能
目录 1.短信sdk接入 2.前端点击获取验证码效果 3.注册后端接口实现 4.注册-前端 5.Celery 6.Celery完成短信发送功能 1.短信sdk接入 1.准备工作 1.下载云通讯相关的文 ...
- js手机短信按钮倒计时
/* 120秒手机短信按钮倒计时 */ exports.sendmessage = function (name) { var second = 120; $(name). ...
- js 发送短信倒计时、秒杀倒计时实现代码
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...
- JS发送短信验证码
<div> <input type="tel" id="mobile" name="mobile" placeholder ...
- flask+阿里云短信服务实现注册发送手机验证码
效果图: 该效果主要讲解实现通过调用阿里云的SDK实现发送注册验证码短信(阿里云短信付费使用) 购买阿里云短信服务 购买链接:https://www.aliyun.com/product/sms 1. ...
- Laravel实现大型商城网站之用户注册短信发送项目实战功能开发
确定短信运营商 我这里采用的云片,不过大家使用其它的也可以. 首先自己注册一个帐号,然后找到这个 点击开始接入,完成新手引导过程. 第二部的签名和模板必须填写,类似我下面填写的这样 值得注意的是这个模 ...
- 脚本控制向Android模拟拨打电话,发送短信,定位设置功能
做行为触发的时候要向模拟器实现拨打电话,发送短信,定位设置的的功能,可以很方便通过telnet localhost 5554实现. 写个脚本很快的搞定了.网上资料很多,脚本的很少,也所积点德啦. 写 ...
随机推荐
- 改变vim配色:安装colorscheme【转】
主要有两种方式安装colorscheme: 自行下载colorscheme安装,下载的文件扩展名通常为.vim. 通过安装相关vim的插件获取. 自行下载colorscheme安装 以mac为例,在系 ...
- 用TLS实现安全TCP传输及配置和访问https的web服务(转)
tls相关 大致原理 为了让两个之间实现安全传输,(我们把服务端统一叫做TcpServer,客户端统一叫做TcpClient),TcpServer在listen完了accept之后要用一个证书来声明自 ...
- javase swing
package com.test; import java.awt.BorderLayout; import java.awt.Color; import java.awt.event.ActionE ...
- socket小解
要理解socket,首先得理解TCP/IP协议族, TCP/IP (Transmission Control Protocol/Internet Protocol)传输控制协议/网间协议 定义: TC ...
- JS动态引入js、CSS动态创建script/link/style标签
一.动态创建link方式 我们可以使用link的方式.如下代码所示. function addCssByLink(url){ var doc=document; var link=doc.create ...
- zzuli 1907: 小火山的宝藏收益 邻接表+DFS
Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 113 Solved: 24 SubmitStatusWeb Board Description ...
- XAMPP(v1.83)中的PHP(v5.5.15)访问SQLServer2014
驱动安装: 1. 下载SQLServer的微软官方PHP驱动,http://msdn.microsoft.com/en-us/sqlserver/ff657782.aspx 2. 安装SQLSRV31 ...
- C++调用com控件方法
转载自:http://blog.csdn.net/haijun286972766/article/details/6273414 最近要求做一个C++调用com组件的DEMO.由于自己对C++并无研究 ...
- boost库之graph入门
#include <boost/graph/undirected_graph.hpp> #include <boost/graph/adjacency_list.hpp> us ...
- HDU4815/计数DP
题目链接[http://acm.hdu.edu.cn/showproblem.php?pid=4815] 简单说一下题意: 有n道题,每到题答对得分为a[ i ],假如A不输给B的最小概率是P,那么A ...