'use strict';
const countdown = () => {
// function to calcute time until launch in Days/Hours/Minutes/Seconds
// time difference
const countDate = new Date('May 25, 2024 00:00:00').getTime();
const now = new Date().getTime();
const gap = countDate - now;
const second = 1000;
const minute = second * 60;
const hour = minute * 60;
const day = hour * 24;
const textDay = Math.floor(gap / day);
const textHour = Math.floor((gap % day) / hour);
const textMinute = Math.floor((gap % hour) / minute);
const textSecond = Math.floor((gap % minute) / second);
// update time in HTML
document.querySelector('.day').innerText = textDay;
document.querySelector('.hour').innerText = textHour;
document.querySelector('.minute').innerText = textMinute;
document.querySelector('.second').innerText = textSecond;
};
// runs function every second
setInterval(countdown, 1000);* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
font-family: 'Rubik', sans-serif;
color: #f8f9fa;
}
.countdown-container {
color: #343a40;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
background-image: linear-gradient(
rgba(34, 34, 34, 0.1),
rgba(34, 34, 34, 0.1)
),
url(./img/countdown.jpg);
background-size: cover;
}
.countdown-container h2 {
letter-spacing: 0.1rem;
font-size: 10rem;
font-weight: 700;
padding: 5rem;
padding-bottom: 8vh;
}
.countdown {
display: flex;
text-align: center;
justify-content: space-around;
}
.day,
.hour,
.minute,
.second {
font-size: 5rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css">
<title>Test</title>
</head>
<body>
<section class="countdown-container">
<div>
<h2 class="countdown-header">Time until Launch</h2>
<div class="countdown">
<div class="container-day">
<h3 class="day">Time</h3>
<h3>Days</h3>
</div>
<div class="container-hour">
<h3 class="hour">Time</h3>
<h3>Hours</h3>
</div>
<div class="container-minute">
<h3 class="minute">Time</h3>
<h3>Minutes</h3>
</div>
<div class="container-second">
<h3 class="second">Time</h3>
<h3>Seconds</h3>
</div>
</div>
</div>
</section>
<script src="./app.js"></script>
</body>
</html>,你好我构建了一个倒计时计时器，但是每次数字更新时元素都会移动一点。我该如何预防呢?我添加了代码，在代码片段中你可以看到问题…
(随机文本，我不能张贴没有添加更多的文本…爱，就是爱，就是爱，就是爱，就是爱。[/p] [/p] [/p]
谢谢:)
原因是.countdown中的justify-content: space-around;。由于保存秒(和所有其他)的div没有定义宽度，因此在使用可变宽度字体时，包含div的宽度会随着文本宽度的变化而变化。然后justify-content: space-around;尽职尽责地调整行，以确保一切都是均匀间隔。
如果你的设计目标允许的话，你也可以尝试一种等宽字体。
我为所有的时间段添加了一个宽度来防止这种情况。
div.countdown>div {
width: 40px;
}
我使用了一个固定的40px宽度，这可能不适合你。我尝试了25%的宽度，也可以工作，但秒仍然移动一点。
'use strict';
const countdown = () => {
// function to calcute time until launch in Days/Hours/Minutes/Seconds
// time difference
const countDate = new Date('May 25, 2024 00:00:00').getTime();
const now = new Date().getTime();
const gap = countDate - now;
const second = 1000;
const minute = second * 60;
const hour = minute * 60;
const day = hour * 24;
const textDay = Math.floor(gap / day);
const textHour = Math.floor((gap % day) / hour);
const textMinute = Math.floor((gap % hour) / minute);
const textSecond = Math.floor((gap % minute) / second);
// update time in HTML
document.querySelector('.day').innerText = textDay;
document.querySelector('.hour').innerText = textHour;
document.querySelector('.minute').innerText = textMinute;
document.querySelector('.second').innerText = textSecond;
};
// runs function every second
setInterval(countdown, 1000);* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
font-family: 'Rubik', sans-serif;
color: #f8f9fa;
}
.countdown-container {
color: #343a40;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
background-image: linear-gradient(
rgba(34, 34, 34, 0.1),
rgba(34, 34, 34, 0.1)
),
url(./img/countdown.jpg);
background-size: cover;
}
.countdown-container h2 {
letter-spacing: 0.1rem;
font-size: 10rem;
font-weight: 700;
padding: 5rem;
padding-bottom: 8vh;
}
.countdown {
display: flex;
text-align: center;
justify-content: space-around;
}
.day,
.hour,
.minute,
.second {
font-size: 5rem;
}
div.countdown>div {
width: 40px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css">
<title>Test</title>
</head>
<body>
<section class="countdown-container">
<div>
<h2 class="countdown-header">Time until Launch</h2>
<div class="countdown">
<div class="container-day">
<h3 class="day">Time</h3>
<h3>Days</h3>
</div>
<div class="container-hour">
<h3 class="hour">Time</h3>
<h3>Hours</h3>
</div>
<div class="container-minute">
<h3 class="minute">Time</h3>
<h3>Minutes</h3>
</div>
<div class="container-second">
<h3 class="second">Time</h3>
<h3>Seconds</h3>
</div>
</div>
</div>
</section>
<script src="./app.js"></script>
</body>
</html>