jquery进度条计算秒数并在点击时停止答案

【问题标题】：jquery progress bar to count seconds and stop on clickjquery进度条计算秒数并在点击时停止
【发布时间】：2015-02-05 19:09:03
【问题描述】：

我已经检查了互联网上的很多进度条，但似乎没有一个可以处理以下情况：

显示一个进度条，它会根据时间在后台自动更新。例如简单来说，jqueryUI 进度条会在后台每秒自动更新一次，直到 5 秒（在 5 秒时达到 100% 并停止）。
可以单击某处将其停止。

这个用例是在简单的儿童游戏中显示进度，但是当任务完成时，有一种简单的方法可以停止进度条。

有没有简单的方法在 jquery/javascript 中实现这个？

编辑，根据 DavidKonrad 接受的答案，我创建了一个小型打字稿类，额外支持 _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>

【问题讨论】：

用 JS/jQuery 编写。使用 Date.now() [ stackoverflow.com/questions/4874408/… ] 存储开始时间。通过 setInterval [w3schools.com/jsref/met_win_setinterval.asp] 在页面加载时运行的某些函数计算百分比并每 0.1 秒更新一次此进度条看起来支持您想要的任何类型的条：jqueryui.com/progressbar/#indeterminate - - - - - - 如果您需要帮助然后在 JS 中回答这个评论，我会给你发布示例代码来控制进度条。

标签： javascript jquery jquery-ui

【解决方案1】：

嗯，是的 - 它很容易实现。如果您提供了一个标记示例以及您到目前为止所尝试的内容，那会更容易:)

标记：

<div id="progressbar"></div>

脚本：

$("#progressbar").progressbar({
  value: 0,
  max : 5  
});

var value = 0,
    progress;

function stopProgress() {
  clearInterval(progress);
  $("#progressbar").progressbar({
     value : 0
  });
}

progress = setInterval(function() {
  value++; 
  $("#progressbar").progressbar({
    value : value
  });
  if (value == 5) clearInterval(progress);
}, 1000);

$(window).on('click', function() {
   stopProgress();
});

jQueryUI 演示 -> http://jsfiddle.net/vqadbkj9/

【讨论】：

【解决方案2】：

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

HTML：

<body onload="expand()">
    <div id="parent">
        <div id="child"></div>
    </div>
    <button onclick="stop()">Stop</button>
</body>

CSS：

#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;
}

JavaScript：

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

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

【讨论】：

这与创建进度条并使其随时间自动更新的要点相去甚远。