JQuery прогресс бар, чтобы считать секунды и остановка по щелчку

Я проверил немало из прогресса баров в Интернете, но никто не похоже, чтобы справиться следующий случай:JQuery прогресс бар, чтобы считать секунды и остановка по щелчку

показать прогресс бар, который автоматически обновляется в фон как функция времени. например Простой индикатор выполнения 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>

источник

2015-02-05 shev72

записать его в JS/JQuery. Используйте Date.now() [http://stackoverflow.com/questions/4874408/better-way-of-getting-time-in-milliseconds-in-javascript], чтобы сохранить время начала. Вычислите проценты и обновите их каждые 0,1 с с помощью некоторой функции, которую вы запускаете при загрузке страницы с помощью setInterval [http://www.w3schools.com/jsref/met_win_setinterval.asp] Этот индикатор выполнения выглядит так, будто он поддерживает любой тип бара, который вы хотите: http://jqueryui.com/progressbar/#indeterminate - - - - - - если вам нужна помощь в JS, тогда ответьте на этот комментарий, и я отправлю вам пример кода, чтобы контролировать индикатор выполнения. – JerzySkalski

Ну, да - это легко осуществить. Это было бы еще проще, если вы предоставили пример разметки и то, что вы не пробовали до сих пор, а :)

разметки:

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

источник

2015-02-05 19:23:39 davidkonrad

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

источник

2015-02-05 19:24:09

Это очень далеко от основной точки, которая заключается в том, чтобы создать панель прогресса и обновить ее автоматически как функцию времени. – shev72

JQuery прогресс бар, чтобы считать секунды и остановка по щелчку

ответ

Смежные вопросы