基于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 相关文章推荐
在页面上点击任一链接时触发一个事件的代码
Apr 07 Javascript
js 限制数字 js限制输入实现代码
Dec 04 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
Jul 27 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
Aug 28 Javascript
jqueryMobile使用示例分享
Jan 12 Javascript
JavaScript新增样式规则(推荐)
Jul 19 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
Dec 08 Javascript
JS实现的简易拖放效果示例
Dec 29 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
给vue项目添加ESLint的详细步骤
Sep 29 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
Aug 31 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
PHP 二维数组根据某个字段排序的具体实现
2014/06/03 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
extjs 学习笔记(一) 一些基础知识
2009/10/13 Javascript
关于jQuery object and DOM element
2013/04/15 Javascript
node.js中的events.emitter.removeListener方法使用说明
2014/12/10 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
JavaScript实现倒计时跳转页面功能【实用】
2016/12/13 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
利用vscode编写vue的简单配置详解
2017/06/17 Javascript
js中less常用的方法小结
2017/08/09 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
2020/04/22 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
2020/08/04 Javascript
Python中使用中文的方法
2011/02/19 Python
python解决字典中的值是列表问题的方法
2013/03/04 Python
python获取图片颜色信息的方法
2015/03/18 Python
Python3中常用的处理时间和实现定时任务的方法的介绍
2015/04/07 Python
Python编程之序列操作实例详解
2017/07/22 Python
Python栈算法的实现与简单应用示例
2017/11/01 Python
python cs架构实现简单文件传输
2020/03/20 Python
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
python 弹窗提示警告框MessageBox的实例
2019/06/18 Python
Win10系统下安装labelme及json文件批量转化方法
2019/07/30 Python
多版本python的pip 升级后, pip2 pip3 与python版本失配解决方法
2019/09/11 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
Python基于模块Paramiko实现SSHv2协议
2020/04/28 Python
python如何求100以内的素数
2020/05/27 Python
C# Debug和Testing相关面试题
2015/10/25 面试题
如何利用cmp命令比较文件
2013/09/23 面试题
中专毕业生自我鉴定
2014/02/02 职场文书
商超业务员岗位职责
2014/03/12 职场文书
反腐倡廉演讲稿
2014/05/22 职场文书
公司趣味运动会开幕词
2016/03/04 职场文书
Node.js实现断点续传
2021/06/23 Javascript