60秒倒计时

60秒倒计时

1.html代码

<div class="box">
<input type="text">
&lt;a id="btn" class="btn btn-on" href="javaScr<a href="http://www.ldhblog.com/tag/ip/" title="查看与 ip 相关的文章"target="_blank">ip</a>t:void(0);"&gt;获取验证码&lt;/a&gt;
&lt;/div&gt;

2.js代码(重点)

(function(){
var btn = document.<a href="http://www.ldhblog.com/tag/get/" title="查看与 get 相关的文章"target="_blank">get</a>ElementById("btn");
var handler = function(){
doClick();
removeEvent(btn,'click',handler);
}

function addEvent(obj,type,handler){
if(obj.addEventListener){
obj.addEventListener(type,handler,false);
}else if(obj.attachEvent){
obj.attachEvent('on'+type,handler);
}
}

function removeEvent(obj,type,handler){
if(obj.removeEventListener){
obj.removeEventListener(type,handler,false);
}else if(obj.detachEvent){
obj.detachEvent("on"+type,handler);
}
}

function doClick(){
removeClass(btn,'btn-on');
addClass(btn,'btn-off');
btn.innerHTML="60s后重新获取";
var clickTime = new Date().getTime();
var Timer = setInterval(function(){
var nowTime = new Date().getTime();
var second = Math.ceil(60-(nowTime-clickTime)/1000);
if(second&gt;0){
btn.innerHTML = second+"s后重新获取";
}else{
clearInterval(Timer);
removeClass(btn,'btn-off');
addClass(btn,'btn-on');
btn.innerHTML = "重新获取";
addEvent(btn,"click",handler);
}
},1000);
}
function hasClass(obj, cls) {
return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(obj, cls) {
if (!hasClass(obj, cls)) obj.className += " " + cls;
}
function removeClass(obj, cls) {
if (hasClass(obj, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
obj.className = obj.className.replace(reg, ' ');
}
}

addEvent(btn,"click",handler);

})();

 

3.效果

60秒倒计时

感觉代码还是有点多!

李东辉

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:5   其中:访客  3   博主  2

  1. avatar 热腾网 2

    主要功劳在JS上,但是你的html不能直接复制啊。

  2. avatar Koolight 1

    60秒有点久啊,比优酷广告还长了!

    • avatar 李东辉

      @Koolight 我写手机注册获取验证码的代码!!!

  3. avatar 李明 1

    來學習學習