Javascript-弹出框运行计时器

Question

我是Java的新手，我想创建一个简单的弹出框，该框在计数器运行时的特定时间显示（即，当计数器有10分钟的路程时，显示文本）

我从W3摘录了这段代码...

 <!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
demo {
  text-align: right;
  font-size: 20px;
  margin-top:0px;
}
</style>
</head>
<body>

<p id="demo"></p>

<script>
// Set the date we're counting down to
var countDownDate = new Date("{case_started}").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();

    // Find the distance between now an the count down date
    var distance = countDownDate - now;

    // Time calculations for days, hours, minutes and seconds

    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // Output the result in an element with id="demo"
    document.getElementById("demo").innerHTML = minutes + "m " + seconds + "s ";

     // If the count down is over, write some text 
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "EXPIRED";

}, 1000);


</script>

</script>
</body>
</html>

我以为这是超级容易的事，我事先道歉，我已经在网上搜寻...。

提前致谢

Answer 1

您的脚本缺少结尾括号} 。

我编辑了您的脚本：

在此代码示例中，我编辑了date函数以使其正常工作，因为变量{case_started}不起作用。

 <!DOCTYPE HTML> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> demo { text-align: right; font-size: 20px; margin-top:0px; } </style> </head> <body> <p id="demo"></p> <script> // Set the date we're counting down to var countDownDate = new Date("2018/03/06").getTime(); //replaced {case_started} by a hardcoded date // Store if 10 minute alert is already showed var alert_shown = false; // Update the count down every 1 second var x = setInterval(function() { // Get todays date and time var now = new Date().getTime(); // Find the distance between now an the count down date var distance = countDownDate - now; // Time calculations for days, hours, minutes and seconds var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // Output the result in an element with id="demo" document.getElementById("demo").innerHTML = minutes + "m " + seconds + "s "; // If 10 minutes or less if (distance < 600000 && !alert_shown) { alert_shown = true; alert("Less than 10 minutes to go!"); } // If the count down is over, write some text if (distance < 0) { clearInterval(x); document.getElementById("demo").innerHTML = "EXPIRED"; } //added missing end bracket }, 1000); </script> </script> </body> </html> 

Answer 2

试试这个代码。 我增加了几天和几小时的时间，但是您可以根据需要将其删除。

您的代码中有少许错字， if (distance < 0) {条件缺少} 。

另外，您的css选择器必须是#demo ，而不是demo 。

我已将{case_started}替换为实际日期，因此该示例有效：

 <!DOCTYPE HTML> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> #demo { text-align: right; font-size: 20px; margin-top:0px; } </style> </head> <body> <p id="demo"></p> <script> // Set the date we're counting down to var countDownDate = new Date("2018/03/07 17:30:00").getTime(); // Update the count down every 1 second var x = setInterval(function() { // Get todays date and time var now = new Date().getTime(); // Find the distance between now an the count down date var distance = countDownDate - now; // Calculate days, hours minutes and seconds left var seconds = (countDownDate - now) / 1000; var days = parseInt(seconds / 86400); seconds = seconds % 86400; hours = parseInt(seconds / 3600); seconds = seconds % 3600; minutes = parseInt(seconds / 60); seconds = parseInt(seconds % 60); // Output the result in an element with id="demo" document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s "; // If the count down is over, write some text if (distance < 0) { clearInterval(x); document.getElementById("demo").innerHTML = "EXPIRED"; } }, 1000); </script> </body> </html>