基于JavaScript实现手机短信按钮倒计时(超简单)


Posted in Javascript onDecember 30, 2015

在淘宝等购物网站,我们都会看到一个发送短信倒计时的按钮,究竟是如何实现的呢?下面我就给大家提供一段代码很实用的。

废话不多说了,直接给大家贴js代码了。

/*
 120秒手机短信按钮倒计时
 */
 exports.sendmessage = function (name) {
  var second = 120;
  $(name).attr("disabled", true);
  var color = $(name).css('background-color');
  $(name).attr("style", "background-color : #c1c1c1");
  function update(num) {
   if (num == second) {
    $(name).attr("style", "background-color : "+color);
    $(name).text("获取验证码");
    $(name).attr("disabled", false);
   }
   else {
    var printnr = second - num;
    $(name).text(printnr + "秒后获取");
   }
  }
  function uupdate(i) {
   return function () {
    update(i);
   }
  }
  for (var i = 1; i <= second; i++) {
   setTimeout(uupdate(i), i * 1000);
  }
 }

以上代码是本文给大家介绍的JavaScript实现手机短信按钮倒计时的全部叙述,希望大家喜欢。

Javascript 相关文章推荐
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
Jun 26 Javascript
JavaScript编程的10个实用小技巧
Apr 18 Javascript
JS实现距离上次刷新已过多少秒示例
May 23 Javascript
node.js中的path.basename方法使用说明
Dec 09 Javascript
node.js中的querystring.stringify方法使用说明
Dec 10 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
Oct 16 Javascript
js从输入框读取内容,比较两个数字的大小方法
Mar 13 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 Javascript
详解基于vue-cli优化的webpack配置
Nov 06 Javascript
vue+vue-router转场动画的实例代码
Sep 01 Javascript
React组件对子组件children进行加强的方法
Jun 23 Javascript
JS实现图片懒加载(lazyload)过程详解
Apr 02 Javascript
Highcharts使用简例及异步动态读取数据
Dec 30 #Javascript
JavaScript阻止回车提交表单的方法
Dec 30 #Javascript
基于JavaScript代码实现微信扫一扫下载APP
Dec 30 #Javascript
分享两款带遮罩的jQuery弹出框
Dec 30 #Javascript
JavaScript小技巧整理
Dec 30 #Javascript
jQuery拖动元素并对元素进行重新排序
Dec 30 #Javascript
jQuery给元素添加样式的方法详解
Dec 30 #Javascript
You might like
杏林同学录(二)
2006/10/09 PHP
php设计模式 Interpreter(解释器模式)
2011/06/26 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
PHP实现找出链表中环的入口节点
2018/01/16 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
jQuery对象与DOM对象之间的转换方法
2010/04/15 Javascript
JQuery UI的拖拽功能实现方法小结
2012/03/14 Javascript
jQuery Tools tooltip使用说明
2012/07/14 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
2013/11/14 Javascript
javascript中处理时间戳为日期格式的方法
2014/01/02 Javascript
js实现的简洁网页滑动tab菜单效果代码
2015/08/24 Javascript
第五篇Bootstrap 排版
2016/06/21 Javascript
jQuery Easyui datagrid/treegrid 清空数据
2016/07/09 Javascript
原生JS实现几个常用DOM操作API实例
2017/01/19 Javascript
微信小程序之网络请求简单封装实例详解
2017/06/28 Javascript
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
2017/10/14 jQuery
微信小程序如何像vue一样在动态绑定类名
2018/04/17 Javascript
vue根据值给予不同class的实例
2018/09/29 Javascript
Jquery的autocomplete插件用法及参数讲解
2019/03/12 jQuery
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
pandas 对group进行聚合的例子
2019/12/27 Python
CSS3 圆角效果
2009/07/15 HTML / CSS
2014植树节活动总结
2014/03/11 职场文书
安全生产责任书
2014/03/12 职场文书
作风建设演讲稿
2014/05/23 职场文书
销售团队口号大全
2014/06/06 职场文书
青年教师师德演讲稿
2014/08/26 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
初一军训感言
2015/08/01 职场文书
MySQL索引知识的一些小妙招总结
2021/05/10 MySQL
浅谈什么是SpringBoot异常处理自动配置的原理
2021/06/21 Java/Android
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle
pt-archiver 主键自增
2022/04/26 MySQL