我已经找到了一个很好的在线计时器,但是我需要一个计时器,该计时器将显示直到某个日期的时间,并且一旦该日期时间过去,它将显示自该日期以来已经过了多长时间了-时间。
我尝试添加一个switch语句,但得到的全为零。
该语句必须更改,取决于从日期算起。
这里是整个网页
<html> <head> <title>Orders with Approvals Received</title> <meta http-equiv="refresh" content="150"> <script> /* * Basic Count Up from Date and Time * Author: @mrwigster / https://guwii.com/bytes/count-date-time-javascript/ */ window.onload = function() { // Month Day, Year Hour:Minute:Second, id-of-element-container countUpFromTime("Feb 6, 2020 15:00:00", 'countup1'); // ****** Change this line! }; function countUpFromTime(countFrom, id) { countFrom = new Date(countFrom).getTime(); var now = new Date(), countFrom = new Date(countFrom), timeDifference = now < countup1 ? (countFrom - now): (now - countFrom); // timeDifference = (now - countFrom); // Count Up // timeDifference = (countFrom - now); //Count Down var secondsInADay = 60 * 60 * 1000 * 24, secondsInAHour = 60 * 60 * 1000; days = Math.floor(timeDifference / (secondsInADay) * 1); hours = Math.floor((timeDifference % (secondsInADay)) / (secondsInAHour) * 1); mins = Math.floor(((timeDifference % (secondsInADay)) % (secondsInAHour)) / (60 * 1000) * 1); secs = Math.floor((((timeDifference % (secondsInADay)) % (secondsInAHour)) % (60 * 1000)) / 1000 * 1); var idEl = document.getElementById(id); idEl.getElementsByClassName('days')[0].innerHTML = days; idEl.getElementsByClassName('hours')[0].innerHTML = hours; idEl.getElementsByClassName('minutes')[0].innerHTML = mins; idEl.getElementsByClassName('seconds')[0].innerHTML = secs; clearTimeout(countUpFromTime.interval); countUpFromTime.interval = setTimeout(function(){ countUpFromTime(countFrom, id); }, 1000); } </script> <style> body {margin:0; width: 322px; height: 192px; } .caption { background-color:BLUE; color:white; font-family: "Times New Roman", Times, serif; font-size: 20px; border-style:solid; border-width:1px; border-color:white; text-align:center; } .countup { text-align: center; margin-bottom: 0px; } .countup .timeel { display: inline-block; padding: 9px; background: #151515; margin: 0; color: white; margin-left: 0px; border-radius: 5px 0 0 5px; } .countup span[class*="timeRef"] { border-radius: 0 10px 10px 0; margin-left: 0; background: #e8c152; color: black; } </style> </head> <body> <thead> <div class="caption"> <caption>1_Arthur20 Ended</caption> </div> </thead> <tbody> <div class="countup" id="countup1"> <span class="timeel days">00</span> <span class="timeel timeRefDays">D</span> <span class="timeel hours">00</span> <span class="timeel timeRefHours">H</span> <span class="timeel minutes">00</span> <span class="timeel timeRefMinutes">M</span> <span class="timeel seconds">00</span> <span class="timeel timeRefSeconds">S</span> </div> <div class="countup" id="countup1"> <span class="timeel days">2</span> <span class="timeel timeRefDays">Open</span> <span class="timeel hours">502</span> <span class="timeel timeRefHours">Total</span> </div> </tbody> </table> </html>
非常感谢您能提供的任何帮助。谢谢,
编辑:我按照建议的行添加了行,但是一次过它给了我额外的1天1小时1分钟的时间。因此,当它递减计数时,它的工作原理非常好,一旦达到全零,我就可以得到更多的时间。我以为可能是因为时区问题,但是如果我替换计数代码,它就可以正常工作。不确定发生了什么。
感谢所有发表评论的人。
我已经找到了一个很好的在线计时器,但是我需要一个计时器,该计时器将显示直到某个日期的时间,并且一旦该日期时间过去,它将显示自该日期以来已经过了多长时间了-时间。我尝试过...