Javascript-弹出框运行计时器
[英]Javascript - Pop up box running off timer
问题描述
我是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>
我以为这是超级容易的事，我事先道歉，我已经在网上搜寻...。
提前致谢
2 个解决方案
解决方案1
0 已采纳 2018-03-05 14:15:43
您的脚本缺少结尾括号} 。
我编辑了您的脚本：
在此代码示例中，我编辑了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>
解决方案2
0 2018-03-05 14:24:25
试试这个代码。 我增加了几天和几小时的时间，但是您可以根据需要将其删除。
您的代码中有少许错字， 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>
JavaScript弹出框
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.