JavaScript按钮倒计时示例

最早的倒计时效果应该是普遍应用在注册协议那一关,可能是网站为了防止恶意注册而出此下策。现在发送手机信息已是众多网站中常见的一种交互方式了,其中最普遍的就是发送手机验证码。

为了防止用户恶意点击发送验证码造成损失,几乎所有网页中要发送验证码的地方都做了JavaScript倒计时控制,当然最安全的还是要在服务器端做控制。即当用户点击了按钮获取验证码后,需要等待三十秒或六十秒才能再次点击,以下是示例代码

【爆款云服务器限时促销】
阿里云云服务器ECS实例2核2G,新人专享渠道特惠价只要82元!特惠热卖中。 点击立即购买

JavaScript code

/** 
 * 琼台博客 www.qttc.net
 * 倒计时函数
 * 需要在按钮上绑定单击事件
 * 如: <input value="发送短信" data-cke-editable="1" data-cke-pa-onclick="setInterval('countDown(this,30)',1000);" contenteditable="false" type="button">
 * 30代表秒数,需要倒计时多少秒可以自行更改
 */
function countDown(obj,second) {
  // 如果秒数还是大于0,则表示倒计时还没结束
  if(second>=0){
    // 获取默认按钮上的文字
    if(typeof buttonDefaultValue === 'undefined' ){
      buttonDefaultValue =  obj.defaultValue;
    }
    // 按钮置为不可点击状态
    obj.disabled = true;            
    // 按钮里的内容呈现倒计时状态
    obj.value = buttonDefaultValue+'('+second+')';
    // 时间减一
    second--;
    // 一秒后重复执行
    setTimeout(function(){countDown(obj,second);},1000);
  // 否则,按钮重置为初始状态
  }else{
    // 按钮置未可点击状态
    obj.disabled = false;   
    // 按钮里的内容恢复初始状态
    obj.value = buttonDefaultValue;
  }   
}

HTML code

<h1>JavaScript按钮三十秒倒计时效果</h1>
<hr />
<p>
  <input onclick="countDown(this, 30);" type="button" value="发送短信" />
</p>

函数countDown()第二个参数传入需要倒计时的秒数

分享

TITLE: JavaScript按钮倒计时示例

LINK: https://www.qttc.net/42-javascript-button-count-down.html

NOTE: 原创内容,转载请注明出自琼台博客