答案：通过面向对象方式创建ProgressBar插件，支持配置合并、DOM动态渲染、平滑动画及链式调用。1. 定义构造函数并初始化参数；2. init方法生成带样式的外框与进度条；3. setValue设置值并触发CSS过渡动画；4. updateText实时显示百分比；5. 返回this实现链式调用，可扩展更多功能。
想让用户清楚看到任务的完成情况？进度条是最直观的方式之一。用 JavaScript 手动实现一个轻量、可复用的进度条插件，不仅能提升用户体验，还能加深对 DOM 操作和动画原理的理解。下面教你从零开始开发一个简单的 JavaScript 进度条插件，并加入平滑动画效果。
插件基本结构设计
一个良好的插件应具备初始化配置、方法接口和可扩展性。我们采用面向对象的方式构建，便于维护和调用。
定义一个 ProgressBar 构造函数，接收目标容器和配置参数：
function ProgressBar(container, options) {
this.container = typeof container === 'string' ?
document.querySelector(container) : container;
this.options = Object.assign({
width: 300,
height: 20,
color: '#4CAF50',
backgroundColor: '#f0f0f0',
showText: true
}, options);
this.value = 0;
this.init();
}
通过 Object.assign 合并默认配置与用户传入的选项，保证灵活性。构造完成后调用 init() 方法创建 DOM 结构。
立即学习“Java免费学习笔记（深入）”；
DOM 创建与样式渲染
在 init 方法中动态生成进度条的外框和内部填充条：
ProgressBar.prototype.init = function() {
this.bar = document.createElement('div');
this.progress = document.createElement('div');
this.text = document.createElement('span');
this.bar.style.width = this.options.width + 'px';
this.bar.style.height = this.options.height + 'px';
this.bar.style.backgroundColor = this.options.backgroundColor;
this.bar.style.borderRadius = '10px';
this.bar.style.overflow = 'hidden';
this.progress.style.width = '0%';
this.progress.style.height = '100%';
this.progress.style.backgroundColor = this.options.color;
this.progress.style.transition = 'width 0.3s ease';
this.text.style.position = 'absolute';
this.text.style.left = '50%';
this.text.style.top = '50%';
this.text.style.transform = 'translate(-50%, -50%)';
this.text.style.color = '#333';
this.text.style.fontSize = (this.options.height * 0.7) + 'px';
this.text.style.fontFamily = 'Arial, sans-serif';
this.bar.appendChild(this.progress);
if (this.options.showText) {
this.bar.appendChild(this.text);
this.updateText();
}
this.container.innerHTML = '';
this.container.appendChild(this.bar);
};
使用内联样式避免依赖外部 CSS，同时设置 transition 实现宽度变化的过渡动画。
更新进度与动画控制
提供 setValue(value) 方法让用户设置当前进度值（0-100）：
ProgressBar.prototype.setValue = function(value) {
// 限制值在 0~100 范围
this.value = Math.min(100, Math.max(0, value));
this.progress.style.width = this.value + '%';
if (this.options.showText) {
this.updateText();
}
};
ProgressBar.prototype.updateText = function() {
this.text.textContent = Math.round(this.value) + '%';
};
每次调用 setValue，都会触发 CSS 的宽度过渡，形成自然的动画效果。你也可以通过 requestAnimationFrame 实现更复杂的帧动画，但此处 transition 已足够流畅。
支持链式调用与额外功能
为了让插件更易用，可以让方法返回 this，支持链式调用：
ProgressBar.prototype.setValue = function(value) {
this.value = Math.min(100, Math.max(0, value));
this.progress.style.width = this.value + '%';
if (this.options.showText) {
this.updateText();
}
return this; // 支持链式调用
};
// 示例：new ProgressBar('#progress').setValue(30).setValue(60);
还可扩展方法如 getValue()、reset()、hideText() 等，增强实用性。
基本上就这些。一个简单但功能完整的进度条插件已经成型，你可以将它封装成独立模块，或添加更多主题、方向（垂直）、渐变色等特性。核心在于结构清晰、接口简洁，动画自然。不复杂但容易忽略细节，比如边界值处理和样式重置。
