javascript - 如何设置这个 javascript 倒数计时器的样式

Question

我一直在学习有关如何创建 JavaScript 倒数计时器的教程。我想在 <h1> 中显示每个标记，以便我可以使用 CSS 对其进行样式设置，但到目前为止我的所有尝试都失败了，老实说我不知道​​如何去做。感谢任何帮助

HTML

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

Javascript

// set the date we're counting down to
var target_date = new Date("Aug 15, 2019").getTime();

// variables for time units
var days, hours, minutes, seconds;

// get tag element
var countdown = document.getElementById("countdown");

// update the tag with id "countdown" every 1 second
setInterval(function () {

    // find the amount of "seconds" between now and target
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;

    // do some time calculations
    days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;

    hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;

    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);

    // format countdown string + set tag value
    countdown.innerHTML = days + "d, " + hours + "h, "
    + minutes + "m, " + seconds + "s";  

}, 1000);

Answer 1

没有必要使用标签。改为设置 span 的样式。

span#countdown {
    font-size: 48px;
    border: 3px solid black;
    padding: 5px;
    background-color: #ffe;
}

参见 http://jsfiddle.net/8mw6beqh/ .