使用JavaScript更新倒计时内容时如何防止HTML元素移位

问题核心原因 #

移位问题是两个因素共同导致的：

• 当前使用的Rubik字体为比例宽度字体，不同数字的渲染宽度不一致，数字切换时会导致元素宽度变化
• 天/时/分/秒的外层容器没有固定宽度，flex布局的space-around规则会随内容宽度变化自动调整间距，最终出现整体移位

具体修复步骤 #

1. 新增CSS规则修正布局和数字宽度 #

在你的CSS代码中添加如下样式：

/* 给每个时间单元容器设置固定最小宽度，避免布局随内容伸缩 */
.container-day,
.container-hour,
.container-minute,
.container-second {
  min-width: 8rem; /* 可根据实际显示效果调整数值大小 */
}

/* 让数字使用等宽渲染模式，保证所有数字宽度一致，无需更换字体 */
.day,
.hour,
.minute,
.second {
  font-size: 5rem;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum"; /* 兼容低版本浏览器 */
}

2. （可选）JS中添加数字补零逻辑，固定数字位数 #

修改JS代码，给小于10的数字前补0，进一步避免位数变化带来的宽度波动：

'use strict';
// 新增补零工具函数
const padZero = (num) => num < 10 ? `0${num}` : num;

const countdown = () => {
  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 = padZero(Math.floor(gap / day));
  const textHour = padZero(Math.floor((gap % day) / hour));
  const textMinute = padZero(Math.floor((gap % hour) / minute));
  const textSecond = padZero(Math.floor((gap % minute) / second));

  document.querySelector('.day').innerText = textDay;
  document.querySelector('.hour').innerText = textHour;
  document.querySelector('.minute').innerText = textMinute;
  document.querySelector('.second').innerText = textSecond;
};

setInterval(countdown, 1000);

修改完成后数字切换时元素宽度不会发生变化，即可解决移位问题。

内容的提问来源于stack exchange，提问作者this_is_the_username