countDown验证码倒计时

刚接触js的时候公司有一个活动页面要写一个获取验证码的倒计时,当时身为菜鸟的我就被难到了,之后也没有再写,今天偶然间想起来,就又用了几分钟写了一下,希望对有些朋友有用,欢迎指教,下面是代码,希望大家可以共同进步~

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>countDown</title>
</head>
<body>
<div id="box" onclick = "handleClick()">获取验证码</div>
</body>
<script>
var box = document.getElementById("box");
var secondes = 60;
//声明式函数的this指向window,这样在下面清除定时器的时候就可以拿到要清除的定时器了
function handleClick(){
this.interval = setInterval(countDown,1000);
}
function countDown(){
box.innerHTML = secondes+"s";
if(secondes>0&&secondes<=60){
secondes--;
}else{
clearInterval(this.interval);
secondes=60;
box.innerHTML = "获取验证码";
}

}
</script>
</html>

posted @ 2017-03-23 14:26  玛丽莲梦露  阅读(167)  评论(0编辑  收藏  举报