使用 JavaScript 更改内容后防止 HTML 元素移动答案

【问题标题】：Prevent HTML elements from moving after changing content with JavaScript使用 JavaScript 更改内容后防止 HTML 元素移动
【发布时间】：2021-12-03 21:09:38
【问题描述】：

'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>

嗨，

我建立了一个倒数计时器，但每次更新数字时，元素都会移动一点。我怎样才能防止这种情况？我加了代码，在代码sn-p中就可以看到问题了……

（随机文本，如果不添加更多文本，我将无法发布... Lorem, ipsum dolor 坐在 amet consectetur adipisicing elit。 Porro quiinvente ad fugit ea non harum est quas deserunt quia！）

谢谢:)

【问题讨论】：

因为你的第二个 wrap div 的宽度太紧了。请在该元素中添加静态宽度或调整宽度

标签： javascript html css

【解决方案1】：

造成这种情况的是justify-content: space-around; 中的.countdown。由于保存秒（和所有其他）的 div 没有定义的宽度，当使用可变宽度字体时，包含 div 的宽度会随着文本宽度的变化而变化。然后justify-content: space-around; 尽职尽责地调整行以确保所有内容均等间隔。

如果您的设计目标允许，您也可以尝试使用等宽字体来帮助解决此问题。

我为所有时间段添加了宽度以防止这种情况发生。

div.countdown>div {
  width: 40px;
}

我使用了 40 像素的固定宽度，这可能不适合您。我也尝试了 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>

【讨论】：