<!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;}
哪个大哥能帮忙改下代码啊,计时器为什么会自动执行呢?
橋本奈奈未
相关分类