We often see ring countdowns, and there are many ways to implement them. But this article will introduce a new implementation method, using SVG to implement the countdown function.
This article mainly uses the stroke-dasharray and stroke-dashoffset features of SVG. The picture below shows the countdown running effect:
SVG countdown case
Let’s talk about the relevant implementation code. The css implementation code is as follows:
svg { transform: rotate(-0.05deg);}circle { transition: stroke-dasharray .2s;}.time-count-x { line-height: 1.5; position: relative;}.time-second { position: absolute; top: 50%; left: 0; right: 0; margin-top: -.75em; text-align: center; font-size: 100px;}The relevant html code is as follows:
<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> <circle cx=220 cy=220 r=170 stroke-width=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= none stroke-dasharray=534.5 1069></circle> </g> </svg> <span id=timeSecond class=time-second></span></div>Finally, the relevant 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); timerTimeCount=null; alert(time is up!); circleInit() } }; a(); timerTimeCount=setInterval(a,1000)};fnTimeCount() ;The entire case has very little code. Friends who like it can save the code into html and run it to experience the actual effect.
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.