Javascript倒数计时器不会在零处停止并且不会在给定时间重新启动

Question

My use case is as follows:

I need my count-down clock to look at the local machine time, determine how much time is left until bed-time, and stop at bt (bed time).

On the UI, It should visually display 00:00:00 .

However, as soon as the the local machine time is the same as wt (wake-up time) it should re-start the count-down, up until the bt (bed time).

This should repeat, over and over.

One other caveat is that the app may not be running (ie browser might be closed) and the script may not be able to honor the following if condition:

if (hours === 0 && minutes === 0 && seconds === 0)

How would I mitigate against this?

I have written the following code:

 $(document).ready(function () { var bt = "23:00"; var dat = "10:00"; var wt = "08:00"; console.log('Bed Time:' + bt); console.log('Daily Available time' + dat); console.log('Wake up time:' + wt); placeHolderDate = "Aug 18, 2018 " + bt; var countDownDate = new Date(placeHolderDate).getTime(); var countDownHourMin = (wt.split(":")); // 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 and the count down date var distance = countDownDate - now; // Time calculations for days, hours, minutes and seconds var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); $("#countDown").val(hours + "h " + minutes + "m " + seconds + "s "); // If the countdown is over, write some text if (hours === 0 && minutes === 0 && seconds === 0) { //clearInterval(x); $("#countDown").val("00:00:00"); } if (hours < 0 || minutes < 0 || seconds < 0) { // clearInterval(x); $("#countDown").val("00:00:00"); } console.log(hours + "h " + minutes + "m " + seconds + "s "); }, 1000); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p id="countDown"></p>

The code appears to work, yet there are some issues. The countdown goes into negative, (which might be okay, as long as I can simply leverage this for my functionality), and the clock doesn't restart once it has hit 00:00:00 and wt (wake-up time) is reached.

Answer 1

A modulo operation on the difference between date/time objects will give you the date/time when the clock will show that time of day next time.

Modulo is the rest of a division. Let's illustrate this on a simplified example with 24 hours:

It is 13:00h on day 2.

One alarm is at 15:00h on day 3. The difference to now is (15-13 + (3-2)*24) = 26. The result of 26 modulo 24 is 2, think of it as 26 / 24 = 1 rest 2 .

Now we have some alarm date at 12:00 on day 1. The difference to now is (12-13 + (1-2)*24) = -25. The result of -25 modulo 24 is 23 because the next lower multiple of 24 is -48 and -25-(-48) is 23.

Unfortunately JavaScript does not support true modulo operations on negative numbers out of the box. The % operator does a similar thing, it results in the modulo of the unsigned value. However, you can easily implement your own true modulo method:

  (dividend % divisor) + divisor) % divisor

Actually we do not calculate in hours but milliseconds, thus we take the milliseconds per day as divisor. So the difference of two dates modulo milliseconds per day will give you the milliseconds until the clock will show the time component contained in the Date object. We add this to the current time and get the next alarm time. This way we can compare the Date object and calculate the difference from the current time.

Further more there are several problems with dates in browsers. The timer functions do not work accurately. You may experience a drift with setInterval() . I tested this on Firefox and the inverval is fired each time some milliseconds later. This is quickly accumulated into seconds and minutes.

As workaround we can use setTimeout() and calculate the next full second when to fire based on the current time, however, the callback might be fired even some milliseconds too early. Thus we cannot rely on getSeconds() of the Date object. Due to that fact we need to implement an approximation which will round to full seconds or 1/100 seconds.

We can extend the prototype of the Date object to improve the usability.

 $(() => { const millisecondsPerDay = 1000*60*60*24, milliSecTolerance = 0, // timer functions in browser do not work exactly clockPrecision = 10, // timer functions in browser do not work exactly, round to 10 millisec. emptyTimeString = new Date().toLocaleTimeString().replace(/\\d/g, '-') // eg '--:--:--'; ; // Since JavaScript % operator does not work propperly on neg. numbers, we want a true Modulo operation. // 23 mod 10 = 3 (correct); -23 mod 10 = 7 (means 7 more than -30, %-op gives 3) // We could do that in a Number prototype method: Object.defineProperties(Number.prototype, { mod : { value: function(n) { return ((this%n)+n)%n; } } }); function lowerPrecision(operand, precision) { if(void 0 === precision) precision = clockPrecision; let result = Math.round(operand.valueOf() / precision)*precision; return Date.prototype.isPrototypeOf(operand) ? new Date(result) : result; } // Let's extend the Date object to make it more handy Object.defineProperties(Date.prototype, { toUTCTimeHMS : { value: function() { return this.toUTCString().match(/(.{8}) GMT/)[1];; }}, setFormattedTime : { value: function(timeString) { this.setHours(...timeString.split(/[:.]/)); return this; // support chaining }}, getApproximateDate : { value: function(precision) { if(void 0 === precision) precision = clockPrecision; return lowerPrecision(this, precision); }}, getApproximateTime : { value: function(precision) { return this.getApproximateDate().getTime(); } }, // Returns the next date/time when the time component will be reached nextDailyTimeDate : { get : function() { let now = Date.getApproxNow(); return new Date(now + (this-now).mod(millisecondsPerDay)); }}, }); // Timers do not work accurately. The might execute even some milliseconds too early. // Let's define a custom functional now-property that gives an approximated value in steps of some milliseconds. Object.defineProperties(Date, { getApproxNow : { value: (precision) => lowerPrecision(Date.now(), precision) }, getDateApproxNow : { value: (precision) => new Date().getApproximateDate(precision) }, }); // =================================================================================== var nextTick, alarms = [] ; function Alarm(tr, collection) { let $tr = $(tr) , input = $tr.find('td>input')[0], th = $tr.find('th' )[0], tdRemaining = $tr.find('td' )[1] ; Object.defineProperties(this, { tr : { get: () => tr }, th : { get: () => th }, input : { get: () => input }, remaining : { get: () => tdRemaining }, collection: { get: () => collection }, }); this.update(); this.registerEvents(); } // shared prototype doing all the stuff Alarm.prototype = new function() { Object.defineProperties(this, { update : { value: function () { this._nextDate = new Date().setFormattedTime(this.input.value).nextDailyTimeDate; this.collection.updateDisplay(); }}, nextDate : { get: function() { return this._nextDate; }, set: function(value) { let date; switch(Object.getPrototypeOf(value)) { case Date: date = value; break; case String.prototype: date = new Date().setFormattedTime(value); break; case Number.prototype: date = new Date(value); break; default: return null; } this._nextDate = date.nextDailyTimeDate; this.input.value = this._nextDate.toLocaleTimeString(); } }, registerEvents : { value: function() { $(this.tr).find('input').on('change', (ev) => { this.update(); }); }}, valueOf : { value: function() { return this._nextDate } }, remainingTime : { get : function() { return new Date(this._nextDate.getApproximateTime()); } }, updateDisplay : { value: function() { this.remaining.innerText = this === this.collection.nextAlarm ? new Date(this.remainingTime - Date.getDateApproxNow()).toUTCTimeHMS() : emptyTimeString ; if(this._nextDate.getApproximateTime() > Date.getDateApproxNow()) return; this.update(); return true; }}, }); }; Object.defineProperties(alarms, { updateDisplay : { value: function() { let changed = false; do for(let i in this) if(changed = this[i].updateDisplay()) break; while(changed); // refresh display of all alarms when any data has changed while processing }}, nextAlarm : { get : function() { return this.length ? this.reduce((acc, cur) => cur.nextDate<acc.nextDate ? cur:acc) : null ; }}, }); $('#alarm-table tr:nth-child(n+2)').each( (i, tr) =>alarms[i] = new Alarm( tr, alarms ) ); function onTick() { alarms.updateDisplay(); } (function tickAtFullSeconds() { onTick(); nextTick = setTimeout(tickAtFullSeconds, milliSecTolerance + 1000 - new Date().getMilliseconds()); })(); $('#test-button').click((ev) => { time = Date.now(); alarms.forEach(i=>i.nextDate = (time += 5000)); }); window.alarms = alarms; //DEBUG global access from browser console });

 tr:nth-child(n+2)>th { text-align: left; background-color: silver; } td { background-color: lightgray; } th { background-color: grey; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Alarm</title> <link rel="stylesheet" href="AlarmTimer.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <h1> Alarm Timer </h1> <h2 id="message"></h2> <table id="alarm-table"> <tr> <th>Alarm</th> <th>Time</th> <th>Remaining</th> </tr> <tr id="waking-up-time"> <th>waking-up time</th> <td class="time" ><input type="time" step="1" value="07:15:00"></td> <td class="remaining"> --:--:--</td> </tr> <tr id="noon-hour"> <th>noon hour</th> <td class="time" ><input type="time" step="1" value="12:00:00"></td> <td class="remaining"> --:--:--</td> </tr> <tr id="bed-time"> <th>bed time</th> <td class="time" ><input type="time" step="1" value="22:00:00"></td> <td class="remaining"> --:--:--</td> </tr> </table> <button id="test-button">set test times</button> </body> </html>

Answer 2

Here is my code. It starts a count down and then stops when seconds are zero.

import React, { useState, useEffect } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
    const [ minutes, setMinutes ] = useState(0);
    const [ seconds, setSeconds ] = useState(0);

    let userMints = 60;
    let time = userMints * 60;
    const showCountDown = () => {
        const minutes = Math.floor(time / 60);
        let seconds = time % 60;

        if (seconds < 0) {
            setMinutes(0);
            setSeconds(0);
            return;
        } else {
            setMinutes(minutes);
            setSeconds(seconds);
            time--;
        }
        return;
    };

    useEffect(() => {
        callTimerAfterEverySec();
    }, []);

    const callTimerAfterEverySec = () => {
        setInterval(() => {
            showCountDown();
        }, 1000);
    };

    const renderStatus = () => {
        if (seconds === 0 && minutes === 0) {
            return (
                <div>
                    <p>Time Up</p>
                </div>
            );
        } else {
            return (
                <div>
                    <p>
                        {minutes}:{seconds}
                    </p>
                </div>
            );
        }
    };

    return (
        <div className="App">
            {renderStatus()}
            <p>{/* {minutes}:{seconds} */}</p>
        </div>
    );
}

export default App;

Answer 3

$(document).ready(function () {

  function countdown() {
     var bt = "23:00",  // 11:00 PM
         wt = "08:00";  // 08:00 AM


    var today = new Date(),
        dd = today.getDate(),
        mm = today.getMonth()+1,
        yyyy = today.getFullYear();

    var startTime = new Date(mm + '/' + dd + '/' + yyyy + ' ' + wt),
        endTime = new Date(mm + '/' + dd + '/' + yyyy + ' ' + bt);

    setInterval(function() {
       var now = new Date();
       var nowdd = today.getDate();
       var nowTime = now.getTime();
      if(dd !== nowdd) {
        dd = nowdd;
        startTime = new Date(dd + '/' + mm + '/' + yyyy + ' wt');
        endTime = new Date(dd + '/' + mm + '/' + yyyy + ' bt');
      }

      if(nowTime > startTime && nowTime < endTime) {
         // Find the distance between now and the count down date
            var distance = endTime - nowTime;

            // Time calculations for days, hours, minutes and seconds
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
                minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)),
                seconds = Math.floor((distance % (1000 * 60)) / 1000);
            $("#countDown").val(hours + ":" + minutes + ":" + seconds);
         } else {
           $("#countDown").val("00:00:00");
         }
    }, 1000);
  }
  countdown();
});

On CodePen .