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 相关文章推荐
Add a Picture to a Microsoft Word Document
Jun 15 Javascript
javascript 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
Javascript图像处理思路及实现代码
Dec 25 Javascript
利用div+jquery自定义滚动条样式的2种方法
Jul 18 Javascript
JS实现OCX控件的事件响应示例
Sep 17 Javascript
浅析node连接数据库(express+mysql)
Nov 30 Javascript
js确认框confirm()用法实例详解
Jan 07 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
Sep 17 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
Apr 18 Javascript
H5手机端多文件上传预览插件
Apr 21 Javascript
JavaScript之class继承_动力节点Java学院整理
Jul 03 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 Javascript
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
星际玩家的三大定律
2020/03/04 星际争霸
PHP数据类型的总结分析
2013/06/13 PHP
php 读取文件头判断文件类型的实现代码
2013/08/05 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
JQuery 学习笔记01 JQuery初接触
2010/05/06 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
2013/10/12 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
JQuery删除DOM节点的方法
2015/06/11 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
2016/10/28 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
2017/02/27 Javascript
React 无状态组件(Stateless Component) 与高阶组件
2018/08/14 Javascript
javascript面向对象三大特征之继承实例详解
2019/07/24 Javascript
从0搭建vue-cli4脚手架
2020/06/17 Javascript
Python Socket编程入门教程
2014/07/11 Python
Python下使用Psyco模块优化运行速度
2015/04/05 Python
Python编程中使用Pillow来处理图像的基础教程
2015/11/20 Python
使用Python快速制作可视化报表的方法
2019/02/03 Python
Python数据结构dict常用操作代码实例
2020/03/12 Python
结束运行python的方法
2020/06/16 Python
django 模型字段设置默认值代码
2020/07/15 Python
Swanson中国官网:美国斯旺森健康产品公司
2021/03/01 全球购物
PHP使用Redis队列执行定时任务实例讲解
2021/03/24 PHP
大学生优秀的自我评价分享
2013/10/22 职场文书
教育局长自荐信范文
2013/12/22 职场文书
学习保证书范文
2014/04/30 职场文书
外贸业务员求职信
2014/06/16 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
交警失职检讨书
2015/01/26 职场文书
员工试用期转正自我评价
2015/03/10 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
高中历史教学反思
2016/02/19 职场文书
婚前协议书怎么写,才具有法律效力呢 ?
2019/06/28 职场文书
熟背这些句子,让您的英语口语突飞猛进(135句)
2019/09/06 职场文书
详解Vue slot插槽
2021/11/20 Vue.js