<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>倒计时玩玩</title>
<link rel="stylesheet" href="css/TimeOut.css" />
</head>
<body>
<div>
<!--
Div1
-->
<div id="div1">
10
</div>
<!--
Div2
-->
<div id="div2">
<input type="button" id="userDefined" class="button" value="设置时间" onclick="showUser()"/>
<input type="button" id="default" class="button" value="默认时间" onclick="showDefault()"/>
</div>
</div>
<script type="text/javascript">
var aButton = document.getElementsByClassName("button");
var odiv = document.getElementById("div1");
var dtext = parseInt(odiv.innerHTML);
//按钮点击效果
function showUser(){
aButton[0].style.boxShadow = "none";
aButton[1].style.boxShadow = "3px 3px 3px black";
var dialog = prompt("请设置时间:");
var uNum = parseInt(dialog);
uNum--;
var uText = uNum + "";
odiv.innerHTML = uText;
if(uNum == 0){
alert("倒计时完成");
uNum = 0;
}else{
uNum = 10;
}
}
function showDefault(){
aButton[1].style.boxShadow = "none";
aButton[0].style.boxShadow = "3px 3px 3px black";
var num = parseInt(odiv.innerHTML);
num--;
var uText = num + "";
odiv.innerHTML = uText;
if(num == 0){
num = 0;
alert("完成倒计时");
clearInterval(j);
window.open("TimeOut.html","_self");
}
}
var j = setInterval("showDefault()",1000);
</script>
</body>
</html>@charset "utf-8";
#div1{
width: 270px;
height: 270px;
padding: 15px;
color: white;
font-weight: bolder;
font-size: 128px;
background: deeppink;
text-align: center;
line-height: 270px;
}
#div2{
width:300px;
height: 60px;
text-align: center;
line-height: 60px;
margin: 0px;
background: #DCDCDC;
}
.button{
width: 100px;
height: 30px;
border: none;
display: inline-block;
box-shadow: 3px 3px 3px #000000;
background: darkorange;
}
.button:hover{background: crimson;color: white;}哪个大哥能帮忙改下代码啊,计时器为什么会自动执行呢?
添加回答
举报
0/150
提交
取消