当前位置: 首页 > 编程笔记 >

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

徐栋
2023-03-14
本文向大家介绍基于JavaScript实现手机短信按钮倒计时(超简单),包括了基于JavaScript实现手机短信按钮倒计时(超简单)的使用技巧和注意事项,需要的朋友参考一下

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

废话不多说了,直接给大家贴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实现短信倒计时60s,包括了JavaScript实现短信倒计时60s的使用技巧和注意事项,需要的朋友参考一下 废话不多说了,直接给大家贴代码了,具体代码如下所示; 总结 以上所述是小编给大家介绍的JavaScript实现短信倒计时60s,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持!

  • 本文向大家介绍JS+HTML5实现获取手机验证码倒计时按钮,包括了JS+HTML5实现获取手机验证码倒计时按钮的使用技巧和注意事项,需要的朋友参考一下 效果图如下所示: HTML: CSS: JavaScript: GitHub:Fuck me on GitHub Fuck me on GitHub 总结 以上所述是小编给大家介绍的JS+HTML5实现获取手机验证码倒计时按钮,希望对大家有所帮助,

  • 本文向大家介绍iOS实现短信验证码倒计时,包括了iOS实现短信验证码倒计时的使用技巧和注意事项,需要的朋友参考一下 在开发中,经常在需要用户注册的时候会需要实现验证码倒计时的功能,下面是解决这个问题的两种思路(使用UIButton控件) 一、利用NSTimer计时器 1.新建一个UIButton按钮,设置成属性,名为codeButton。(UIButton样式一定要为自定义,否则后面倒计时数秒时会

  • 本文向大家介绍js实现的倒计时按钮实例,包括了js实现的倒计时按钮实例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js实现的倒计时按钮。分享给大家供大家参考。具体分析如下: 效果图如下: 具体代码如下: 这里只是一个小例子,在实际运用中,可能需要记录各种时间,考虑到页面刷新的变化,需要用cookie来进行数据存储等等! 希望本文所述对大家的javascript程序设计有所帮助。

  • 本文向大家介绍基于JavaScript实现自动更新倒计时效果,包括了基于JavaScript实现自动更新倒计时效果的使用技巧和注意事项,需要的朋友参考一下 实现倒计时效果需要掌握js中的两个知识点: 1、setTimeout函数 每隔1秒钟更新秒钟时间 2、Date对象 计算时间差 下面贴出 元旦倒计时代码 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍基于vue、react实现倒计时效果,包括了基于vue、react实现倒计时效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了基于vue、react实现倒计时效果的具体代码,供大家参考,具体内容如下 Vue 方案一:俩个元素 HTML: JS: 方案二:一个元素,改变文字 HTML: JS: React 引用块内容 以上就是本文的全部内容,希望对大家的学习有所帮助,也