自己写的 先撸为敬
来源：3-4 编程练习
林青石
2015-07-15 11:22
<!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="发送验证码">
</div>
<div id="faY_2">60秒后重试</div>
</div>
</body>
</html>
写回答
关注
1回答
-
- qq_Wingston_0
- 2016-04-26 15:56:14
你这个代码没有办法使用第二次，是因为在结束后你忘记把timer给初始化回来了，你在clearInterval（timer）后面，需要加再一行timer=null，就可以反复使用
Tab选项卡切换效果
本课程详细介绍网页页面中最流行常用的tab切换效果
65465 学习 · 533 问题
相似问题
自己写的代码，供参考
回答 1
代码在自己的编辑器上跑起来了
回答 1
为什么一个写了style一个没写
回答 1
为什么写了class才出来标签的颜色
回答 3
为什么不能直接写，要再写一个for循环
回答 3