javascript水平进度条代码示例

温馨提示：这篇文章已超过239天没有更新，请注意相关的内容是否还可用！

JavaScript水平进度条是一种用于展示某个任务的完成进度的交互元素。它通常以一个长方形条形图的形式呈现，长度表示任务的总进度，而颜色的变化则表示任务的完成程度。下面是一个简单的JavaScript水平进度条的代码示例：


<!DOCTYPE html>
<html>
<head>
<style>
#progress-bar {
  width: 300px;
  height: 20px;
  background-color: #f2f2f2;
  border-radius: 5px;
}
#progress {
  width: 0%;
  height: 100%;
  background-color: #4caf50;
  border-radius: 5px;
  transition: width 0.5s;
}
</style>
</head>
<body>
<div id="progress-bar">
  <div id="progress"></div>
</div>
<script>
function updateProgressBar(progress) {
  var progressBar = document.getElementById("progress");
  progressBar.style.width = progress + "%";
}
// 示例用法
updateProgressBar(50); // 将进度条的完成度设置为50%
</script>
</body>
</html>

在上面的代码中，我们首先定义了两个CSS样式，一个用于进度条的外层容器（`#progress-bar`），一个用于表示进度的内层容器（`#progress`）。外层容器设置了固定的宽度和高度，并且有一个灰色的背景色和圆角边框。内层容器的宽度初始值为0%，高度为100%，背景色为绿色（表示任务完成），并且有圆角边框。我们还为内层容器添加了一个过渡效果，使得进度条的变化更加平滑。

接下来，我们定义了一个名为`updateProgressBar`的JavaScript函数，它接受一个参数`progress`，表示任务的完成度。在函数内部，我们通过`document.getElementById`方法获取到内层容器的DOM元素，并将其宽度设置为`progress` + "%"，从而改变进度条的完成度。

我们通过调用`updateProgressBar`函数来更新进度条的完成度。在示例中，我们将进度条的完成度设置为50%。你可以根据实际需求，通过调用`updateProgressBar`函数并传入不同的参数来更新进度条的完成度。