javascript - 制作倒计时时钟

Question

我不知道如何更改此文字的字体、大小和颜色。

<script type="text/javascript">
    var end = new Date('02/19/2012 10:1 AM');

    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('countdown').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('countdown').innerHTML = days + 'days ';
        document.getElementById('countdown').innerHTML += hours + 'hrs ';
        document.getElementById('countdown').innerHTML += minutes + 'mins ';
        document.getElementById('countdown').innerHTML += seconds + 'secs';
    }

    timer = setInterval(showRemaining, 1000);
</script>
<div id="countdown"></div>

Answer 1

尝试这个示例:

只需在代码中添加新行:

document.getElementById('倒计时').style.cssText = '颜色:绿色；字体大小:40px;';

它将帮助您定义您想要的任何样式。

var end = new Date('02/19/2017 10:1 AM');

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('countdown').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('countdown').style.cssText = 'color: green; font-size: 40px;';
    document.getElementById('countdown').innerHTML = days + ' days ';
    document.getElementById('countdown').innerHTML += hours + ' hrs ';
    document.getElementById('countdown').innerHTML += minutes + ' mins ';
    document.getElementById('countdown').innerHTML += seconds + ' secs';
    
}

timer = setInterval(showRemaining, 1000);

<span id="countdown"></span>

正如注意到的那样@andlrc ，无需 JavaScript 即可完成。使用 CSS 样式。向您的 html 页面添加新样式

<style type="text/css">
    #countdown {

        color: green;
        font-size: 40px;
    }
</style>
<span id="countdown"></span>