Nous voyons souvent des comptes à rebours en sonnerie, et il existe de nombreuses façons de les mettre en œuvre. Mais cet article présentera une nouvelle méthode d'implémentation, utilisant SVG pour implémenter la fonction de compte à rebours.
Cet article utilise principalement les fonctionnalités Stroke-Dasharray et Stroke-Dashoffset de SVG. L'image ci-dessous montre l'effet du compte à rebours :
Cas de compte à rebours SVG
Parlons du code d'implémentation pertinent. Le code d'implémentation CSS est le suivant :
svg { transformation : rotation (-0,05 degrés);} cercle { transition : trait-dasharray .2s;}.time-count-x { hauteur de ligne : 1,5 ; position : relative ;}.time-second { position : absolue ; haut : 50 % ; gauche : 0 ; droite : 0 ; marge en haut : -.75em ; taille de la police : 100 px ;}Le code html correspondant est le suivant :
<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= gradient1> <stop offset=0% stop-color=#e52c5c></stop> <stop offset=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=matrix(0,-1,1,0,0,440)> <circle cx=220 cy=220 r=170 Stroke-width=50 Stroke=#f0f1f5 fill=none Stroke-dasharray=1069 1069></circle> <cercle cx=220 cy=220 r=170 largeur de trait=50 Stroke=url('#gradient1') fill=none Stroke-dasharray=1069 1069></circle> <circle cx=220 cy=220 r=170 Stroke-width=50 Stroke=url('#gradient2') fill= aucun Stroke-dasharray=534.5 1069></circle> </g> </svg> <span id=timeSecond class=time-second></span></div>Enfin, le code JavaScript correspondant :
var eleCircles=document.querySelectorAll(#timeCountX cercle);var eleTimeSec=document.getElementById(timeSecond);var périmètre=Math.PI*2*170;var circleInit=function(){ if(eleCircles[1]){ eleCircles[ 1].setAttribute(AVC-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) {retour} var b=b||10; var a=fonction(){ 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; circleInit() } }; ) ;L'ensemble du boîtier contient très peu de code. Les amis qui l'aiment peuvent enregistrer le code en HTML et l'exécuter pour découvrir l'effet réel.
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.