Question

我有一个javascript倒计时你可以看到here。

我在这一行设定了截止日期：

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，用于显示＆＃34;截止日期已过去＆＃34;当时间结束时，将其设置为可见并将时钟设置为隐藏，如working example

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

I modified your code a little bit.

You have to clear the interval after you reached the deadline and change the innerHTML of the clock's container.

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

Fiddle

And there are many ways you can create a Date object. I'd suggest using new Date(year, month, day, hours, minutes, seconds, milliseconds). More info here.

javascript倒计时时间格式化

2 个答案: