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

 更新时间:2015年12月30日 15:40:03   作者:我_爱编程  
在淘宝等购物网站,我们都会看到一个发送短信倒计时的按钮,究竟是如何实现的呢?下面小编通过本篇文章给大家分享一段代码关于js实现手机短信按钮倒计时,需要的朋友参考下

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

废话不多说了,直接给大家贴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实现手机短信按钮倒计时的全部叙述,希望大家喜欢。

相关文章

  • layui表格设计以及数据初始化详解

    layui表格设计以及数据初始化详解

    今天小编就为大家分享一篇layui表格设计以及数据初始化详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • JS快速掌握ES6的class用法

    JS快速掌握ES6的class用法

    这篇文章主要介绍了JS快速掌握ES6的class用法,想了解ES6的同学,一定要看一下
    2021-05-05
  • JS实现普通轮播图特效

    JS实现普通轮播图特效

    这篇文章主要为大家详细介绍了JS实现普通轮播图特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • js获取两个数组对象的差集实现方法

    js获取两个数组对象的差集实现方法

    这篇文章主要为大家介绍了js获取两个数组对象的差集实现方法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • 子窗体与父窗体传值示例js代码

    子窗体与父窗体传值示例js代码

    子窗体与父窗体之见互相传值实现使用中很频繁,本文以一个小示例抛砖引玉,希望大家可以举一反三
    2013-08-08
  • JavaScript实现随机点名网页

    JavaScript实现随机点名网页

    这篇文章主要为大家详细介绍了JavaScript实现随机点名网页,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • echarts设置图例颜色和地图底色的方法实例

    echarts设置图例颜色和地图底色的方法实例

    最近项目要使用echarts进行数据可视化,所以下面这篇文章主要给大家介绍了关于echarts设置图例颜色和地图底色的相关资料,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧
    2018-08-08
  • 用js实现简单的tab选项卡

    用js实现简单的tab选项卡

    这篇文章主要为大家详细介绍了用js实现简单的tab选项卡,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • jsonp格式前端发送和后台接受写法的代码详解

    jsonp格式前端发送和后台接受写法的代码详解

    jsonp是ajax提交的一种格式不会受跨域限制,这篇文章主要介绍了jsonp格式前端发送和后台接受写法的代码详解,需要的朋友可以参考下
    2019-11-11
  • 微信小程序简洁登录页面的实现(附源码)

    微信小程序简洁登录页面的实现(附源码)

    本文主要介绍了微信小程序简洁登录页面的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-12-12

最新评论