A menudo vemos cuentas atrás de timbres y hay muchas formas de implementarlas. Pero este artículo presentará un nuevo método de implementación, utilizando SVG para implementar la función de cuenta regresiva.
Este artículo utiliza principalmente las funciones de trazo-dasharray y trazo-dashoffset de SVG. La siguiente imagen muestra el efecto de ejecución de la cuenta regresiva:
Caso de cuenta regresiva SVG
Hablemos del código de implementación relevante. El código de implementación CSS es el siguiente:
svg { transformar: girar (-0,05 grados);} círculo { transición: trazo-dasharray .2s;}. tiempo-cuenta-x { altura de línea: 1,5; posición: relativa;}. tiempo-segundo { posición: absoluta; arriba: 50%; izquierda: 0; derecha: 0; margen superior: -.75em; tamaño de fuente: 100px;El código html relevante es el siguiente:
<div id=timeCountX class=time-count-x> <svg ancho=440 alto=440 viewBox=0 0 440 440 clase=centro> <defs> <linearGradient x1=1 y1=0 x2=0 y2=0 id= gradiente1> <desplazamiento de parada=0% color de parada=#e52c5c></stop> <desplazamiento 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 transform=matriz(0,-1,1,0,0,440)> <círculo cx=220 cy=220 r=170 ancho-trazo=50 trazo=#f0f1f5 fill=ninguno trazo-dasharray=1069 1069></circle> <círculo cx=220 cy=220 r=170 ancho-trazo=50 trazo=url('#gradient1') relleno=ninguno trazo-dasharray=1069 1069></circle> <círculo cx=220 cy=220 r=170 trazo-ancho=50 trazo=url('#gradient2') relleno= ninguno Stroke-dasharray=534.5 1069></circle></g> </svg> <span id=timeSecond clase=tiempo-segundo></span></div>Finalmente, el 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(trazo-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) {retorno} var b=b||10; var a=función(){ var c=b/10; if(eleCircles[1]){ eleCircles[1].setAttribute(stroke-dasharray,perimeter*c+ 1069) } if(eleCircles[2]&&b<=5){ eleCircles[2].setAttribute(stroke-dasharray,perimeter* c+ 1069) } if(eleTimeSec){ eleTimeSec.innerHTML=b } b--; if(b<0){ clearInterval(timerTimeCount); timerTimeCount=null; alerta(¡se acabó el tiempo!); fnTimeCount( ) ;Todo el caso tiene muy poco código. Los amigos a quienes les guste pueden guardar el código en html y ejecutarlo para experimentar el efecto real.
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.