HTML5 implementa sua própria barra de progresso e efeitos deslizantes

 <div id=d> <p id=pgv>Progresso: %</p> <progress id=pg max= value=></progress> </div>

Use a tag de progresso para definir os valores mínimo e máximo. Você pode usar value para obter o valor do progresso

 function staticProgress () { var pg = document.getElementById('pg') var pgv = document.getElementById('pgv') var timer = setInterval(function () { if (pg.value !== ) { pg.value++ pgv .innerHTML = 'Progresso:' + pg.value + '%' } else { pgv.innerHTML = 'Carregamento concluído' clearInterval(temporizador) } }, ) }

O efeito final é o seguinte:

Este efeito de exibição é para o navegador Chrome, IE e FireFox têm estilos diferentes!

Mudanças de estilo:

 progress{ -webkit-appearance: none } ::-webkit-progress-bar{ /* Obter progresso */ background-color: orange; /* A cor de fundo não preenchida da barra de progresso*/ } ::-webkit-progress -value { background-color: rgb(, , ); /* Cor de fundo da parte preenchida da barra de progresso*/ } ::-webkit-progress-inner-element { border: px solid black; A borda interna da barra de progresso, preste atenção para distingui-la do contorno*/ }

Os estilos aqui são todos para o kernel do webkit e outros estilos não são suportados ~~~ O efeito é o seguinte:

Defina o tipo de entrada como intervalo. Porém, nem todos os navegadores suportam este atributo. Caso contrário, o atributo padrão será retornado, que é <input type=text>.

(Para obter detalhes, consulte https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range)

Estilo padrão:

 <div id=d> <p>H controle deslizante arrastável:</p> <input type=range name=points min= max= id=hpro/> </div>

1. Vem com atributos:

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

Valor padrão = (definir valor máximo <definir valor mínimo)? Defina o valor mínimo: Defina o valor mínimo + (Defina o valor máximo - Defina o valor mínimo) / 2 ---- Na verdade, pegue o valor do meio

Podemos definir o valor do controle deslizante com valor=7.

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

min: define o valor mínimo; max: define o valor máximo;

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

etapa: Defina o valor da etapa, o padrão é 1. Se min ou max for definido com um ponto decimal, por exemplo: max=3,14, o ponto decimal não pode ser obtido, então você pode definir step como: step=any.

(4), marcas de hash e rótulo:

Nota: Atualmente, nenhum navegador oferece suporte total aos dois atributos de hash e rótulo. Por exemplo, o Firefox não oferece suporte a ambos, e o Chrome oferece suporte a hash, mas não a rótulo.

a) marcas de hash:

 <tipo de entrada=nome do intervalo=pontos min= max= etapa=qualquer id=hpro list=tickmarks/> <datalist id=tickmarks> <valor da opção=> <valor da opção=> <valor da opção=> <valor da opção=> < valor da opção=> <valor da opção=> <valor da opção=> <valor da opção=> <valor da opção=> <valor da opção=> <valor da opção=> </datalist>

b) rótulo:

 <tipo de entrada=nome do intervalo=pontos min= max= etapa=qualquer id=hpro list=tickmarks/> <datalist id=tickmarks> <valor da opção= rótulo=%> <valor da opção=> <valor da opção=> <valor da opção => <valor da opção=> <valor da opção= rótulo=%> <valor da opção=> <valor da opção=> <valor da opção=> <valor da opção=> <valor da opção= rótulo=%> </datalist>

(5) O foco automático pode definir ou retornar se o controle deslizante ganha foco automaticamente. Depois de configurá-lo como verdadeiro, o controle deslizante será bloqueado automaticamente ao entrar na página da web. Você pode controlá-lo pressionando para cima, para baixo, para a esquerda e para a direita no teclado. .

2. Embelezamento da aparência:

 input[type=range] { outline: none; -webkit-appearance: none; /* Remove o estilo de aparência padrão do sistema, frequentemente usado para remover estilos nativos no IOS*/ border-radius: px }

-webkit-appearance: nenhum Remove estilos padrão;

 input[type=range]::-webkit-slider-runnable-track { altura: px; raio da borda: px; box-shadow: px px #deff, inset .em .em #d }

::-webkit-slider-runnable-track é um elemento de pseudoclasse CSS, que não é suportado por todos os navegadores. Você pode obter o controle de <input type=range>

Para obter detalhes, consulte: https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-slider-runnable-track

 input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; /* Remove o estilo padrão do controle deslizante*/ height: px width: px; # BE; raio da borda: %; borda: sólido .em rgba(, , , .);

::-webkit-slider-thumb pode obter o rastreamento de <input type=range>

O texto acima é a implementação HTML5 apresentada pelo editor com sua própria barra de progresso e efeito deslizante. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a tempo. . Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!