JavaScript实现飞行娱乐系统指定时间自动重置倒计时功能

基础HTML结构 #

保留你已有的静态结构即可：

<div class="flighttime">
  3H 20M
</div>

JavaScript 核心逻辑 #

这段代码会自动解析初始时间、启动倒计时，归零后自动重置：

// 获取页面上的倒计时元素
const timerElement = document.querySelector('.flighttime');

// 解析时间字符串（如"3H 20M"）为总秒数
function convertToSeconds(timeString) {
  const hourMatch = timeString.match(/(\d+)H/);
  const minuteMatch = timeString.match(/(\d+)M/);
  const hours = hourMatch ? parseInt(hourMatch[1]) : 0;
  const minutes = minuteMatch ? parseInt(minuteMatch[1]) : 0;
  return hours * 3600 + minutes * 60;
}

// 初始化总秒数，同时保存初始值用于重置
let totalSeconds = convertToSeconds(timerElement.textContent.trim());
const initialTotal = totalSeconds;

// 更新倒计时显示内容
function updateDisplay() {
  const hours = Math.floor(totalSeconds / 3600);
  const minutes = Math.floor((totalSeconds % 3600) / 60);
  timerElement.textContent = `${hours}H ${minutes}M`;

  totalSeconds--;
  // 倒计时归零时重置为初始时间
  if (totalSeconds < 0) {
    totalSeconds = initialTotal;
  }
}

// 页面加载后立即渲染一次，之后每秒更新
updateDisplay();
setInterval(updateDisplay, 1000);

可选美化CSS #

如果要匹配附图右上角的视觉效果，可以添加以下样式：

.flighttime {
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.4);
  padding: 6px 10px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}

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