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 相关文章推荐
javascript创建createXmlHttpRequest对象示例代码
Feb 10 Javascript
Javascript 是你的高阶函数(高级应用)
Jun 15 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
Sep 06 Javascript
jQuery内容过滤选择器用法示例
Sep 09 Javascript
javascript加载xml 并解析各节点的值(实现方法)
Oct 12 Javascript
AngularJS路由切换实现方法分析
Mar 17 Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 Javascript
js中的 || 与 &amp;&amp; 运算符详解
May 24 Javascript
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
点击按钮弹出模态框的一系列操作代码实例
Mar 29 Javascript
Vue登录主页动态背景短视频制作
Sep 21 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
Aug 28 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+jQuery+MySql实现红蓝(顶踩)投票代码
2015/08/25 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
iphone safari不支持position fixed的解决方法
2012/05/04 Javascript
js中的布尔运算符使用介绍
2013/11/20 Javascript
jQuery对下拉框,单选框,多选框的操作
2014/02/21 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
jquery判断复选框是否选中进行答题提示特效
2015/12/10 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
详解webpack的配置文件entry与output
2017/08/21 Javascript
基于vue 动态加载图片src的解决方法
2018/02/05 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
2018/06/14 Javascript
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
ES6入门教程之let、const的使用方法
2019/04/13 Javascript
如何通过vscode运行调试javascript代码
2020/07/24 Javascript
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
Python中死锁的形成示例及死锁情况的防止
2016/06/14 Python
python购物车程序简单代码
2018/04/18 Python
python3.7实现云之讯、聚合短信平台的短信发送功能
2019/09/26 Python
Pytoch之torchvision.transforms图像变换实例
2019/12/30 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
python爬虫beautifulsoup库使用操作教程全解(python爬虫基础入门)
2021/02/19 Python
Expedia西班牙:预订酒店、机票、旅行和廉价度假套餐
2019/04/10 全球购物
英国最好的包装供应商:Priory Direct
2019/12/17 全球购物
大专自我鉴定范文
2013/10/23 职场文书
学生手册家长评语
2014/02/10 职场文书
给校长的一封检讨书
2014/09/20 职场文书
九年级历史教学反思
2016/02/19 职场文书
什么是创业计划书?什么是商业计划书?这里一一解答
2019/07/12 职场文书
哪类餐饮行业,最适合在高校创业?
2019/08/19 职场文书
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript
oracle重置序列从0开始递增1
2022/02/28 Oracle
el-table-column 内容不自动换行的解决方法
2022/08/14 Vue.js