JavaScript 倒数计时器到每天的特定时间答案

【问题标题】：JavaScript Countdown Timer to specific time everydayJavaScript 倒数计时器到每天的特定时间
【发布时间】：2020-06-18 21:17:08
【问题描述】：

我目前正在开发一个标题带有倒计时的网站：http://iphone.myhandykey.com/

当前计时器只有 12 小时 + 几分钟。我想要的是倒计时计时器将显示当前访问者所在时区到晚上 11 点的剩余时间。那可能吗？谢谢！

Here is the JavaScript:



function startTimer(duration, display) {
    var timer = duration, hours, minutes, seconds;
        setInterval(function () {



        hours = parseInt(((timer / 60) / 60 ) % 60, 10);



        minutes = parseInt((timer / 60)%60, 10);
        seconds = parseInt(timer % 60, 10);

        hours = hours < 10 ? "0" + hours : hours;
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = hours + ":" + minutes + ":" + seconds;



        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);
}

window.onload = function () {
    var onehour = 60 * 600 * 1.231,
        display = document.querySelector('#time');
    startTimer(onehour, display);
};

这里是 HTML：

<span id=time></span>

编辑：如果访问者的当前时间是例如晚上 11:40，它应该显示 23hrs & 20mins left..

【问题讨论】：

请分享您的代码并尽力找出问题所在。然后社区可以完成剩下的工作。
谢谢亚历克斯。我已经添加了脚本。
如果用户访问该页面并且已经显示当地时间晚上 11:19 怎么办？显示负时钟还是给他们 24:41:00 来决定？
如果访问者的当前时间是例如晚上 11:19，它应该显示 23hrs & 41mins left..

标签： javascript jquery

【解决方案1】：

(function() {
  var start = new Date;
  start.setHours(23, 0, 0); // 11pm

  function pad(num) {
    return ("0" + parseInt(num)).substr(-2);
  }

  function tick() {
    var now = new Date;
    if (now > start) { // too late, go to tomorrow
      start.setDate(start.getDate() + 1);
    }
    var remain = ((start - now) / 1000);
    var hh = pad((remain / 60 / 60) % 60);
    var mm = pad((remain / 60) % 60);
    var ss = pad(remain % 60);
    document.getElementById('time').innerHTML =
      hh + ":" + mm + ":" + ss;
    setTimeout(tick, 1000);
  }

  document.addEventListener('DOMContentLoaded', tick);
})();

Only &lt;span id='time'&gt;&lt;/span&gt; left!

【讨论】：

@smcd 请您建议将其扩展为包括一天吗？例如，我想将其设置为 6 月 23 日上午 10 点。
@Chips147 我认为这可以做到，保持 H:M:S 剩余格式jsfiddle.net/gantyev3

【解决方案2】：

类似这样的：

    $(document).ready(function () {
        var mg = new Date(2016, 5, 21, 0, 0, 0, 0);
        var tmr = window.setInterval(function () {
            var d = new Date();
            var dif = mg - d;
            var s = parseInt(dif / 1000);
if (s < 0) {
    document.getElementById('spCnt').innerHTML = 'Event starts';
    window.clearInterval(tmr);
    return;
}
            var sec = s % 60;
            var m = parseInt(s / 60);
            var min = m % 60;
            var h = parseInt(m / 60);
            var hour = h % 24;
            d = parseInt(h / 24);

            document.getElementById('spCnt').innerHTML = d + ' days ' + hour + ' hours ' + min + ' min and ' + sec + ' sec remaining';
        }, 1000);
    });

【讨论】：

感谢您的回复。我可以得到html代码吗？
html 代码？如果你愿意的话。 <span id="spCnt"></span>