Freqüentemente vemos contagens regressivas em anel e há muitas maneiras de implementá-las. Mas este artigo apresentará um novo método de implementação, usando SVG para implementar a função de contagem regressiva.
Este artigo usa principalmente os recursos Stroke-dasharray e Stroke-dashoffset do SVG. A imagem abaixo mostra o efeito de contagem regressiva:
Caso de contagem regressiva SVG
Vamos falar sobre o código de implementação relevante. O código de implementação CSS é o seguinte:
svg { transformar: girar (-0,05deg);} círculo { transição: acidente vascular cerebral-dasharray .2s;}.time-count-x { altura da linha: 1,5; superior: 50%; esquerda: 0; direita: 0; margem superior: -.75em;O código HTML relevante é o seguinte:
<div id=timeCountX class=time-count-x> <svg width=440 height=440 viewBox=0 0 440 440 class=center> <defs> <linearGradient x1=1 y1=0 x2=0 y2=0 id= gradiente1> <deslocamento de parada=0% stop-color=#e52c5c></stop> <deslocamento de parada=100% stop-color=#ab5aea></stop> </linearGradient> <linearGradient x1=1 y1=0 x2=0 y2=0 id=gradient2> <stop offset=0% stop-color=#4352f3></stop> <stop offset=100% stop-color=#ab5aea></stop> </linearGradient> </defs> <g transformar=matriz(0,-1,1,0,0,440)> <círculo cx=220 cy=220 r=170 largura do curso=50 curso=#f0f1f5 preenchimento=nenhum curso-dasharray=1069 1069></círculo> <círculo cx=220 cy=220 r=170 largura do curso=50 acidente vascular cerebral=url('#gradient1') fill=none acidente vascular cerebral-dasharray=1069 1069></circle> <círculo cx=220 cy=220 r=170 acidente vascular cerebral-width=50 acidente vascular cerebral=url('#gradient2') fill= nenhum acidente vascular cerebral-dasharray=534.5 1069></circle> </g> </svg> <span id=timeSecond class=time-second></span></div>Finalmente, o código JavaScript relevante:
var eleCircles=document.querySelectorAll(#timeCountX círculo);var eleTimeSec=document.getElementById(timeSecond);var perímetro=Math.PI*2*170;var círculoInit=function(){ if(eleCircles[1]){ eleCircles[ 1].setAttribute(stroke-dasharray,1069 1069) } if(eleCircles[2]){ eleCircles[2].setAttribute(stroke-dasharray,perimeter/2+ 1069) } eleTimeSec.innerHTML=};var timerTimeCount=null;var fnTimeCount=function(b){ if(timerTimeCount) { return } var b=b||10; var a=function(){ var c=b/10; if(eleCircles[1]){ eleCircles[1].setAttribute(stroke-dasharray,perímetro*c+ 1069) } if(eleCircles[2]&&b<=5){ eleCircles[2].setAttribute(stroke-dasharray,perímetro* c+ 1069) } if(eleTimeSec){ eleTimeSec.innerHTML=b } b--; if(b<0){ clearInterval(timerTimeCount); timerTimeCount=null;fnTimeCount( ) ;O caso inteiro tem muito pouco código. Amigos que gostarem podem salvar o código em HTML e executá-lo para experimentar o efeito real.
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.