在带有倒计时功能的页面中使图像居中并响应

<div class="container">
  <div id="countdown">倒计时</div>
  <img src="image.jpg" alt="图像">
</div>

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh; /* 设置容器高度为视口高度，使其居中 */
}

img {
  max-width: 100%; /* 图像宽度最大为容器宽度 */
  height: auto; /* 图像高度自适应 */
}

/* 媒体查询，根据屏幕宽度调整容器布局 */
@media screen and (max-width: 768px) {
  .container {
    flex-direction: row;
  }
}

// 获取倒计时元素
var countdownElement = document.getElementById('countdown');

// 设置倒计时时间（以毫秒为单位）
var countdownTime = 60000; // 60秒

// 更新倒计时时间并显示在页面上
function updateCountdown() {
  var minutes = Math.floor(countdownTime / 60000);
  var seconds = Math.floor((countdownTime % 60000) / 1000);

  countdownElement.textContent = minutes + '分' + seconds + '秒';

  // 倒计时结束时执行的操作
  if (countdownTime <= 0) {
    clearInterval(countdownInterval);
    countdownElement.textContent = '倒计时结束';
  } else {
    countdownTime -= 1000; // 每秒减少1000毫秒
  }
}

// 每秒更新倒计时时间
var countdownInterval = setInterval(updateCountdown, 1000);