HTML5 поставляется с тегом индикатора выполнения, который полезен во многих случаях. Элемент индикатора выполнения используется во многих случаях, когда состояние определенной задачи или активности необходимо отобразить на веб-странице без взаимодействия с сервером. В этой статье будет показана очень простая реализация операции индикатора выполнения html5 — определение и установка его значения, чтобы можно было отображать прогресс какого-либо действия.
Определение progress bar.
Чтобы определить индикатор выполнения, вам необходимо использовать тег <progress> . При определении вы можете указать его максимальное значение и значение по умолчанию.
Увеличение и сброс.
Теперь мы будем использовать простую логику приращения в JQuery, чтобы увеличить прогресс, а когда он достигнет максимального значения, сбросить его значение и начать все сначала. Давайте определим функцию.
function updateProgress(){
incr = incr +1;
if (incr>max) { incr=1;}
$("#pg1").val(incr);
$("#status").html(" "+incr+" %");
}
Вы можете установить текущее значение индикатора выполнения, используя метод val(value).
Полный код.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div>
<progress value="22" max="100" id="pg1"></progress><span id="status"></span>
</div>
<p><strong>Замечание:</strong>Progress bar не поддерживается в очень старых браузерах, если у вас такое ископамемое есть, то у вас он не сработает</p>
</body>
<script>
$(document).ready(function(){
//Установим значение не больше 100
var max=100;
var incr=1;
//Вызовем функцию увеличения значения панели прогресса.
function updateProgress(){
incr=incr+1;
if(incr>max){incr=1;}
$("#pg1").val(incr);
$("#status").html(""+incr+"%");
}
//Обновлять статус каждые 100 мс.
setInterval(updateProgress,100);
});
</script>
</html>
Was this helpful?
0 / 0