一个小的倒计时页面，可以应用在验证码发送页面。我是小白我自豪╮(￣▽￣")╭

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
#div1{
width: 300px;
height: 300px;
font-size: 80px;
line-height: 300px;
text-align: center;
color: #fff;
background: #000;
margin: 20px auto;
}
input{
background: none;
width: 100px;
height: 100px;
border: 1px solid #b6b6b6;
display: block;
margin: 0 auto;
}
</style>
<body>
<div id='div1'>10</div>
<input type="button" value='点击发送验证码' id="btn">
</body>


<script>
        //1事件 按钮点击事件
        var oBtn = document.getElementById("btn");
        var oDiv = document.getElementById("div1");
        var index = 10;
        var timer = null;
        oBtn.onclick = function(){
            //alert(1)
            oBtn.value = "已发送";
            clearInterval(timer);
            timer = setInterval(function(){
                if(index == 0){
                    clearInterval(timer);
                    oBtn.value = "重新发送";//倒计时完毕会出现重新发送
                }else{
                    index--;
                    oDiv.innerHTML = index;
                    
                    oBtn.style.background = oDiv.style.background = randomColor();//点击按钮背景颜色与倒计时一致
                }
            },1000)
        }
        function randomColor(){//随机颜色
            var str = "0123456789abcdef";
            var res = "#";
            for(var i = 0 ; i < 6 ; i++){
                var randomInt = Math.round(Math.random()*15);//0-15随机数
                res = res + str[randomInt];
            }
            return res;
        }
    </script>

 

posted @ 2017-06-13 16:18  骆大为  阅读(146)  评论(0)    收藏  举报