Javascript jquery进度条，用于计算秒数并在单击时停止

我在互联网上查看了不少进度条，但似乎没有一个进度条能够处理以下情况：

显示一个进度条，该进度条在后台随时间自动更新。e、 g.简单地说，jqueryUI进度条将在后台每秒自动更新一次，直到5秒（5秒时为100%并停止）

可能单击某个位置来停止它

这个用例是在为孩子们设计的简单游戏中显示进度，但是当任务完成时，有一个简单的方法停止进度条

有没有一种简单的方法可以在jquery/javascript中实现这一点

Edit，根据DavidKonrad接受的答案，我创建了一个小的typescript类，另外还支持_gProgressAlive查询进度是否正在运行，以及在进度完成时执行操作的回调。这里是结果，希望它能帮助别人

var  _gProgressStatus=0;
var _gProgressMax=3;
var _gProgressIncrement=1000;
var _gProgress;
var _gProgressAlive=false;
class ProgressBar{

static stop() {
  clearInterval(_gProgress);
  _gProgressAlive=false;

}

static start(endCallback){
    _gProgressAlive=true;
     _gProgressStatus=0;
  _gProgress = setInterval(function() {
  _gProgressStatus++; 
  $("#progressbar").progressbar({
   value :_gProgressStatus,max:_gProgressMax
  });
  if (_gProgressStatus >=  _gProgressMax){ ProgressBar.stop();endCallback();}
}, _gProgressIncrement);
}

}

下面是主要的html测试标记

<script>
ProgressBar.start(function(){   
    console.log("completed, time's up");
    console.log(_gProgressAlive); // false progress is complete, this is the callback
});
    console.log(_gProgressAlive); // should output true, progress bar has started
  </script>
<div id="progressbar"></div>

ProgressBar.start（函数（）{
console.log（“完成，时间到了”）；
console.log（_gProgressAlive）；//错误进度完成，这是回调
});
console.log（gProgressAlive）；//如果输出为true，则进度条已启动

是的，很容易实现。如果您提供了一个标记示例以及您迄今为止所做的尝试，那么这将更加容易：）

标记：

脚本：

$（“#progressbar”）.progressbar({
值：0，
最多：5
});
var值=0，
进步；
函数stopProgress（）{
清除间隔（进度）；
$（“#progressbar”）.progressbar({
数值：0
});
}
进度=设置间隔（函数（）{
值++；
$（“#progressbar”）.progressbar({
价值：价值
});
如果（值==5）清除间隔（进度）；
}, 1000);
$（窗口）。在（'单击'，函数（）上）{
stopProgress（）；
});    

---

jQueryUI演示->停止进度条意味着任务已完成。因此，它应该在停止时显示填充状态。我想这就是你的意思。代码如下：

HTML:

JavaScript:

function expand()
{
    document.getElementById("child").style.width = "100px";
}

function stop()
{
    document.getElementById("parent").style.backgroundColor = "red";
}

---

用JS/jQuery编写它。使用Date.now（）[]存储开始时间。通过setInterval[]计算百分比，并使用在页面加载时运行的某些函数每0.1秒更新一次这个进度条看起来支持你想要的任何类型的进度条：--如果你在JS中需要帮助，那么回答这个评论，我将向你发布控制进度条的示例代码。这与创建进度条并让它随着时间自动更新的要点相去甚远。

#parent
{
    width:100px;
    height:10px;
    background-color:rgb(100,100,100);
}

#child
{
    float:left;
    width:0px;
    height:10px;
    background-color:red;
    transition: all 5s linear;
}

function expand()
{
    document.getElementById("child").style.width = "100px";
}

function stop()
{
    document.getElementById("parent").style.backgroundColor = "red";
}