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 相关文章推荐
各浏览器对click方法的支持差异小结
Jul 31 Javascript
来自国外的30个基于jquery的Web下拉菜单
Jun 22 Javascript
Jquery index()方法 获取相应元素索引值
Oct 12 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
Feb 05 Javascript
jquery配合css简单实现返回顶部效果
Sep 30 Javascript
jQuery中的$.ajax()方法应用
May 06 Javascript
纯javascript响应式树形菜单效果
Nov 10 Javascript
Js获取图片原始宽高的实现代码
May 17 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
May 26 Javascript
基于vue的验证码组件的示例代码
Jan 22 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 28 Javascript
JavaScript中callee和caller的区别与用法实例分析
Jun 28 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
DC《小丑》11项提名领跑奥斯卡 Netflix成第92届奥斯卡提名最大赢家
2020/04/09 欧美动漫
深入理解PHP之require/include顺序 推荐
2011/01/02 PHP
php定时执行任务设置详解
2015/02/06 PHP
PHP实现的简单mock json脚本分享
2015/02/10 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
微信支付的开发流程详解
2016/09/13 PHP
PHP数组基本用法与知识点总结
2020/06/02 PHP
(function($){...})(jQuery)的意思
2010/07/22 Javascript
JQuery右键菜单插件ContextMenu使用指南
2014/12/19 Javascript
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
2016/08/11 Javascript
jQuery弹出遮罩层效果完整示例
2016/09/13 Javascript
JQuery中Ajax的操作完整例子
2017/03/07 Javascript
vue货币过滤器的实现方法
2017/04/01 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
2017/04/20 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
vue+axios新手实践实现登陆的示例代码
2018/06/06 Javascript
JS实现可针对算术表达式求值的计算器功能示例
2018/09/04 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
python下调用pytesseract识别某网站验证码的实现方法
2016/06/06 Python
python循环嵌套的多种使用方法解析
2019/11/29 Python
CSS实现雨滴动画效果的实例代码
2019/10/08 HTML / CSS
Old Navy加拿大官网:美式休闲服饰品牌
2017/09/26 全球购物
支教自我鉴定
2014/01/18 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
1000字打架检讨书
2014/11/03 职场文书
中班下学期幼儿评语
2014/12/30 职场文书
立项申请报告范本
2015/05/15 职场文书
首都博物馆观后感
2015/06/05 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书