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

时间：2021-05-31 22:04:05

<!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>

 

标签：

相关文章