每天特定时间的JavaScript倒计时计时器

Question

我目前正在开发一个带有倒计时的网站，位于头条位置：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代码:

这是HTML：

<span id=time></span>

编辑：如果访问者当前的时间是晚上11:40，它应该显示剩下23小时20分钟。

- user329072

---

请分享您的代码，并尽力定位问题。然后社区就可以解决剩下的事情了。 - Alex Kudryashev

谢谢Alex。我已经添加了脚本。 - user329072

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - smcd

如果访问者当前时间是晚上11:19，那么应该显示还剩23小时41分钟。 - user329072

Answer 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 <span id='time'></span> left!

- smcd

---

@smcd，请问您能否建议如何扩展它以包括一天？例如，我想将其设置为倒计时到2020年6月23日上午10点，谢谢。 - Chips147

@Chips147 我认为这样做可以，保持 H:M:S 剩余格式 https://jsfiddle.net/gantyev3/ - smcd

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

- Alex Kudryashev

---

谢谢你的回复。我能获取到HTML代码吗？ - user329072

HTML代码？如果您愿意的话，可以这样写：<span id="spCnt"></span>。 - Alex Kudryashev