jQuery進度條來計算秒數並停止點擊

Question

我已經檢查了互聯網上的很多進度條，但似乎沒有一個能處理以下情況：

顯示進度條，該進度條會在后台隨時間自動更新。 例如，簡單起見，jqueryUI進度條將每秒在后台自動更新，直到5秒鍾（在5秒鍾即為100％並停止）。
單擊某處停止它的可能性。

用例是在簡單的兒童游戲中顯示進度，但是當任務完成時，有一種簡單的方法可以停止進度欄。

有沒有一種簡單的方法可以在jquery / javascript中實現呢？

通過DavidKonrad接受的答案Edit ，我創建了一個小型的打字稿類，並帶有_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>

Answer 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/

Answer 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";
}

jQuery進度條來計算秒數並停止點擊

問題描述

2 個解決方案

解決方案1
2 已采納 2015-02-05 19:23:39

解決方案2
-1 2015-02-05 19:24:09

jQuery進度條來計算秒數並停止點擊

問題描述

2 個解決方案

解決方案1 2 已采納 2015-02-05 19:23:39

解決方案2 -1 2015-02-05 19:24:09

解決方案1
2 已采納 2015-02-05 19:23:39

解決方案2
-1 2015-02-05 19:24:09