집 > 기사 > 웹 프론트엔드 > SVG를 사용하여 다채로운 링 카운트다운을 구현하는 방법

SVG를 사용하여 다채로운 링 카운트다운을 구현하는 방법

php中世界最好的语言원래의: 2018-01-11 09:51:262286검색

이번에는 SVG를 사용하여 다채로운 반지 카운트다운을 시작하는 방법을 보여 드리겠습니다. SVG를 사용하여 다채로운 반지 카운트다운을 구현하는 방법은 무엇인가요? SVG로 컬러풀한 링 카운트다운을 구현할 때 주의사항은 무엇인가요? 다음은 실제 사례입니다. 살펴보겠습니다.

우리는 링 카운트다운을 자주 볼 수 있으며 이를 구현하는 방법은 다양합니다. 하지만 이 글에서는 SVG를 사용하여 카운트다운 기능을 구현하는 새로운 구현 방법을 소개합니다.

SVG 카운트다운 사례

다음은 해당 구현 코드입니다. CSS 구현 코드는 다음과 같습니다.

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;
}

관련 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="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(&#39;#gradient1&#39;)" fill="none" stroke-dasharray="1069 1069"></circle>
            <circle cx="220" cy="220" r="170" stroke-width="50" stroke="url(&#39;#gradient2&#39;)" fill="none" stroke-dasharray="534.5 1069"></circle>
        </g>
    </svg>
    <span id="timeSecond" class="time-second"></span>
</div>

마지막으로 관련 JavaScript코드:

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("时间到！");
            circleInit()
        }
    };
    a();
    timerTimeCount=setInterval(a,1000)
};
fnTimeCount();

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. , PHP 중국어 웹사이트의 다른 관련 기사도 주목해주세요!