js按钮倒计时示例

JavaScript 2012-04-23 js倒计时,setTimeout

最早的倒计时效果应该是普遍应用的注册协议那一关,可能是网站上为了防止恶意注册而出此下策。现在发送手机信息已是众多网站中常见的一种交互方式了,其中最普遍的就是发送手机验证码。为了防止用户恶意点击发送验证码造成损失,几乎所有网页中要发送验证码的地方都做了js倒计时控制。即当用户点击了按钮获取验证码后,需要等待三十秒或六十秒才能再次点击,以下是示例代码

js代码

/** 
 * 倒计时函数
 * 需要在按钮上绑定单击事件
 * 如: 
 * 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代码

<h1>
    js按钮三十秒倒计时效果</h1>
<hr />
<p>
    <input onclick="countDown(this,30);" type="button" value="发送短信" /></p>
<hr />
<h3>
    琼台博客 qttc.net</h3>
<p>
    在按钮上绑定的js单击事件中&lsquo;30&rsquo;代表倒计时秒数,可以在绑定时设置秒数,灵活应用。 当然,这个倒计时只是前端控制,如果需要更安全的做法应该是服务器端也做判断。</p>

文字链接:《js按钮倒计时示例

文章地址:http://www.qttc.net/20120442.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 1

  • }else{ // 按钮置未可点击状态 obj.disabled = false; // 按钮里的内容恢复初始状态 obj.value = buttonDefaultValue; } 里注释: }else{ // 按钮置为可点击状态 obj.disabled = false; // 按钮里的内容恢复初始状态 obj.value = buttonDefaultValue; } aoyao3857
    2013-03-15 21:00:03 [ 跟帖 ]
    1 #