javascript倒數時間格式

Question

我有一個JavaScript倒計時，您可以在這里看到。

我在這行中設置了截止時間：

var deadline = '12/15/2015';

它是MM / DD / YYYY格式。 我想將其更改為DD / MM / YYYY格式。 我該如何更改？

另一件事是，截止日期結束時，倒數會變為負數。 如何設置“截止日期已過”之類的文本。 倒計時何時結束？

javascript

function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.now();
  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.querySelector('.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);
}


var deadline = '12/15/2015';

initializeClock('clockdiv', deadline);

html

<div id="clockdiv">

    <span class="days"></span>
    Days


    <span class="hours"></span>
    Hours


    <span class="minutes"></span>
    Minutes


    <span class="seconds"></span>
    Seconds

</div>

jsfiddle http://jsfiddle.net/0kppf1m2/

Answer 1

1）創建第二個div來顯示“截止日期已過”消息，當時間結束時，將其設置為可見，並將時鍾設置為隱藏，如工作示例所示

HTML：

<div id="timeIsNow" class="hidden-div">
  Deadline is past
</div>

<div id="clockdiv" class="visible-div">

  <span class="days"></span> Days


  <span class="hours"></span> Hours


  <span class="minutes"></span> Minutes


  <span class="seconds"></span> Seconds

</div>

js：

function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.now();
  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.querySelector('.seconds');

  function updateClock() {
    var t = getTimeRemaining(endtime);

    if (t.total <= 0) {
      document.getElementById("clockdiv").className = "hidden-div";
      document.getElementById("timeIsNow").className = "visible-div";
      clearInterval(timeinterval);
      return true;
    }

    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);

  }

  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}


var deadline = '2015-12-14T20:14:00+02:00';

initializeClock('clockdiv', deadline);

CSS：

.hidden-div {
  visibility: hidden;
}
.visible-div {
  visibility: visible;
}

2）要將日期從DDMMYYY轉換為MMDDYYY，請使用以下功能：

var d1 = "15/12/2015"
d1 = d1.split('/');
var d2 = d1[1]+'/'+d1[0]+'/'+d1[2];

Answer 2

我修改了一點代碼。

您必須在達到最后期限后清除間隔，並更改時鍾容器的innerHTML 。

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.querySelector('.seconds');
  var timeinterval = setInterval(updateClock, 1000);
  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) {
      clock.innerHTML = 'time is up';
      clearInterval(timeinterval);
    }
  }
}

小提琴

您可以通過多種方式創建Date對象。 我建議使用new Date(year, month, day, hours, minutes, seconds, milliseconds) 。 更多信息在這里 。