在 javascript 中创建一个倒计时计时器，在 1 小时后开始倒计时

Question

我正在尝试创建一个显示 1 小时视频的页面。在视频快结束时，假设在 53 分钟时，我想要一个带有链接的倒计时计时器。

我已经在互联网上搜索了一个解决方案，但我只找到了一个可以立即启动倒计时的参考，as seen here。

注意：我还想获取当前时间（一旦计时器开始），我可以将它作为 $_GET 变量传递给 php。

这是我的 HTML：

        <h1>Countdown Clock</h1>
<div id="clockdiv">
  <!-- <div>
    <span class="days"></span>
    <div class="smalltext">Days</div>
  </div> -->
  <div>
    <span class="hours"></span>
    <div class="smalltext">Hours</div>
  </div>
  <div>
    <span class="minutes"></span>
    <div class="smalltext">Minutes</div>
  </div>
  <div>
    <span class="seconds"></span>
    <div class="smalltext">Seconds</div>
  </div>
</div>

这是我的 JavaScript：

            function getTimeRemaining(endtime) {
      var t = Date.parse(endtime) - Date.parse(new Date());
      var seconds = Math.floor((t / 1000) % 60);
      var minutes = Math.floor((t / 1000 / 60) % 60);
      var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
      var days = Math.floor(t / (1000 * 60 * 60 * 24));
      return {
        'total': t,
        'days': days,
        'hours': hours,
        'minutes': minutes,
        'seconds': seconds
      };
    }

    function initializeClock(id, endtime) {
      var clock = document.getElementById(id);
      // var daysSpan = clock.querySelector('.days');
      var hoursSpan = clock.querySelector('.hours');
      var minutesSpan = clock.querySelector('.minutes');
      var secondsSpan = clock.querySele`enter code here`ctor('.seconds');

      function updateClock() {
        var t = getTimeRemaining(endtime);

        // daysSpan.innerHTML = t.days;
        hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
        minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
        secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

        if (t.total <= 0) {
          clearInterval(timeinterval);
        }
      }

      updateClock();
      var timeinterval = setInterval(updateClock, 1000);
      return
    }

    var currentdate = new Date(); 
    var dateTime =  (currentdate.getTime()/1000)/60;
    var startTimer = (dateTime)+.1;



    var deadline = new Date(Date.parse(new Date()) +60 * 60 * 1000);
    initializeClock('clockdiv', deadline);



    Any help would be appreciated. 
    Thanks!

Answer 1

如果您使用的是 HTML5 视频，则可以使用它的 API 轻松完成此操作。这取决于 IIFE 创建一个闭包来保持状态，因为在我对此的快速测试中，该事件在取消订阅之前仍会触发多次。

用您的代码替换 alert('Almost done...!') 以开始倒计时。

document.
querySelector('video').
addEventListener('timeupdate', function almostdone(e) {
  var _ = e.target,
    fired = false;
  (function() {
    if (_.currentTime / _.duration > .8 && !fired) {
      _.removeEventListener('timeupdate', almostdone);
      fired = true;
      alert('Almost done...!');
    }
  })();
});

<video controls="" autoplay="" height="360" width="640">
  <!-- MP4 must be first for iPad! -->
  <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
    <!-- Safari / iOS, IE9 -->
    <source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm">
      <!-- Chrome10+, Ffx4+, Opera10.6+ -->
      <source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg">
        <!-- Firefox3.6+ / Opera 10.5+ -->
        <!-- fallback to Flash: -->
        <object type="application/x-shockwave-flash" data="player.swf" height="360" width="640">
          <!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
          <param name="movie" value="player.swf">
          <param name="flashvars" value="autostart=true&amp;controlbar=over&amp;image=poster.jpg&amp;file=http://clips.vorwaerts-gmbh.de/VfE_flash.mp4">
          <!-- fallback image -->
          <img src="poster.jpg" alt="Big Buck Bunny" title="No video playback capabilities, please download the video below" height="360" width="640">
        </object>
</video>

Answer 2

你可以使用javascript函数

setTimeout(your_function(),60000);