我已经检查了互联网上的一些进度条,但似乎没有处理以下情况:
显示一个进度条,它会在后台自动更新为时间的函数。例如简单来说,jqueryUI进度条会在后台每秒自动更新一次,直到5秒(5s时为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>
答案 0 :(得分:2)
嗯,是的 - 它很容易实现。如果您提供了一个标记示例以及您迄今为止尝试过的内容,那将会更加容易:)
标记:
<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演示 - &gt;的 http://jsfiddle.net/vqadbkj9/ 强>
答案 1 :(得分:-1)
停止进度条意味着任务已完成。因此,它应该显示被停止的填充状态。我假设这就是你的意思。这是代码:
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";
}