Question

我有一个简单的html页面，用于圣诞节倒计时。倒计时功能很好，运行正常，但问题是我想在一天的特定时间拨打视频。

所以我希望计时器继续运行，直到一小时说出来然后我想播放我的3分钟视频，一旦视频结束，我希望它能回到我的倒数计时器。

我试图为视频做计时器似乎没有发生任何事情，计时器继续播放。

这是我的所有代码......

HTML

<html>
  <head>
   <title>Xmas Countdown</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <script src="js/countdown.js"></script>
    <script src="js/video.js"></script>
  </head>
  <body onload="startTime()">
    <div id="header">
      <h1>Santa will be here in...</h1>         
    </div>
    <div id="del-countdown">
      <div id="clock"></div>
      <div id="units">
        <span>Days</span>
        <span>Hours</span>
        <span>Minutes</span>
        <span>Seconds</span>
      </div>
    </div>
    <div id="footer">
      <h2>Merry Christmas</h2>
    </div>
  </body>
</html>

的Video.js

function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    var video = document.createElement('video');

video.src = '/media/santa.mp4';
video.autoPlay = true;

    if(m=>00) {
        document.getElementById('video').src
    }
    var t = setTimeout(startTime, 500);
}

window.onload = ('startTime()');
};

COUNTDOWN.JS

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


function startTimer(id, deadline){
  var timerInterval = setInterval(function(){
    var clock = document.getElementById(id);
    var timer = updateTimer(deadline);

    clock.innerHTML = '<span>' + timer.days + '</span>'
                    + '<span>' + timer.hours + '</span>'
                    + '<span>' + timer.minutes + '</span>'
                    + '<span>' + timer.seconds + '</span>';


    //check for end of timer
    if(timer.total < 1){
      clearInterval(timerInterval);
      clock.innerHTML = '<span>0</span><span>0</span><span>0</span><span>0</span>';
    }


  }, 1000);
}


window.onload = function(){
  var deadline = new Date("December 25, 2016 00:00:00");
  startTimer("clock", deadline);
};

CSS

@font-face {
    font-family: Polo;
    src: url(fonts/Polo.ttf);
}
body{
    position: relative;
    background: #f21c0a;
    font-family: Polo;
    max-height: 100%;
}
h1{
  color: #fff;
  text-align: center;
  font-size: 100px;
  letter-spacing: 8px;
}
h2{
  color: #fff;
  text-align: center;
  font-size: 45px;
  letter-spacing: 8px;
}
#header{
  width: 100%;
  margin: 5% auto;
}
#footer{
  width: 100%;
    margin-top: 20% auto;
}
#del-countdown{
  width: 100%;
  margin: 10% auto;
}
#clock span{
  float: left;
  text-align: center;
  font-size: 150px;
  margin: 0 2.5%;
  color: #fff;
  padding: 50px;
  width: 20%;
  border-radius: 20px;
  box-sizing: border-box;
}
#clock span:nth-child(1){
  background: #fa3221;
}
#clock span:nth-child(2){
  background: #fa3221;
}
#clock span:nth-child(3){
  background: #fa3221;
}
#clock span:nth-child(4){
  background: #fa3221;
    color: #b90b01;
}
#clock:after{
  content: "";
  display: block;
  clear: both;
}
#units span{
  float: left;
  width: 25%;
  text-align: center;
  margin-top: 15px;
  color: #fff;
  text-transform: uppercase;
  font-size: 30px;
  letter-spacing: 1px;
}

在特定时间加载视频 - html，javascript

0 个答案: