HTML5 implementa su propia barra de progreso y efectos deslizantes

 <div id=d> <p id=pgv>Progreso: %</p> <progreso id=pg max= valor=></progreso> </div>

Utilice la etiqueta de progreso para establecer los valores mínimo y máximo. Puede utilizar el valor para obtener el valor de progreso.

 function staticProgress () { var pg = document.getElementById('pg') var pgv = document.getElementById('pgv') var timer = setInterval(function () { if (pg.value !== ) { pg.value++ pgv .innerHTML = 'Progreso:' + pg.value + '%' } else { pgv.innerHTML = 'Carga completada' clearInterval(temporizador) } }, ) }

El efecto final es el siguiente:

¡Este efecto de visualización es para el navegador Chrome, IE y Firefox tienen estilos diferentes!

Cambios de estilo:

 progreso{ -webkit-appearance: none } ::-webkit-progress-bar{ /* Obtener progreso */ background-color: orange /* El color de fondo vacío de la barra de progreso*/ } ::-webkit-progress; -value { color de fondo: rgb(, , ); /* Color de fondo de la parte rellena de la barra de progreso*/ } ::-webkit-progress-inner-element { borde: px negro sólido; El borde interior de la barra de progreso, preste atención para distinguirlo del contorno*/ }

Todos los estilos aquí son para el kernel de webkit y otros estilos no son compatibles ~~~ El efecto es el siguiente:

Establezca el tipo de entrada en rango. Sin embargo, no todos los navegadores admiten este atributo. De lo contrario, se devolverá el atributo predeterminado, que es <tipo de entrada=texto>.

(Para obtener más detalles, consulte https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range)

Estilo predeterminado:

 <div id=d> <p>Control deslizante arrastrable H:</p> <tipo de entrada=nombre del rango=puntos min= max= id=hpro/> </div>

1. Viene con atributos:

 (1), valor predeterminado = (rangeElem.max < rangeElem.min) ? rangeElem.min: rangeElem.min + (rangeElem.max - rangeElem.min)/2;

¿Valor predeterminado = (establecer valor máximo <establecer valor mínimo)? Establezca el valor mínimo: Establezca el valor mínimo + (Establezca el valor máximo - Establezca el valor mínimo) / 2 ---- De hecho, tome el valor medio

Podemos establecer el valor del control deslizante con valor = 7.

(2), <input type=range min=-10 max=10>

min: establece el valor mínimo; max: establece el valor máximo

(3), <input type=range min=5 max=10 step=0.01>

paso: establece el valor del paso, el valor predeterminado es 1. Si el mínimo o el máximo se configuran con un punto decimal, por ejemplo: máx=3,14, no se puede obtener el punto decimal, entonces puede configurar el paso en: paso=cualquiera.

(4), marcas de almohadilla y etiqueta:

Nota: Actualmente, ningún navegador admite completamente los dos atributos de marcas hash y etiqueta. Por ejemplo, Firefox no admite ambos y Chrome admite marcas hash pero no etiquetas.

a) marcas de almohadilla:

 <tipo de entrada=nombre del rango=puntos min= max= paso=cualquier id=hpro list=tickmarks/> <datalist id=tickmarks> <valor de opción=> <valor de opción=> <valor de opción=> <valor de opción=> < valor de opción=> <valor de opción=> <valor de opción=> <valor de opción=> <valor de opción=> <valor de opción=> <valor de opción=> </lista de datos>

segundo) etiqueta:

 <tipo de entrada=nombre del rango=puntos min= max= paso=cualquier id=hpro list=tickmarks/> <datalist id=tickmarks> <valor de opción= etiqueta=%> <valor de opción=> <valor de opción=> <valor de opción => <valor de opción=> <valor de opción= etiqueta=%> <valor de opción=> <valor de opción=> <valor de opción=> <valor de opción=> <valor de opción= etiqueta=%> </lista de datos>

(5) El enfoque automático puede establecer o devolver si el control deslizante gana enfoque automáticamente. Después de configurarlo en verdadero, el control deslizante se bloqueará automáticamente al ingresar a la página web. Puede controlarlo presionando hacia arriba, abajo, izquierda y derecha en el teclado. .

2. Embellecimiento de la apariencia:

 input[type=range] { contorno: ninguno; -webkit-apariencia: ninguno /* Elimina el estilo de apariencia predeterminado del sistema, que se utiliza a menudo para eliminar estilos nativos en IOS*/ border-radius: px;

-apariencia webkit: ninguno; Eliminar estilos predeterminados

 entrada[tipo=rango]::-webkit-slider-runnable-track { altura: px; radio-borde: px; sombra de cuadro: px px #deff, inserto .em .em #d }

::-webkit-slider-runnable-track es un elemento de pseudoclase CSS, que no es compatible con todos los navegadores. Puede obtener la pista de <input type=range>

Para obtener más información, consulte: https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-slider-runnable-track

 input[type=range]::-webkit-slider-thumb { -webkit-appearance: none /* Eliminar el estilo predeterminado del control deslizante*/ height: px width: px; # BE; radio de borde: %; borde: sólido .em rgba(, , .); sombra de cuadro: .em .em #b;

::-webkit-slider-thumb puede obtener el seguimiento de <input type=range>

Lo anterior es la implementación HTML5 que le presentó el editor con su propia barra de progreso y efecto deslizante. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá a tiempo. . ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!