如何在JavaScript中使用newDate()物件在dom中顯示自定義時間？-有解無憂

我是 javascript 的初學者，我想做的是使用new Date()物件并顯示自定義的小時、分鐘和秒，但在countDown()函式中我必須傳遞完整的日期，它從那個日期開始計數。

例如，我的目標是我將數字 1 設為（小時），然后它應該開始倒計時。

如果有人可以幫助我，我將不勝感激

class Timer {
  constructor(holder) {

    var controller = {
      holder: holder,
      end: null,
      intervalID: 0,
      display: function () {
        var _second = 1000;
        var _minute = _second * 60;
        var _hour = _minute * 60;
        var _day = _hour * 24;

        var msg = "";

        var now = new Date();

        var distance = controller.end - now;
        if (distance < 0) {

          clearInterval(controller.intervalID);
          controller.holder.innerHTML = 'EXPIRED!';

          return;
        }

        var days = Math.floor(distance / _day);
        var hours = Math.floor((distance % _day) / _hour);
        var minutes = Math.floor((distance % _hour) / _minute);
        var seconds = Math.floor((distance % _minute) / _second);
        controller.holder.innerHTML = hours   ' Hours | '   minutes   ' Minutes | '   seconds   ' Seconds ';

      }
    };

    this.countDown = function (end) {
      controller.end = end;
      controller.intervalID = setInterval(controller.display, 1000);
    };
  }
}

var timers = {};

timers.one = new Timer(document.getElementById("one"));
timers.two = new Timer(document.getElementById("two"));
timers.three = new Timer(document.getElementById("three"));


//Hier I should be able to give a number
timers.one.countDown(new Date("Feb 30, 2022 15:37:25"));
timers.two.countDown(new Date(2022, 10, 29, 12, 40, 40));
timers.three.countDown(new Date(2022, 11, 9, 13, 45, 30));

 <div id="one"></div>
 <div id="two"></div>
 <div id="three"></div>

uj5u.com熱心網友回復：

最后，我可以管理并找到這個問題的答案，這里我們需要將時間轉換為秒并使用該getTime()方法，因此我們需要撰寫函式來完成這項作業。在下面你可以看到代碼。

function CreateEndTime(hours, minutes, seconds)
 {
   const result = new Date(new Date().getTime()   ConvertInMilliSeconds(hours, minutes, seconds));
   return result;
 }
 
 function ConvertInMilliSeconds(hours, minutes, seconds)
 {
   const result = (((hours * 60)   minutes) * 60)   seconds;
   return 1000 * result;
 }

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/426151.html

標籤：javascript 班级日期目的 dom

上一篇：將id添加到html樣式標簽會導致問題嗎？

下一篇：從React組件中呼叫函式