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 相关文章推荐
php图像生成函数之间的区别分析
Dec 06 Javascript
node.js中的fs.fchmod方法使用说明
Dec 16 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
JavaScript获取对象在页面中位置坐标的方法
Feb 03 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
Nov 30 Javascript
详解VueJs异步动态加载块
Mar 09 Javascript
vue-ajax小封装实例
Sep 18 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
Sep 17 Javascript
vue中对象数组去重的实现
Feb 06 Javascript
prettier自动格式化去换行的实现代码
Aug 25 Javascript
electron踩坑之dialog中的callback解决
Oct 06 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 chmod 函数与批量修改文件目录权限
2010/05/10 PHP
PHP入门之常量简介和系统常量
2014/05/12 PHP
PHP实现清除MySQL死连接的方法
2016/07/23 PHP
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
浅谈Javascript事件处理程序的几种方式
2012/06/27 Javascript
jquery制作图片时钟特效
2020/03/30 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
2016/11/24 Javascript
详解React Native网络请求fetch简单封装
2017/08/10 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
2019/05/09 Javascript
DatePickerDialog 自定义样式及使用全解
2019/07/09 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
2019/07/25 Javascript
JSONP 的原理、理解 与 实例分析
2020/05/16 Javascript
在vue中created、mounted等方法使用小结
2020/07/21 Javascript
python中的__init__ 、__new__、__call__小结
2014/04/25 Python
python下调用pytesseract识别某网站验证码的实现方法
2016/06/06 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
Python基于当前时间批量创建文件
2020/05/07 Python
Python实现电视里的5毛特效实例代码详解
2020/05/15 Python
利用python为PostgreSQL的表自动添加分区
2021/01/18 Python
俄罗斯品牌服装和鞋子的在线商店:KUPIVIP
2019/10/27 全球购物
美国滑板店:Tactics
2020/11/08 全球购物
大学生个人求职信范文
2013/09/21 职场文书
工程师求职简历的自我评价分享
2013/10/10 职场文书
建筑工程技术应届生求职信
2013/11/17 职场文书
买房协议书
2014/04/11 职场文书
共青团员自我评价范文
2014/09/14 职场文书
离婚协议书范本(2014版)
2014/09/28 职场文书
检察院院长群众路线教育实践活动个人整改措施
2014/10/04 职场文书
维稳工作情况汇报
2014/10/27 职场文书
分居协议书范本(律师见证版)
2014/11/26 职场文书
保研推荐信范文
2015/03/25 职场文书
《中国古代诗歌散文欣赏》高中语文教材
2019/08/20 职场文书
《攀登者》:“海拔8000米以上,你不能指望任何人”
2019/11/25 职场文书
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python