Javascript 进度条
3.97/5 (15投票s)
如何使用 JavaScript 创建手动和自动进度条。
如果你正在寻找一个漂亮的 Javascript 进度条，用于打印进度或其他用途，并且需要它能够手动和/或自动工作，请阅读本文。
引言
我需要构建一个自定义进度条，它可以自动和手动通过代码进行进度更新。
这个进度条可以作为打印进度条或其他有用的用途。
进度条获取 maxStep 计数器，并根据每个步骤打印正确的子弹数量。
进度条中的最大子弹数由背景图像的大小决定，可以在 Javascript 文件中通过参数 numOfBullets 进行更改。
进度条有两种操作模式
1. 手动 - 通过调用 NextStep 方法。
2. 自动 - 自动激活 NextStep 方法，每配置的时间间隔一次。
进度条包含一些有用的方法
1. (constructor)(maxStep) - 获取 maxStep 参数 (默认值为 1)
2. SetProgressBarContainer(progressBarContainer) - 获取进度条 DIV 容器。所有子弹都将放置在此处。
3. SetMaxStep(maxStep) - 获取进度条的 maxStep 参数。（如果需要在初始化后更改 maxStep）。
4. NextStep() - 显示下一步的子弹。
5. Auto() - 开始进度条子弹的自动推进。
6. Stop() - 停止自动进度条。
7. Reset() - 重置参数。
类全局参数
1. numOfBullets - 可以进入进度条背景的子弹数量。
2. timeInterval - 移动 nextStep 以在自动模式下使用的秒数时间间隔。
背景
Javascript 文件包含一个使用 Prototype JavaScript Framework 开源创建的进度条类。
Prototype 是一个 JavaScript 框架，旨在简化动态 Web 应用程序的开发。
使用代码 - 嵌入和包含
首先包含 prototype js 文件和进度条 js 文件。
<script type="text/javascript" language="javascript" src="Js/prototype-1.6.0.2.js"></script> <script type="text/javascript" language="javascript" src="Js/ProgressBar.js"></script>在 html 页面中放置进度条 div 并将其命名为 progressBarContainer。在 body 标签中设置 onload 方法。
<body önload="onload()">实现如下
//handle of the maxStep textbox
var maxStep;
function onload()
{
//handle of the maxStep textbox
maxStep = $("maxStep");
//get progressBar container div
var progressBarContainer = $("progressBarContainer");
//create new instance of progressBar class and pass the number of max step
progressBar = new ProgressBarClass(maxStep.value);
//set progressBar container div
progressBar.SetProgressBarContainer(progressBarContainer);
//set callback function to be notify when step changed
progressBar.OnStepChange = OnStepChange;
}
创建用于启动、停止、重置、下一步进度条的按钮，并将它们附加到以下方法。
function Auto()
{
progressBar.Auto ();
}
function Next()
{
progressBar.NextStep ();
}
function Stop()
{
progressBar.Stop ();
}
function Reset()
{
progressBar.Reset ();
$("pages").innerHTML = "0 pages printed";
}
function SetMaxStep()
{
progressBar.SetMaxStep(maxStep.value);
}
进度条类还可以获取一个委托到用户方法，该方法在任何 stepChange 上激活，并包含当前步骤。
//set callback function to be notify when step changed
progressBar.OnStepChange = OnStepChange;
function OnStepChange(currentStep)
{
$("pages").innerHTML = currentStep + " pages printed";
}
就这样了。
希望对您有所帮助，就像对我一样。