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

您可以使用javascript功能

setTimeout(your_function(),60000);

Answer 2

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

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

＆＃13;

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...!');
    }
  })();
});

＆＃13;

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

＆＃13;

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

2 个答案: