Home > Web Front-end > JS Tutorial > 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
Release: 2016-05-16 15:22:42
Original
1046 people have browsed it

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);
  }
 }
Copy after login

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.

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template