Введение
HTML-тег <progress> используется для индикации прогресса выполнения задачи. Обычно он используется для отображения полосы прогресса для задачи внутри HTML-веб-страницы. В этом практическом занятии вы научитесь создавать базовую полосу прогресса с использованием HTML-тега <progress>.
Примечание: Вы можете практиковать программирование в
index.htmlи изучить Как писать HTML в Visual Studio Code. Пожалуйста, нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.
Создайте HTML-структуру
Сначала создайте базовую HTML-структуру для полосы прогресса с использованием следующего кода в файле index.html:
<!doctype html>
<html>
<head>
<title>HTML Progress Tag Example</title>
</head>
<body>
<h1>HTML Progress Tag</h1>
<label for="progress-bar">Task Progress:</label>
<progress id="progress-bar" max="100"></progress>
</body>
</html>
В этом коде мы включили необходимые теги для создания HTML-страницы, тег заголовка для названия страницы, тег метки для описания нашей полосы прогресса и тег <progress> с атрибутом id "progress-bar" и атрибутом max равным 100.
Установите значение полосы прогресса
Для задания значения полосы прогресса добавьте атрибут value к тегу <progress> со значением от 0 до 100. Например, чтобы установить полосу прогресса на 50%, добавьте следующий код после тега <progress>:
<progress id="progress-bar" max="100" value="50"></progress>
Добавление JavaScript для обновления полосы прогресса
Для динамического обновления полосы прогресса мы добавим некоторый JavaScript для изменения атрибута value тега <progress>.
Добавьте следующий код JavaScript в HTML-файл:
<script>
let progressBar = document.getElementById("progress-bar");
let percent = 0;
function updateProgress() {
if (percent == 100) {
clearInterval(intervalId);
return;
}
progressBar.value = percent;
percent++;
}
let intervalId = setInterval(updateProgress, 100);
</script>
В этом коде мы создали функцию updateProgress(), которая обновляет значение полосы прогресса каждые 100 миллисекунд. Функция проверяет, достигло ли полоса прогресса 100% и останавливает интервал, если это так.
Наконец, мы устанавливаем интервал, вызывая setInterval() с нашей функцией updateProgress() и интервалом времени в 100 миллисекунд.
Сохраните файл index.html и откройте его в веб-браузере. Теперь вы должны увидеть полосу прогресса, значение которой увеличивается с течением времени, пока не достигнет 100%.
Резюме
Следуя шагам выше, вы узнали, как создать базовую полосу прогресса с использованием тега <progress> в HTML. Кроме того, вы узнали, как динамически обновлять полосу прогресса с использованием JavaScript. Эта техника может быть полезной для отображения прогресса длительной задачи или для индикации прогресса загрузки файла.
