JS+HTML5实现获取手机验证码倒计时按钮


Posted in Javascript onAugust 08, 2018

效果图如下所示:

JS+HTML5实现获取手机验证码倒计时按钮

HTML:

<input type="button" value="获取验证码">

CSS:

input[type=button]
  width: 150px;
  height: 30px;
  background-color: #ff3000;
  border: 0;
  border-radius: 15px;
  color: #fff;
 }
 input[type=button].on {
  background-color: #eee;
  color: #ccc;
  cursor: not-allowed;
 }

JavaScript:

$("input[type='button']").click(btnCheck);
  /**
  * [btnCheck 按钮倒计时常用于获取手机短信验证码]
  */
  function btnCheck() {
   $(this).addClass("on");
   var time = 5;
   $(this).attr("disabled", true);
   var timer = setInterval(function() {
    if (time == 0) {
     clearInterval(timer);
     $("input").attr("disabled", false);
     $("input").val("获取验证码");
     $("input").removeClass("on");
    } else {
     $('input').val(time + "秒");
     time--;
    }
   }, 1000);
  }

GitHub:Fuck me on GitHub Fuck me on GitHub

总结

以上所述是小编给大家介绍的JS+HTML5实现获取手机验证码倒计时按钮,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery拖动图片删除示例
May 10 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
Jan 15 Javascript
node.js中的fs.lstat方法使用说明
Dec 16 Javascript
javascript正则表达式中分组详解
Jul 17 Javascript
jquery动态遍历Json对象的属性和值的方法
Jul 27 Javascript
JS弹性运动实现方法分析
Dec 15 Javascript
AngularJS自定义指令详解(有分页插件代码)
Jun 12 Javascript
react实现菜单权限控制的方法
Dec 11 Javascript
解决vue router组件状态刷新消失的问题
Aug 01 Javascript
JS出现404错误原理及解决方案
Jul 01 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
js实现简单商品筛选功能
Feb 02 Javascript
JS的Ajax与后端交互数据的实例
Aug 08 #Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 #jQuery
JavaScript中arguments和this对象用法分析
Aug 08 #Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
Aug 08 #Javascript
微信小程序开发背景图显示功能
Aug 08 #Javascript
JavaScript实现的DOM绘制柱状图效果示例
Aug 08 #Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
Aug 07 #Javascript
You might like
php空间不支持socket但支持curl时recaptcha的用法
2011/11/07 PHP
使用PHP处理数据库数据如何将数据返回客户端并显示当前状态
2016/02/16 PHP
Yii2中DropDownList简单用法示例
2016/07/18 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
php高清晰度无损图片压缩功能的实现代码
2018/12/09 PHP
JavaScript的变量作用域深入理解
2009/10/25 Javascript
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
2020/08/11 Javascript
javascript中mouseover、mouseout使用详解
2015/07/19 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
2016/01/19 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
js实现html table 行,列锁定的简单实例
2016/10/13 Javascript
两种简单的跨域方法(jsonp、php)
2017/01/02 Javascript
vue左右侧联动滚动的实现代码
2018/06/06 Javascript
QRCode.js二维码生成并能长按识别
2018/10/16 Javascript
JS实现打字游戏
2019/12/17 Javascript
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
jQuery HTML获取内容和属性操作实例分析
2020/05/20 jQuery
openlayers实现地图测距测面
2020/09/25 Javascript
jquery简易手风琴插件的封装
2020/10/13 jQuery
[02:17]快乐加倍!DOTA2食人魔魔法师至宝+迎霜节活动上线
2019/12/22 DOTA
详解python的数字类型变量与其方法
2016/11/20 Python
Python generator生成器和yield表达式详解
2019/08/08 Python
原来我一直安装 Python 库的姿势都不对呀
2019/11/11 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
python爬虫泛滥的解决方法详解
2020/11/25 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
纯css3实现效果超级炫的checkbox复选框和radio单选框
2014/09/01 HTML / CSS
weblogic面试题
2016/03/07 面试题
大学生撤销处分思想汇报
2014/09/12 职场文书
作文批改评语
2014/12/25 职场文书
实习科室评语
2015/01/04 职场文书
先进工作者个人总结
2015/02/15 职场文书
地震捐款简报
2015/07/21 职场文书
如何写通讯稿
2015/07/22 职场文书