倒计时到年底- JS

Countdown till the end of the year - JS

本文关键字：JS 倒计时      更新时间：2023-09-26

我正在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>

你的截止日期应该是:

var deadline = new Date("January 1, 2017 00:00:00")
相关文章：