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

Question

这是一个工作小提琴：     https://jsfiddle.net/dhqnad9a/

HTML：

<div class="aligned-center">        
<div id="countdown">
          <h5>Campaign Ends:</h5>
          <span class="sect" id="days"></span>
          <span class="sect" id="hrs"></span>
          <span class="sect" id="mins"></span>
          <span class="sect" id="secs"></span>
</div>
</div>

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？

以下是我希望做的事情：

Answer 1

在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>';

为新的.big和.small类定义CSS：

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

以下是更改：https://jsfiddle.net/vcsq40of/

编辑：由于我今天随机收到了这个答案的upvote，我想我会更新它以包含上面的Fiddle不再包含jQuery（我假设CDN从原来不再有了它它在那条路径上可用），并且它正在查看的日期已经过去（因此需要将其更改为将来的日期才能正常工作）。如果要查看此演示，可以使用该链接，添加jQuery并更改日期。或者您可以使用这个新的更新小提琴：https://jsfiddle.net/vcsq40of/1/

Answer 2

我做了类似这样的事情，确实让它们变得更大但是我无法做到更厚的＆＃34;看起来你似乎想要，但我喜欢这样的内联风格改变

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

Answer 3

只需使用span包装您想要具有不同样式的文本。 e.g。

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

注意上面代码中的<span class="sect2">days</span>。现在在css课程中定义您想要的.sect2，然后就完成了。

这是一个有效的JSFIDDLE