Flexbox文本无意中移动了倒计时计时器

Question

我正在制作一个倒计时计时器，当我的数字变成个位数时，数字下面的文本会移动。我尝试过不同的柔性盒配置，似乎无法阻止它移动。我想知道这是不是一个flexbox问题，或者我写的代码中是否缺少一些东西。

let countDownDate = new Date("Dec 17, 2022 00:00:00").getTime();
let x = setInterval(function() {
let now = new Date().getTime();
let distance = countDownDate - now;
let days = Math.floor(distance / (1000 * 60 * 60 * 24));
let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("days").innerHTML = days;
document.getElementById("hours").innerHTML = hours;
document.getElementById("minutes").innerHTML = minutes;
document.getElementById("seconds").innerHTML = seconds;
// clearing set interval. If we did not do this, the webpage would
// display negative numbers.
if (distance < 0) {
clearInterval(x);
document.getElementById("days").innerHTML = "00";
document.getElementById("hours").innerHTML = "00";
document.getElementById("minutes").innerHTML = "00";
document.getElementById("seconds").innerHTML = "00";
}
}, 1000);

* {
box-sizing: border-box;
}
.countdown {
display: flex;
height: 750px;
}
.time {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 60px;
padding: 5px;
}
.time h2 {
font-weight: bold;
font-size: 100px;
line-height: 1;
margin: 0 0 30px;
}
.time span {
font-size: 20px;
}
@media (max-width: 500px) {
h1 {
font-size: 45px;
}
.time {
margin: 5px;
}
.time h2 {
font-size: 12px;
}
.time span {
font-size: 10px;
}
}
body {
font-family: "Poppins", sans-serif;
color: aliceblue;
background-image: url("background.jpg");
background-repeat: no-repeat;
background-size: 2300px;
display: flex;
flex-direction: column;
align-items: left;
justify-content: left;
text-align: left;
margin: 0;
overflow: hidden;
}
h1 {
position: absolute;
top: 20px;
left: 50px;
font-size: 100px;
font-weight: lighter;
}

<h1>The <span>Final </span>Countdown</h1>
<div id="countdown" class="countdown">
<div class="time">
<h2 id="days">00</h2>
<span>Days</span>
</div>
<div class="time">
<h2 id="hours">00</h2>
<span>Hours</span>
</div>
<div class="time">
<h2 id="minutes">00</h2>
<span>Minutes</span>
</div>
<div class="time">
<h2 id="seconds">00</h2>
<span>Seconds</span>
</div>
</div>

Answer 1

因此.time框没有固定宽度。

请更新下面给出的.time的CSS代码，其中我删除了空白并添加了时间框的宽度。你可以选择宽度。width: 250px;

.time {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 5px;
width: 250px;
}

Answer 2

我不会用CSS来解决它，而是用JS来解决它。您可以将负数和0自动转换为00。

对于个位数的数字，改变这一点也是合乎逻辑的。只需使用padStart(2, '0')将每个数字显示为两位数即可。

出于安全(XSS注入(和性能(不需要重新解析DOM(的原因，我还更改了您的代码，并将innerHTML替换为textContent！

let countDownDate = new Date("Dec 17, 2022 00:00:00").getTime();
let x = setInterval(function() {
let now = new Date().getTime();
let distance = countDownDate - now;
let days = Math.floor(distance / (1000 * 60 * 60 * 24));
let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((distance % (1000 * 60)) / 1000)

document.getElementById("days").textContent = String(days).padStart(2, '0');
document.getElementById("hours").textContent = String(hours).padStart(2, '0');
document.getElementById("minutes").textContent = String(minutes).padStart(2, '0');
document.getElementById("seconds").textContent = String(seconds).padStart(2, '0');
seconds = toString(seconds).padStart(2, '0');
// clearing set interval. If we did not do this, the webpage would
// display negative numbers.
if (distance < 0) {
clearInterval(x);
document.getElementById("days").textContent = "00";
document.getElementById("hours").textContent = "00";
document.getElementById("minutes").textContent = "00";
document.getElementById("seconds").textContent = "00";
}
}, 1000);

* {
box-sizing: border-box;
}
.countdown {
display: flex;
height: 750px;
}
.time {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 60px;
padding: 5px;
}
.time h2 {
font-weight: bold;
font-size: 100px;
line-height: 1;
margin: 0 0 30px;
}
.time span {
font-size: 20px;
}
@media (max-width: 500px) {
h1 {
font-size: 45px;
}
.time {
margin: 5px;
}
.time h2 {
font-size: 12px;
}
.time span {
font-size: 10px;
}
}
body {
font-family: "Poppins", sans-serif;
color: aliceblue;
background-image: url("background.jpg");
background-repeat: no-repeat;
background-size: 2300px;
display: flex;
flex-direction: column;
align-items: left;
justify-content: left;
text-align: left;
margin: 0;
overflow: hidden;
}
h1 {
position: absolute;
top: 20px;
left: 50px;
font-size: 100px;
font-weight: lighter;
}

<h1>The <span>Final </span>Countdown</h1>
<div id="countdown" class="countdown">
<div class="time">
<h2 id="days">00</h2>
<span>Days</span>
</div>
<div class="time">
<h2 id="hours">00</h2>
<span>Hours</span>
</div>
<div class="time">
<h2 id="minutes">00</h2>
<span>Minutes</span>
</div>
<div class="time">
<h2 id="seconds">00</h2>
<span>Seconds</span>
</div>
</div>