JS实现简单短信验证码界面


Posted in Javascript onAugust 07, 2017

1.要实现短信验证码界面,首先要有一个文本框,旁边是按钮,点击时开始倒计时。

2.先创建文本框和按钮,按钮设置对应的id,然后在js中通过id获取按钮这个元素,对其执行操作。同时应设置倒计时时间以及计时器变量,并使点击发送按钮后倒计时结束前无法继续点击按钮重新发送。

3.倒计时结束后,清除计时器,并使文字改变为“重新发送验证码”,恢复对按钮能操作的功能,同时使倒计时的数从5秒重新开始以便点击后重新倒计时。

<head> 
  <meta charset="UTF-8"> 
  <title>js发送短信验证码</title> 
</head> 
<body> 
  <input type="text"/><button id="bt01">发送验证码</button> 
</body> 
<script type="text/javascript"> 
  var bt01 = document.getElementById("bt01"); 
  bt01.onclick = function() { 
    bt01.disabled = true;  //当点击后倒计时时候不能点击此按钮 
    var time = 5;  //倒计时5秒 
    var timer = setInterval(fun1, 1000);  //设置定时器 
    function fun1() { 
      time--; 
      if(time>=0) { 
        bt01.innerHTML = time + "s后重新发送"; 
      }else{ 
        bt01.innerHTML = "重新发送验证码"; 
        bt01.disabled = false;  //倒计时结束能够重新点击发送的按钮 
        clearTimeout(timer);  //清除定时器 
        time = 5;  //设置循环重新开始条件 
      } 
    } 
  } 
</script>

总结

以上所述是小编给大家介绍的JS实现简单短信验证码界面,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
extjs fckeditor集成代码
May 10 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
Apr 08 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
May 07 Javascript
JS 60秒后重新发送验证码的实例讲解
Jul 26 Javascript
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
Feb 09 Javascript
js控制随机数生成概率代码实例
Mar 21 Javascript
vue使用axios上传文件(FormData)的方法
Apr 14 Javascript
vue.js实现简单的计算器功能
Feb 22 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
Mar 10 Javascript
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
ReactNative Image组件使用详解
Aug 07 #Javascript
JS实现移动端判断上拉和下滑功能
Aug 07 #Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 #Javascript
JS判断微信扫码的方法
Aug 07 #Javascript
AngularJs每天学习之总体介绍
Aug 07 #Javascript
关于webpack2和模块打包的新手指南(小结)
Aug 07 #Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
Aug 07 #Javascript
You might like
php多文件上传下载示例分享
2014/02/20 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十四)
2014/06/26 PHP
php缩放gif和png图透明背景变成黑色的解决方法
2014/10/14 PHP
php版微信开发之接收消息,自动判断及回复相应消息的方法
2016/09/23 PHP
Laravel5.5 视图 - 创建视图和数据传递示例
2019/10/21 PHP
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
myFocus slide3D v1.1.0 使用方法与下载
2011/01/12 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
js设置组合快捷键/tabindex功能的方法
2013/11/21 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
2015/04/03 Javascript
JQuery工具函数汇总
2015/06/15 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
vue 路由子组件created和mounted不起作用的解决方法
2019/11/05 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
[44:37]完美世界DOTA2联赛PWL S3 Forest vs access 第一场 12.11
2020/12/13 DOTA
让 python 命令行也可以自动补全
2014/11/30 Python
Python简单获取自身外网IP的方法
2016/09/18 Python
ubuntu系统下 python链接mysql数据库的方法
2017/01/09 Python
Python爬虫_城市公交、地铁站点和线路数据采集实例
2018/01/10 Python
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
Python中str.join()简单用法示例
2018/03/20 Python
初次部署django+gunicorn+nginx的方法步骤
2019/09/11 Python
python ubplot使用方法解析
2020/01/10 Python
Python for循环通过序列索引迭代过程解析
2020/02/07 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
Contém1g官网:巴西彩妆品牌
2020/01/17 全球购物
MYSQL支持事务吗
2013/08/09 面试题
教师节促销活动方案
2014/02/14 职场文书
优秀教师个人材料
2014/12/15 职场文书
物业客服专员岗位职责
2015/04/07 职场文书
2016国庆节67周年红领巾广播稿
2015/12/18 职场文书