使用Javascript创建进度条

引言

进度条是在Web开发中非常常见的元素，它可以对用户展示某个操作的进度，提升用户体验效果。在Javascript中，我们可以使用一些方法来创建简单的进度条，本文将介绍如何使用Javascript创建进度条。

创建简单进度条

Step 1：HTML结构

首先，我们需要在HTML中创建进度条的基本结构：

<div id="progress">

  <div id="bar"></div>
</div>

其中，外层的div元素是进度条的容器，内层的div元素是进度条的进度条段。

Step 2：CSS样式

接下来，我们需要使用CSS样式来美化进度条，设置进度条的高度、颜色、边框等等：

#progress {

  width: 300px;
  height: 20px;
  border: 1px solid #ddd;
}
#bar {
  width: 0%;
  height: 100%;
  background-color: #00bcd4;
}

以上CSS样式将设置进度条的宽度为300px，高度为20px，边框样式为1px的实线边框；进度条段的初始宽度为0%，高度为100%，背景颜色为#00bcd4。

Step 3：Javascript

最后，我们需要使用Javascript来实现进度条的动态效果，根据操作的进度来改变进度条段的宽度。这里我们可以使用setInterval函数来模拟一个定时器，每隔一段时间执行一个函数，这个函数将计算操作的进度并设置进度条段的宽度：

var progress = document.getElementById('bar');

var width = 1;
var timer = setInterval(function() {
  if (width >= 100) {
    clearInterval(timer);
  } else {
    width++;
    progress.style.width = width + '%';
  }
}, 10);

以上Javascript代码将获取进度条段的DOM元素，并且使用一个定时器来模拟进度条的动态效果。具体来说，我们使用一个变量width来表示当前的操作进度，初始值为1；然后使用setInterval函数来模拟一个定时器，每隔10毫秒执行一个函数，这个函数中将对这个进度变量加1，并且将新的值设置到进度条段的宽度样式中，实现进度条的动态效果。当进度变量width达到100时，我们使用clearInterval函数来清除定时器，结束进度条的动画效果。

改进进度条效果

Step 1：定义函数

当然，我们可以对上述代码进行改进，让进度条的效果更为完美。这里，我们可以先定义一个函数updateProgress，通过修改这个函数来实现不同的进度条效果：

function updateProgress(progress, value, time) {

  var start = new Date().getTime();
  var timer = setInterval(function() {
    var now = new Date().getTime();
    var elapsed = now - start;
    var complete = elapsed / time;
    if (complete > 1) {
      complete = 1;
    }
    var result = Math.floor(complete * value);
    progress.style.width = result + '%';
    if (complete >= 1) {
      clearInterval(timer);
    }
  }, 10);
}

以上代码定义了一个函数updateProgress，这个函数接受三个参数，分别是进度条DOM元素、最终值和时间。具体来说，我们首先获取函数调用开始时的时间点，然后使用setInterval函数来模拟一个定时器，每隔10毫秒执行一个函数。在这个函数中，我们获取当前时间与开始时间的时间差elapsed，然后通过这个时间差和总时间来计算操作的进度complete，当complete大于1时，我们将其设为1。最后通过计算进度值result并设置到进度条DOM元素的宽度样式中，实现进度条的动态效果。

Step 2：调用函数

有了这个updateProgress函数后，我们就可以根据不同的需求调用它来实现不同的进度条效果。例如，我们可以使用以下代码来实现一个从0%变化到100%的进度条效果：

var bar = document.getElementById('bar');

updateProgress(bar, 100, 1000);

以上代码将获取进度条DOM元素，并且调用updateProgress函数来实现0%到100%变化的进度条效果，总时间为1000毫秒。

Step 3：优化代码

最后，我们可以对上述代码进行进一步优化，将部分重复代码提取出来，并且添加一些注释来提高代码可读性：

/**

 * 更新进度条
 * @param  {HTMLElement} progress 进度条DOM元素
 * @param  {Number} value 最终值
 * @param  {Number} time 总时间（毫秒）
 */
 function updateProgress(progress, value, time) {
  var start = new Date().getTime();  // 获取执行开始的时间戳
  var timer = setInterval(function() {
    var now = new Date().getTime();
    var elapsed = now - start;  // 获取已经执行的时间
    var complete = elapsed / time;  // 计算总体完成度
    if (complete > 1) {  // 如果已经完成
      complete = 1;
    }
    var result = Math.floor(complete * value);  // 计算当前的值
    progress.style.width = result + '%';  // 更新进度条样式
    if (complete >= 1) {  // 如果已经完成
      clearInterval(timer);  // 清除定时器
    }
  }, 10);
}
var bar = document.getElementById('bar');
updateProgress(bar, 100, 1000);

在此优化后的代码中，我们添加了一些注释来提高代码可读性，同时将获取执行开始时间戳的代码放到了函数内部。这样，我们就可以通过调用updateProgress函数来实现不同的进度条效果，提高了代码的重用性。

总结

本文介绍了如何使用Javascript创建进度条，具体来说，我们使用了HTML、CSS和Javascript三种技术，通过这些技术的协作来实现了进度条的动态效果。最后，我们通过代码的优化来提高代码可读性和重用性，让进度条更加完美。