如何在 JavaScript 中使用 new Date() 对象在 dom 中显示自定义时间？答案

【问题标题】：How to show custom time In dom using new Date() object in JavaScript?如何在 JavaScript 中使用 new Date() 对象在 dom 中显示自定义时间？
【发布时间】：2022-02-11 22:48:07
【问题描述】：

我是 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>

【问题讨论】：

标签： javascript class date object dom

【解决方案1】：

最后，我可以设法找到这个问题的答案，这里我们需要将时间转换为秒并使用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;
 }

【讨论】：