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 相关文章推荐
jquery中获取select选中值的代码
Jun 27 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
javascript实现九宫格相加数值相等
May 28 Javascript
vue监听滚动事件实现滚动监听
Apr 11 Javascript
vue代理和跨域问题的解决
Jul 18 Javascript
angular 服务的单例模式(依赖注入模式下)详解
Oct 22 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
Jan 14 Javascript
微信小程序API—获取定位的详解
Apr 30 Javascript
react实现移动端下拉菜单的示例代码
Jan 16 Javascript
微信小程序实现带放大效果的轮播图
May 26 Javascript
Vue 组件复用多次自定义参数操作
Jul 27 Javascript
原生JS实现京东查看商品点击放大
Dec 21 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
php.ini 中文版
2006/10/28 PHP
深入HTTP响应状态码速查表的详解
2013/06/07 PHP
php实现下载限制速度示例分享
2014/02/13 PHP
YII2框架中查询生成器Query()的使用方法示例
2020/03/18 PHP
jquery中常用的SET和GET
2009/01/13 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
JavaScript函数的4种调用方法详解
2014/04/22 Javascript
js限制文本框只能输入整数或者带小数点的数字
2015/04/27 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
在JavaScript中模拟类(class)及类的继承关系
2016/05/20 Javascript
javaScript知识点总结(必看篇)
2016/06/10 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
JavaScript中跨域问题的深入理解
2021/03/04 Javascript
Python collections模块实例讲解
2014/04/07 Python
Python检测QQ在线状态的方法
2015/05/09 Python
python3序列化与反序列化用法实例
2015/05/26 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
Python模块的制作方法实例分析
2019/12/21 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
Python实现汇率转换操作
2020/05/03 Python
Keras 加载已经训练好的模型进行预测操作
2020/06/17 Python
详解Python 最短匹配模式
2020/07/29 Python
简述python Scrapy框架
2020/08/17 Python
爬虫代理的cookie如何生成运行
2020/09/22 Python
Python的logging模块基本用法
2020/12/24 Python
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
什么是SCM(软件配置管理)
2014/08/16 面试题
新闻学专业大学生职业生涯规划范文
2014/03/02 职场文书
祖国在我心中的演讲稿
2014/05/04 职场文书
十佳文明家庭事迹
2014/05/25 职场文书
供应链金融服务方案
2014/05/25 职场文书
2014年卫生院工作总结
2014/12/03 职场文书
企业投资意向书
2015/05/09 职场文书
2016春季运动会开幕词
2016/03/04 职场文书