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

Create a countdown timer in javascript that starts countdown after 1 hr

本文关键字:倒计时 计时器 1小时 开始 一个 javascript 创建      更新时间:2023-09-26

我试图创建一个页面,其中1小时的视频显示。接近视频的结尾,让我们说在53分钟,我想要一个倒计时计时器与链接显示。

我已经搜索了互联网,试图找到一个解决方案,但我只找到了一个参考,立即开始倒计时定时器,如这里所示。

注意:我也想采取当前时间(一旦计时器开始),所以我可以在php传递它作为$_GET变量。

这是我的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!

如果你使用的是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>

可以使用javascript函数

setTimeout(your_function(),60000);