Question

我正在努力进行JS倒计时，计算每一秒到2016年底，在2016年底，我将向用户显示一条消息。我的问题是我距离实际时间一小时我使用这个网站（https://www.timeanddate.com/counters/newyear.html）来查看我的倒计时是否显示正确的时间。

这是我的代码：

DetailsActivity

 public class DetailsActivity extends Activity {

 String merchantID;

 @Override
protected void onCreate(Bundle savedState) {

 super.onCreate(savedState);
    setContentView(R.layout.detailsactivity);

  Bundle extras = getIntent().getExtras();
    if (extras != null) {
        merchantID = extras.getString(Constants.MERCHANT_ID);
    }

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.
};

Answer 1

您的截止日期应为：

 <div style="display:inline-block; width:150px;">
                  <input type="text"  class="value1" id="mytarget" >
        <div class="monthly" id="mycalendar2"></div>
    </div>


              <div style="display:inline-block; width:150px;">
        <input type="text" id="mytarget1">
        <div class="monthly" id="mycalendar3"></div>
    </div>

倒计时直到年底 - JS

1 个答案: