<!doctype?html>
<html>
<head>
????<meta?charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
#faY{width:250px;?height:50px;?margin:20px;}
????#faY?.faY_1{?width:125px;?height:50px;float:left;?background:red;}
????#faY?.faY_1?input{?width:100px;?height:40px;?font-size:14px;?background:#efefef;font-weight:800;color:#0ee;margin:5px?12px;}
????#faY?.faY_2{?width:125px;?height:50px;float:right;?background:#ff0;?text-align:center;line-height:50px;font-weight:800;color:#0ee;font-size:20px;display:none;}
</style>
<script?type="text/javascript">
window.onload=function(){
???var?send=document.getElementById('send'),
???????send_1=document.getElementById('faY_2'),
???????times=60,
???????timer=null;
???send.onclick=function(){
????????????if?(times>0&×<60)?{
?????????????send.onclick=null;
????????????};
????clearInterval(timer);
????send.style.cssText="color:#fff";
????send_1.style.cssText="display:block";
????//send.onclick=null;
????timer=setInterval(function(){
????times--;
????if?(times<=0)?{
????send_1.style.cssText="display:none";
????send.style.cssText="color:#0eee";
????times=60;
????clearInterval(timer);
????};
????send_1.innerHTML=times+"秒后重試";
????},500);
???}?
}
</script>
</head>
<body>
????<div?id="faY">
????????<div>
???????????<input?type="button"?id="send"?value="發(fā)送驗證碼">
????????</div>
????????<div?id="faY_2">60秒后重試</div>
????</div>
</body>
</html>
2016-04-26
你這個代碼沒有辦法使用第二次，是因為在結(jié)束后你忘記把timer給初始化回來了，你在clearInterval（timer）后面，需要加再一行timer=null，就可以反復使用