<div id=d> <p id=pgv>Прогресс: %</p> <progress id=pg max= value=></progress> </div>
Используйте тег прогресса, чтобы установить минимальное и максимальное значения. Вы можете использовать значение, чтобы получить значение прогресса
function staticProgress () { var pg = document.getElementById('pg') var pgv = document.getElementById('pgv') var timer = setInterval(function () { if (pg.value !== ) { pg.value++ pgv .innerHTML = 'Прогресс:' + pg.value + '%' } else { pgv.innerHTML = 'Загрузка завершена' ClearInterval(таймер) } }, ) }Конечный эффект следующий:
Этот эффект отображения предназначен для браузера Chrome, IE и FireFox имеют разные стили!
Изменения стиля:
Progress{ -webkit-appearance: none } ::-webkit-progress-bar{ /* Получить прогресс */ background-color: Orange; /* Незаполненный цвет фона индикатора выполнения */ } ::-webkit-progress -value { background-color: rgb(, , ); /* Цвет фона заполненной части индикатора выполнения*/ } ::-webkit-progress-inner-element { border: px Solid Black; Внутренняя граница индикатора выполнения. Обратите внимание, чтобы отличить ее от контура*/ }Все стили здесь предназначены для ядра webkit, остальные стили не поддерживаются~~~ Эффект следующий:
2. H5 оснащен слайдером.Установите тип ввода в диапазон. Однако не все браузеры поддерживают этот атрибут. В противном случае будет возвращен атрибут по умолчанию: <input type=text>.
(Подробную информацию см. на странице https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range)
Стиль по умолчанию:
<div id=d> <p>Перетаскиваемый ползунок H:</p> <input type=range name=points min= max= id=hpro/> </div>
1. Имеет атрибуты:
(1), defaultValue = (rangeElem.max <rangeElem.min) ? rangeElem.min : rangeElem.min + (rangeElem.max - rangeElem.min)/2;
Значение по умолчанию = (установленное максимальное значение < заданное минимальное значение)? Установить минимальное значение: Установить минимальное значение + (Установить максимальное значение - Установить минимальное значение)/2 ---- Фактически взять среднее значение
Мы можем установить значение ползунка со значением = 7.
(2), <input type=range min=-10 max=10>
min: установить минимальное значение max: установить максимальное значение;
(3), <input type=range min=5 max=10 step=0.01>
шаг: установите значение шага, значение по умолчанию — 1. Если min или max заданы с десятичной точкой, например: max=3,14, десятичную точку получить невозможно, тогда вы можете установить шаг: шаг=любой.
(4), решётки и метка:
Примечание. В настоящее время ни один браузер полностью не поддерживает два атрибута — решетку и метку. Например, Firefox не поддерживает оба атрибута, а Chrome поддерживает решетку, но не метку.
а) решётки:
<тип ввода=имя диапазона=точки мин= макс= шаг=любой id=hpro list=тикмарки/> <идентификатор списка данных=тикмарки> <значение параметра=> <значение параметра=> <значение параметра=> <значение параметра=> < значение опции=> <значение опции=> <значение опции=> <значение опции=> <значение опции=> <значение опции=> <значение опции=> </datalist>
б) этикетка:
<тип ввода=имя диапазона=точки мин= макс= шаг=любой id=hpro list=тикмарки/> <идентификатор списка данных=тикмарки> <значение параметра= метка=%> <значение параметра=> <значение параметра=> <значение параметра => <значение опции=> <значение опции= label=%> <значение опции=> <значение опции=> <значение опции=> <значение опции=> <значение опции= label=%> </даталист>
(5) Автофокусировка позволяет установить или указать, будет ли ползунок автоматически получать фокус. После установки значения true ползунок будет автоматически блокироваться при входе на веб-страницу. Вы можете управлять им, нажимая вверх, вниз, влево и вправо на клавиатуре. .
2. Украшение внешнего вида:
input[type=range] { Outline: none; -webkit-appearance: none; /* Удалить системный стиль оформления по умолчанию, который часто используется для удаления собственных стилей в IOS*/ border-radius: px;-webkit-appearance: none Удалить стили по умолчанию;
input[type=range]::-webkit-slider-runnable-track {height: px; border-radius: px; box-shadow: px px #deff, inset .em .em #d; ::-webkit-slider-runnable-track — это элемент псевдокласса CSS, который поддерживается не всеми браузерами. Вы можете получить трек <input type=range>
Подробную информацию см. по адресу: https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-slider-runnable-track.
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; /* Удалить стиль ползунка по умолчанию*/ height: px; width: px; # BE; border-radius: %; border: Solid .em rgba(, , , .); box-shadow: .em .em #b; ::-webkit-slider-thumb может получить дорожку <input type=range>
Выше представлена реализация HTML5, представленная вам редактором, с собственным индикатором выполнения и эффектом ползунка. Надеюсь, это будет вам полезно. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит вам вовремя. . Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!