游戏加载进度条实现代码详解

这段代码是用来实现一个游戏加载进度条的效果。代码中使用了 HTML 和 JavaScript 来创建一个进度条，在页面加载完成后会自动开始模拟加载进度。

HTML 部分包括一个容器 (class='container mt-5')，标题 (

游戏加载进度条

) 和一个进度条 (class='progress')。进度条里面有一个具有 id='progress-bar' 的元素，用于显示加载进度的进度条。

JavaScript 部分包括一个名为 simulateLoading 的函数，用于模拟加载进度。函数内部使用了 setInterval 定时器，每 0.5 秒增加一次进度值 (progress)，并更新进度条的样式、属性和显示文本。当进度达到 100% 时，清除定时器、移除动画效果、改变背景颜色，并显示'加载完成' 的文本。

最后，使用 addEventListener 监听 DOMContentLoaded 事件，在页面加载完成后调用 simulateLoading 函数，开始模拟加载进度。

代码示例:

<div class='container mt-5'>
  <h3>游戏加载进度条</h3>
  <div class='progress'>
    <div id='progress-bar' class='progress-bar' role='progressbar' aria-valuenow='0' aria-valuemin='0' aria-valuemax='100'></div>
  </div>
</div>

<script>
  // 模拟加载进度
  function simulateLoading() {
    var progressBar = document.getElementById('progress-bar');
    var progress = 0;
    var interval = setInterval(function() {
      progress += 1;
      progressBar.style.width = progress + '%';
      progressBar.setAttribute('aria-valuenow', progress);
      progressBar.innerHTML = progress + '%';
      if (progress >= 100) {
        clearInterval(interval);
        progressBar.classList.remove('progress-bar-animated');
        progressBar.classList.add('bg-success');
        progressBar.innerHTML = '加载完成';
      }
    }, 500);
  }

  // 页面加载完成后开始模拟加载进度
  document.addEventListener('DOMContentLoaded', function() {
    simulateLoading();
  });
</script>

代码解析:

• HTML 部分创建了一个进度条容器和一个用于显示进度的元素。
• JavaScript 部分使用 setInterval 定时器模拟加载进度，每 0.5 秒更新进度条的显示。
• 当进度达到 100% 时，清除定时器，更新进度条样式并显示'加载完成' 文本。
• 使用 DOMContentLoaded 事件确保在页面加载完成后才开始执行模拟加载进度。