首页帮我写一个html+css+js的三分钟倒计时器，计时结束后，网页弹出游戏失败的窗口

帮我写一个html+css+js的三分钟倒计时器，计时结束后，网页弹出游戏失败的窗口

时间: 2024-03-27 14:36:15 浏览: 74

好的，以下是一个简单的HTML+CSS+JS的三分钟倒计时器和游戏失败窗口： HTML代码： ``` <!DOCTYPE html> <html> <head> <title>倒计时器</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="timer"> <h1>倒计时器</h1> <p id="countdown">3:00</p> </div> <div class="popup" id="popup"> <h2>游戏失败</h2> <p>很遗憾，您没有在规定时间内完成游戏。</p> </div> <script src="script.js"></script> </body> </html> ``` CSS代码： ``` body { font-family: Arial, sans-serif; } .timer { text-align: center; margin-top: 100px; } #countdown { font-size: 72px; margin-top: 50px; } .popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); color: white; text-align: center; padding-top: 200px; box-sizing: border-box; } .popup h2 { font-size: 48px; margin-bottom: 50px; } .popup p { font-size: 24px; } ``` JS代码： ``` var timeLeft = 180; // 3 minutes in seconds var countdown = setInterval(function() { var minutes = Math.floor(timeLeft / 60); var seconds = timeLeft % 60; document.getElementById("countdown").innerHTML = minutes + ":" + (seconds < 10 ? "0" : "") + seconds; timeLeft--; if (timeLeft < 0) { clearInterval(countdown); document.getElementById("popup").style.display = "block"; } }, 1000); ``` 在倒计时结束时，JS代码会将游戏失败窗口的display属性设置为"block"，从而显示窗口。你可以在popup div中添加一个重新开始游戏的按钮，或者其他的一些交互元素，来增加用户体验。

阅读全文