| Kosten | Четверг, 12 Сентября 2019, 20:08 | Сообщение 1 |
| Самый простой, но достаточно маленький виджет индикатора выполнения, использующий HTML-CSS-JavaScript. Это графический элемент управления для визуализации хода изменения переменной JavaScript внутри диапазона (обычно 0-100). Используйте это, чтобы указать загрузку, передачу файла или прогресс установки. Графика сопровождается текстовым представлением прогресса в процентном формате.
Вы можете увидеть предварительный просмотр ниже, как отображается адаптивный виджет, но, конечно, вы можете настроить его вид:
Загрузите пакет .zip, содержащий файлы .html, .css и .js, и их можно использовать «из коробки» или скопировать только те фрагменты, которые вам нужны.
Вызовите функцию drawszlider, когда вы хотите обновить слайдер. Первый параметр - полная длина бара (обычно 100), а второй - прогресс. Функция рассчитывает процент и обновляет ползунок
Код <body onload="drawszlider(121, 56);">
Скопируйте в свой HTML-код следующий фрагмент кода, где вы хотите, чтобы слайдер отображал. По умолчанию он занимает всю ширину своего контейнера, но вы можете изменить это в CSS.
Код <div id="szlider"> <div id="szliderbar"> </div> <div id="szazalek"> </div> </div>
Вы должны стилизовать индикатор выполнения и текст, указывающий фактический процент. CSS по умолчанию для начальной точки:
Код #szlider{
width:100%;
height:15px;
border:1px solid #000;
overflow:hidden; }
#szliderbar{
width:37%;
height:15px;
border-right: 1px solid #000000;
background: #d65946; }
#szazalek {
color: #000000;
font-size: 15px;
font-style: italic;
font-weight: bold;
left: 25px;
position: relative;
top: -16px;
}
Наконец, очень короткий и простой код JavaScript . Вам нужно будет вызвать эту функцию, чтобы нарисовать ползунок. У него есть два атрибута: первый - полная ширина, а второй - фактическое состояние. Например, если вы хотите отобразить 50 процентов, вызовите функцию drawszlider (100,50), но вы получите тот же результат для drawszlider (30,15).
Код function drawszlider(ossz, meik){
var szazalek=Math.round((meik*100)/ossz);
document.getElementById("szliderbar").style.width=szazalek+'%';
document.getElementById("szazalek").innerHTML=szazalek+'%';
}
Эти фрагменты кода могут содержать некоторые ошибки кодировки символов, вызванные веб-браузерами, поэтому я рекомендую загрузить пакет .zip!
Демонстрация
| | Страна: (RU) |
| |
