Question

我试图设置javascript日期计数器的输出样式。我需要能够设计日，小时，分钟和时间。秒分开。我想用它自己的左边和顶部绝对值右对齐它自己的div。当我尝试这样做时，计时器不会取代之前的数字，但会增加它们，造成一个大混乱。

这是我尝试单独设置样式的输出代码：

document.getElementById(id).innerHTML = days + 'days ';
document.getElementById(id).innerHTML += hours + 'hrs ';
document.getElementById(id).innerHTML += minutes + 'mins ';
document.getElementById(id).innerHTML += seconds + 'secs';

Here's a fiddle of it working fine but without separate styling

但是，当我试图将它们放在单独的div中时，会发生疯狂的事情，哈哈。计数器不会更新，而只是添加数字。 Here's a fiddle of that

我该怎么做？

Answer 1

当您将innerHTML值插入div时，可以使用类将值包装在span内。

JSfiddle demo

document.getElementById(id).innerHTML = '<span class="days">' + days + 'days ';
document.getElementById(id).innerHTML += '<span class="hours">' + hours + 'hrs ';
document.getElementById(id).innerHTML += '<span class="minutes">' + minutes + 'mins ';
document.getElementById(id).innerHTML += '<span class="seconds">' + seconds + 'secs';

CountDownTimer('01/01/2016 10:01 AM', 'countdown');

function CountDownTimer(dt, id) {
  var end = new Date(dt);

  var _second = 1000;
  var _minute = _second * 60;
  var _hour = _minute * 60;
  var _day = _hour * 24;
  var timer;

  function showRemaining() {
    var now = new Date();
    var distance = end - now;
    if (distance < 0) {

      clearInterval(timer);
      document.getElementById(id).innerHTML = 'EXPIRED!';

      return;
    }
    var days = Math.floor(distance / _day);
    var hours = Math.floor((distance % _day) / _hour);
    var minutes = Math.floor((distance % _hour) / _minute);
    var seconds = Math.floor((distance % _minute) / _second);

    document.getElementById(id).innerHTML = '<span class="days">' + days + 'days ';
    document.getElementById(id).innerHTML += '<span class="hours">' + hours + 'hrs ';
    document.getElementById(id).innerHTML += '<span class="minutes">' + minutes + 'mins ';
    document.getElementById(id).innerHTML += '<span class="seconds">' + seconds + 'secs';
  }

  timer = setInterval(showRemaining, 1000);
}

#countdown {
  position: absolute;
  z-index: 5;
  left: 20px;
  top: 20px;
  color: #ff0000;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 32px;
  display: inline;
}
.days {
  color: lightblue;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  padding: 10px;
}
.minutes {
  color: tomato;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  padding: 10px;
}
.seconds {
  color: gray;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  padding: 10px;
}
.hours {
  color: tomato;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  padding: 10px;
}

<div id="countdown">


</div>

Answer 2

如果您要删除该行

document.getElementById(id).innerHTML = days + 'days ';

你会看到“制造一个大混乱。”。你必须先清除div才能把它们放到它们身上。

document.getElementById(id).innerHTML = '';

Answer 3

不是将所有时间元素添加到单个I中，而是在已有的div中创建4个单独的div。然后使用getElementById将每个时间元素放入其自己的div中。

这将允许您使用css为每个单独设置样式。

单独设置倒计时器的{j}输出

3 个答案: