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

Question

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

Answer 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;
 }

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

How to show custom time In dom using new Date() object in JavaScript?

javascript

dom

date

class

object