So implementieren Sie einen farbenfrohen Ring-Countdown mit SVG

Dieses Mal zeige ich Ihnen, wie Sie mit SVG einen farbenfrohen Ring-Countdown starten. Was sind die Vorsichtsmaßnahmen für die Implementierung eines farbenfrohen Ring-Countdowns mit SVG? Hier ist ein praktischer Fall, schauen wir uns das an.

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.

SVG-Countdown-Fall

Das Folgende ist der relevante Implementierungscode. Der CSS-Implementierungscode lautet wie folgt:

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

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="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>

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

Glauben Sie es. Nachdem Sie diese Fälle gelesen haben, beherrschen Sie die Methoden. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Eine Zusammenfassung aller Elemente und der grundlegenden Syntax von H5

So bedienen Sie indexedDB in HTML5

So gehen Sie mit der Inkompatibilität älterer Browserversionen mit H5 und C3 um

Das obige ist der detaillierte Inhalt vonSo implementieren Sie einen farbenfrohen Ring-Countdown mit SVG. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!