如何创建带时间指示器的bootstrap自动隐藏模式？

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<div id="timeIndicator" class="alert alert-primary" role="alert">
  <span id="time"></span>
  <span id="message"></span>
</div>
<div id="content">
  <!-- 需要隐藏的内容 -->
</div>

function autoHideWithTimeIndicator() {
  // 获取时间指示器和内容的引用
  const timeIndicator = document.getElementById('timeIndicator');
  const content = document.getElementById('content');

  // 定义隐藏的时间间隔（以毫秒为单位）
  const hideDuration = 5000; // 5秒

  // 获取当前时间
  const currentTime = new Date();

  // 更新时间指示器
  const timeElement = document.getElementById('time');
  timeElement.textContent = currentTime.toLocaleTimeString();

  // 更新内容
  const messageElement = document.getElementById('message');
  messageElement.textContent = '内容将在5秒后自动隐藏';

  // 隐藏内容并重置时间指示器
  setTimeout(function() {
    content.style.display = 'none';
    timeIndicator.style.display = 'none';
  }, hideDuration);
}

// 在页面加载完毕后调用自动隐藏函数
window.addEventListener('load', autoHideWithTimeIndicator);