如何将此Javascript分解为单独的CSS类？

这是一把小提琴：

HTML:

JavaScript:

CountDownTimer('October 21, 2015 19:00:00', 'countdown');
var days = document.getElementById('days');
var hrs = document.getElementById('hrs');
var mins = document.getElementById('mins');
var secs = document.getElementById('secs');

function CountDownTimer(date, id) {
var end       = new Date(date);

var _second   = 1000;
var _minute   = _second * 60;
var _hour     = _minute * 60;
var _day      = _hour * 24;
var timer;

var showRemaining = function() {
    var now = new Date();
    var distance = end - now;

    if (distance < 0) {
        clearInterval(timer);
        document.getElementById(id).innerHTML = 'ENDED!';
        return;
    }

    days.innerHTML = Math.floor(distance / _day) + '<br> days ';
    hrs.innerHTML  = Math.floor((distance % _day) / _hour) + '<br> hours ';
    mins.innerHTML = Math.floor((distance % _hour) / _minute) + '<br> mins ';
    secs.innerHTML = Math.floor((distance % _minute) / _second) + '<br> secs';
};

timer = setInterval(showRemaining, 1000);}

我想添加CSS样式，但不确定是否可以通过JS添加到数字中，例如，第1行到第2行的字体大小和重量不同

到目前为止，我只能通过.sect类更改这两个，我需要重写JS吗

以下是我希望做的：

---

我做了一些类似的事情，它确实使它们变大了，但我不能像你希望的那样得到更厚的外观，但我喜欢这种东西的内联样式更改

          <span class="sect" id="days" style="font-size:30px;font-weight:bold"></span>
          <span class="sect" id="hrs" style="font-size:30px;font-weight:bold"></span>
          <span class="sect" id="mins" style="font-size:30px;font-weight:bold"></span>
          <span class="sect" id="secs" style="font-size:30px;font-weight:bold"></span>

---

在JavaScript中，只需使用DIV或SPAN分别包装需要更改的文本，然后更改该类的CSS。换言之，请使用此选项：

days.innerHTML = "<span class='big'>" + Math.floor(distance / _day) + '</span><br><span class="small">days</span>';
hrs.innerHTML  = "<span class='big'>" + Math.floor((distance % _day) / _hour) + '</span><br><span class="small">hours</span>';
mins.innerHTML = "<span class='big'>" + Math.floor((distance % _hour) / _minute) + '</span><br><span class="small">mins</span>';
secs.innerHTML = "<span class='big'>" + Math.floor((distance % _minute) / _second) + '</span><br><span class="small">secs</span>';

以下是变化：

---

编辑：因为我今天随机收到了一份关于这个答案的更新投票，我想我应该更新它，让上面的提琴不再包含jQuery，我假设我最初提取它的CDN不再在该路径上可用，而且它正在查看的日期已经过去，因此需要将其更改为未来的日期才能正常工作。如果您想看这个演示，可以使用该链接，添加jQuery，并更改日期。或者您可以使用这个新更新的提琴：

只需将您希望具有不同样式的文本用span换行即可。 e、 g

注意上面代码中的日期。现在在.sect2类中定义所需的css，就完成了

---

这里有一个有效的

试试这个啊！我明白了，谢谢你，让我把这个作为一个解决方案。如果对您有帮助，请将其标记为答案。请将您的问题代码放在这里，而不仅仅是一个小提琴链接。将来@Barmar也可以，您能解释一下原因吗？这是SO的最佳实践吗？

days.innerHTML = "<span class='big'>" + Math.floor(distance / _day) + '</span><br><span class="small">days</span>';
hrs.innerHTML  = "<span class='big'>" + Math.floor((distance % _day) / _hour) + '</span><br><span class="small">hours</span>';
mins.innerHTML = "<span class='big'>" + Math.floor((distance % _hour) / _minute) + '</span><br><span class="small">mins</span>';
secs.innerHTML = "<span class='big'>" + Math.floor((distance % _minute) / _second) + '</span><br><span class="small">secs</span>';

.big{
    font:bold 12pt Arial, sans-serif;
    color:#777;
}
.small{
    font:bold 8pt Arial, sans-serif;
}

 days.innerHTML = Math.floor(distance / _day) + '<br> <span class="sect2">days</span> ';