问Javascript倒计时计时器不会在零停止，也不会在给定时间重新启动

EN

  (dividend % divisor) + divisor) % divisor

$(() =>
{
  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, '-')   // e.g. '--:--:--';
  ;


  // 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>

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;

$(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();
});