So implementieren Sie einen farbenfrohen Ring-Countdown mit SVG-H5-Tutorial-php.cn

So implementieren Sie einen farbenfrohen Ring-Countdown mit SVG

php中世界最好的语言

Freigeben： 2018-01-11 09:51:26

Original

2362 Leute haben es durchsucht

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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();

Nach dem Login kopieren

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!