Wir sehen oft Ring-Countdowns und es gibt viele Möglichkeiten, sie umzusetzen. In diesem Artikel wird jedoch eine neue Implementierungsmethode vorgestellt, bei der SVG zum Implementieren der Countdown-Funktion verwendet wird.
In diesem Artikel werden hauptsächlich die Funktionen Stroke-Dasharray und Stroke-Dashoffset von SVG verwendet. Das Bild unten zeigt den Countdown-Laufeffekt:
SVG-Countdown-Hülle
Lassen Sie uns über den relevanten Implementierungscode sprechen. Der CSS-Implementierungscode lautet wie folgt:
svg { transform: rotieren(-0,05 Grad);}Kreis { Übergang: Stroke-Dasharray .2s;}.time-count-x { Zeilenhöhe: 1,5;}.time-Sekunde { Position: absolut; oben: 50 %; rechts: 0; Rand oben: -.75em;Der relevante HTML-Code lautet wie folgt:
<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= Farbverlauf1> <Stopp-Offset=0 % stop-color=#e52c5c></stop> <Stopp-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> <Kreis cx=220 cy=220 r=170 Strichbreite=50 Stroke=url('#Gradient1') Fill=Keine Stroke-Dasharray=1069 1069></circle> <circle cx=220 cy=220 r=170 Stroke-width=50 Stroke=url('#Gradient2') Fill= keine stroke-dasharray=534.5 1069></circle> </g> </svg> <span id=timeSecond class=time-second></span></div>Zum Schluss der relevante JavaScript-Code:
var eleCircles=document.querySelectorAll(#timeCountX Circle);var eleTimeSec=document.getElementById(timeSecond);var perimeter=Math.PI*2*170;var CircleInit=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,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=null; time is up!);fnTimeCount( );Der gesamte Fall enthält nur sehr wenig Code. Freunde, die ihn mögen, können den Code in HTML speichern und ausführen, um den tatsächlichen Effekt zu erleben.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.