JavaScript按钮倒计时示例

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

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

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()第二个参数传入需要倒计时的秒数