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>