Мы часто видим кольцевой обратный отсчет, и существует множество способов его реализовать. Но в этой статье будет представлен новый метод реализации, использующий SVG для реализации функции обратного отсчета.
В этой статье в основном используются функции SVG Stroke-Dasharray и Stroke-DashOffset. На рисунке ниже показан эффект обратного отсчета:
Случай обратного отсчета SVG
Давайте поговорим о соответствующем коде реализации. Код реализации CSS выглядит следующим образом:
svg {transform: Rotate (-0,05 градуса);} круг {переход: штрих-dasharray .2s;}.time-count-x {высота строки: 1,5; позиция: относительная;}.time-секунда {позиция: абсолютная; сверху: 50%; слева: 0; справа: 0; выравнивание текста: размер шрифта: 100 пикселей;}Соответствующий HTML-код выглядит следующим образом:
<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= градиент1> <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 штрих-ширина=50 штрих=#f0f1f5 fill=nonestroke-dasharray=1069 1069></circle> <круг cx=220 cy=220 r=170 ширина штриха=50 инсульт=url('#gradient1') fill=nonestroke-dasharray=1069 1069></circle> <circle cx=220 cy=220 r=170 штрих-ширина=50 штрих=url('#gradient2') fill= нет Stroke-dasharray=534.5 1069></circle> </g> </svg> <span id=timeSecond class=time-секунда></span></div>Наконец, соответствующий код JavaScript:
var eleCircles=document.querySelectorAll(#timeCountX круг);var eleTimeSec=document.getElementById(timeSecond);var периметр=Math.PI*2*170;varcircleInit=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) {возврат} вар b=b||10 вар а=функция() {вар c=b/10; if(eleCircles[1]){ eleCircles[1].setAttribute(stroke-dasharray,perimeter*c+ 1069) } if(eleCircles[2]&&b<=5){ eleCircles[2].setAttribute(stroke-dasharray,периметр* c+ 1069) } if(eleTimeSec){ eleTimeSec.innerHTML=b } b--; if(b<0){clearInterval(timerTimeCount); timerTimeCount=null; alert(время истекло!); a(); timerTimeCount=setInterval(a,1000)};fnTimeCount( ) ;Во всем кейсе очень мало кода. Друзья, которым он нравится, могут сохранить код в формате html и запустить его, чтобы ощутить реальный эффект.
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.