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 相关文章推荐
页面加载完毕后滚动条自动滚动一定位置
Feb 20 Javascript
jQuery.holdReady()使用方法
May 20 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
Sep 04 Javascript
浅谈JavaScript数据类型及转换
Feb 28 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
Aug 24 Javascript
AngularJS+Node.js实现在线聊天室
Aug 28 Javascript
Vue.js进阶知识点总结
Apr 01 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
May 31 Javascript
JavaScript惰性求值的一种实现方法示例
Jan 11 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
Aug 26 Javascript
a标签调用js的方法总结
Sep 05 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
Dec 08 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 resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)
2016/05/12 PHP
PHP之图片上传类实例代码(加了缩略图)
2016/06/30 PHP
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
2017/05/26 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
javascript 系统文件夹文件操作及参数介绍
2013/01/08 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
2013/03/15 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
JavaScript 基本概念
2015/01/20 Javascript
JavaScript中Function函数与Object对象的关系
2015/12/17 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
2016/02/25 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
Vue.js实现数据响应的方法
2018/08/13 Javascript
vue实现条件判断动态绑定样式的方法
2018/09/29 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
小程序实现横向滑动日历效果
2019/10/21 Javascript
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
基于python时间处理方法(详解)
2017/08/14 Python
Python3实现的爬虫爬取数据并存入mysql数据库操作示例
2018/06/06 Python
Python3.5内置模块之random模块用法实例分析
2019/04/26 Python
python实现文件的备份流程详解
2019/06/18 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
Django如何使用asyncio协程和ThreadPoolExecutor多线程
2020/10/12 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
时尚的CSS3进度条效果
2012/02/22 HTML / CSS
一款利用纯css3实现的超炫3D表单的实例教程
2014/12/01 HTML / CSS
节能宣传周活动总结
2014/05/08 职场文书
公司开除员工通知
2015/04/22 职场文书
趣味运动会新闻稿
2015/07/17 职场文书
python基础之错误和异常处理
2021/10/24 Python
SpringBoot连接MySQL获取数据写后端接口的操作方法
2021/11/02 MySQL
漫画「你在春天醒来」第10卷封面公开
2022/03/21 日漫
python实现商品进销存管理系统
2022/05/30 Python