倒计时直到今年年底 - JS

Question

我正在做一个倒计时的JS，计划每秒到2016年底，2016年底我会向用户显示一条消息。 我的问题是，我从实际时间离开了一个小时 我用这个网站（https://www.timeanddate.com/counters/newyear.html）来查看我的倒计时是否显示正确的时间。

这里是我的代码：

function updateTimer(deadline){ 
 
    // going to give us the new date and time when this function was called which is every second. 
 
    // also getting back the date and time of the instance of updateTimer was called. 
 
    // time = deadline the point we're counting too - time of the function was called. (in milliseconds) 
 
    // the object is going to work out based on the time difference. 
 
    // Math Floor always round DOWN. 
 
    // time/1000 = 1000 converted to seconds, 60 converted min,60 is hours, 24 is days 
 
    // time/1000 = 1000 converted to seconds, 60 converted min,60 is hours % 24 == how many hours left in the particular day. 100 % 24 = 4 hours 
 
    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 animateClock(span){ 
 
    span.className = "turn"; // giving a class turn into the injected span. 
 
    setTimeout(function(){ 
 
     span.className = ""; 
 
    },700); 
 
} 
 

 

 

 
// SetInterval going to be fired every second. 
 
function startTimer(id,deadline){ 
 
    var timerInterval = setInterval(function(){ 
 
    var clock = document.getElementById(id); //getting the match id from the DOM. 
 
    var timer = updateTimer(deadline); // generating a function and injecting it a deadline. 
 

 
    // ref to the HTML with div clock - concat the series of spans 
 
    clock.innerHTML = '<span>' + timer.days + '</span>' 
 
         +'<span>' + timer.hours + '</span>' 
 
         +'<span>' + timer.minutes + '</span>' 
 
         +'<span>' + timer.seconds + '</span>'; 
 

 

 

 
    // Animations 
 
     var spans = clock.getElementsByTagName("span"); // will get all the above spans that been injected to the clock div. 
 
     animateClock(spans[3]); // calling this function every second. 
 
     if(timer.seconds == 59) animateClock(spans[2]); // == 59 because we're going to be in a second 60 which is a minute. 
 
     if(timer.minutes == 59 && timer.seconds == 59) animateClock(spans[1]); 
 
     if(timer.hours == 23 && timer.minutes == 59 && timer.seconds == 59) animateClock(spans[0]); // when we getting to a new day. 
 

 

 

 
    // Check for the end of timer. 
 
     if(timer.total < 1){ //means the difference 
 
      clearInterval(timerInterval); 
 
      clock.innerHTML ='<span>0</span><span>0</span><span>0</span><span>0</span>'; 
 
     } 
 
    },1000); 
 
} 
 

 

 

 

 
// when the window loads fire this function. 
 
window.onload = function(){ 
 
    var deadline = new Date("January 1, 2017 23:59:59"); // Declare a deadline. 
 
    startTimer("clock",deadline); // we're going to inject into the clock id of the html the deadline. 
 
};

body{ 
 
    background: #282e3a; 
 
    font-family: Tahoma; 
 
} 
 

 
h1{ 
 
    color:#fff; 
 
    text-align: center; 
 
    font-size:74px; 
 
    letter-spacing: 10px; 
 
} 
 

 
#del-countdown{ 
 
    width:850px; 
 
    margin: 15% auto; 
 
} 
 

 

 
#clock span{ 
 

 
    float: left; 
 
    text-align: center; 
 
    font-size: 84px; 
 
    margin: 0 2.5%; 
 
    color:#fff; 
 
    padding: 20px; 
 
    width:20%; 
 
    border-radius: 20px; 
 
    box-sizing: border-box; 
 

 
} 
 

 
#clock span:nth-child(1){ 
 
    background: #DA3B36; 
 
} 
 

 
#clock span:nth-child(2){ 
 
    background: #2e6da4; 
 
} 
 

 
#clock span:nth-child(3){ 
 
    background: #f6bc58; 
 
} 
 

 
#clock span:nth-child(4){ 
 
    background: #5CB85C; 
 
} 
 

 

 
#clock:after{ 
 
    content: ""; 
 
    display: block; 
 
    clear: both; 
 
} 
 

 
#units span{ 
 
    float: left; 
 
    width:25%; 
 
    text-align: center; 
 
    margin-top: 30px; 
 
    color:#ddd; 
 
    text-transform: uppercase; 
 
    font-size: 13px; 
 
    letter-spacing: 2px; 
 
    text-shadow: 1px 1px 1px 1px rgba(10,10,10,0.7); 
 
} 
 

 

 
span.turn{ 
 
    animation: turn 0.5s ease forwards; 
 
} 
 

 
@keyframes turn{ 
 
    0%{transform: rotatex(0deg)} 
 
    100%{transform: rotatex(360deg)} 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Countdown</title> 
 
    <link href="style.css" rel="stylesheet" type="text/css"> 
 
</head> 
 
<body> 
 
<div id="del-countdown"> 
 
    <h1>COUNTDOWN</h1> 
 
    <div id="clock"></div> 
 
    <div id="units"> 
 
     <span>Days</span> 
 
     <span>Hours</span> 
 
     <span>Minutes</span> 
 
     <span>Seconds</span> 
 
    </div> 
 
</div> 
 

 
<script src="countdown.js"></script> 
 

 
</body> 
 
</html>

Answer 1

你的最后期限应该是：

var deadline = new Date("January 1, 2017 00:00:00")