如何在 HTML 中使用 JavaScript 实现花式进度条效果？

文章标签： html JavaScript

2023-05-04 17:44:25 发布

可以使用 JavaScript 来实现花式进度条效果。具体操作如下：

在 HTML 中创建一个进度条容器，如下所示：

<div class="progress-bar"></div>

在 CSS 中设置进度条容器的样式，如下所示：

.progress-bar {
  width: 100%;
  height: 10px;
  background-color: #ddd;
  position: relative;
}

在 JavaScript 中编写进度条动画，如下所示：

// 获取进度条容器
var progressBar = document.querySelector('.progress-bar');

// 设置进度条动画
function setProgress(percent) {
  var barWidth = progressBar.clientWidth;
  var progressWidth = percent / 100 * barWidth;
  var progress = document.createElement('div');
  progress.style.width = progressWidth + 'px';
  progress.style.height = '100%';
  progress.style.backgroundColor = '#f00';
  progress.style.position = 'absolute';
  progress.style.top = 0;
  progress.style.left = 0;
  progressBar.appendChild(progress);
  var animation = progress.animate([
    { transform: 'translateX(-100%)' },
    { transform: 'translateX(0%)' }
  ], {
    duration: 1000,
    fill: 'forwards'
  });
}

// 测试进度条动画
setProgress(25);
setProgress(50);
setProgress(75);
setProgress(100);

在 HTML 中引入 JavaScript 文件，如下所示：

<script src="progress-bar.js"></script>

整体代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>花式进度条效果</title>
  <style>
    .progress-bar {
      width: 100%;
      height: 10px;
      background-color: #ddd;
      position: relative;
    }
  </style>
</head>
<body>
  <h3>花式进度条效果</h3>
  <p>可以使用 JavaScript 来实现花式进度条效果。具体操作如下：</p>
  <ol>
    <li>在 HTML 中创建一个进度条容器，如下所示：</li>
    <pre><code>&lt;div class="progress-bar"&gt;&lt;/div&gt;</code></pre>
    <li>在 CSS 中设置进度条容器的样式，如下所示：</li>
    <pre><code>.progress-bar {
  width: 100%;
  height: 10px;
  background-color: #ddd;
  position: relative;
}</code></pre>
    <li>在 JavaScript 中编写进度条动画，如下所示：</li>
    <pre><code>// 获取进度条容器
var progressBar = document.querySelector('.progress-bar');

// 设置进度条动画
function setProgress(percent) {
  var barWidth = progressBar.clientWidth;
  var progressWidth = percent / 100 * barWidth;
  var progress = document.createElement('div');
  progress.style.width = progressWidth + 'px';
  progress.style.height = '100%';
  progress.style.backgroundColor = '#f00';
  progress.style.position = 'absolute';
  progress.style.top = 0;
  progress.style.left = 0;
  progressBar.appendChild(progress);
  var animation = progress.animate([
    { transform: 'translateX(-100%)' },
    { transform: 'translateX(0%)' }
  ], {
    duration: 1000,
    fill: 'forwards'
  });
}

// 测试进度条动画
setProgress(25);
setProgress(50);
setProgress(75);
setProgress(100);</code></pre>
    <li>在 HTML 中引入 JavaScript 文件，如下所示：</li>
    <pre><code>&lt;script src="progress-bar.js"&gt;&lt;/script&gt;</code></pre>
  </ol>
  <div class="progress-bar"></div>
</body>
</html>

2023-05-09 20:41:15 更新

上一篇：如何在 HTML 中使用 Slick 插件实现优美的轮播效果？下一篇：如何在 HTML 中使用 CSS3 实现气泡提示效果？

相关推荐