javascript - 如何在网页上的倒计时时钟中设置单个数字的样式？

Question

你好……我的任务是创建一个包含倒计时的网页。我已经设法用 HTML 和 Javascript 创建了时钟，但我遇到的问题是格式。客户希望在不同的单独圈子中显示天数、小时数和分钟数。不是动画，只是简单。我已经尝试了一些没有结果的事情。我想也许如果我为天、小时和分钟创建一个单独的时钟，那会起作用，但是当我这样做时，时钟就会消失。希望得到一些建议。太感谢了。

我使用的时钟代码如下：

<script>
var countDownDate = new Date("Feb 14, 2021 15:37:25").getTime();


var x = setInterval(function() {


var now = new Date().getTime();


var distance = countDownDate - now;


var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);


document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m ";


if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "We Are Live!";
}
}, 1000);
</script>

我使用的 CSS 如下，但我只能在我只有一个时间的时候才能让它工作，比如只有几天。

.demo{
    border-radius: 50%;
    width: 50px;
    height: 50px;
    padding: 10px;
    background: #fff;
    border: 3px solid #000;
    color: #000;
    text-align: center;
    font: 30px cantata;
    display: flex; /* or inline-flex */
    align-items: center; 
    justify-content: center;
  }
</style>

标签： javascripthtmlcss

Answer 1

只需将小时、分钟和秒放在它们自己的容器中并分别设置它们的样式，例如：

<div id="demo">
    <span id="hours"/>:
    <span id="minutes"/>:
    <span id="seconds"/>
</div>