<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:
2. H5 vem com controle deslizanteDefina 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!