Home  >  Article  >  Web Front-end  >  Implementing mobile phone text message button countdown based on JavaScript (super simple)_javascript skills

Implementing mobile phone text message button countdown based on JavaScript (super simple)_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:22:421038browse

On shopping websites such as Taobao, we will all see a countdown button for sending text messages. How is it implemented? Below I will provide you with a very practical piece of code.

No more nonsense, I will just post the js code for you.

 /*
 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);
  }
 }

The above code is the entire description of the JavaScript implementation of mobile phone text message button countdown introduced in this article. I hope you like it.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn