单独设置倒数计时器的 JavaScript 输出样式答案

【问题标题】：Individually styling javascript output of a countdown timer单独设置倒数计时器的 JavaScript 输出样式
【发布时间】：2015-11-11 15:04:54
【问题描述】：

我正在尝试设置 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

我该怎么做？

【问题讨论】：

您可以包装 innerHTML 值的内容，然后设置样式。
它们是独立的元素，请从您的 += 代码中删除 +。
@ManojKumar 请解释一下如何？
@Jules 当我尝试它只打印秒数时。
我已经为你更新了。 jsfiddle.net/1dzuy7wc/8

标签： javascript html css

【解决方案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>

【讨论】：

太棒了，谢谢。我之前尝试过，但我写了+ '<span class="hours">' += hours + 'hrs '; 哪个不起作用：D += 在这种情况下是什么意思？
+= 相当于添加到已经存在的内容。 a += 6; 表示a = a+6;
您可以检查您的 Web 控制台是否有错误。在这种情况下，我得到了这个：ReferenceError: invalid assignment left-hand side ument.getElementById(id).innerHTML + '<span class="hours">' += hours + 'hrs ';，这意味着您试图添加到左侧尚未计算的多个操作数。

【解决方案2】：

如果您将删除该行

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

你会看到“制造大混乱”。你必须先清除 div，然后才能给它们放东西。

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

【讨论】：

【解决方案3】：

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

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

【讨论】：