Comment implémenter un compte à rebours coloré en utilisant SVG

Cette fois, je vais vous montrer comment démarrer un compte à rebours en anneau coloré en utilisant SVG. Comment utiliser SVG pour réaliser un compte à rebours en anneau coloré ? Quelles sont les précautions pour mettre en place un compte à rebours en anneau coloré avec SVG Voici un cas pratique, jetons un oeil.

Nous voyons souvent des comptes à rebours en sonnerie, et il existe de nombreuses façons de les mettre en œuvre. Mais cet article présentera une nouvelle méthode d'implémentation, utilisant SVG pour implémenter la fonction de compte à rebours.

Cas du compte à rebours SVG

Ce qui suit est le code d'implémentation pertinent. Le code d'implémentation CSS est le suivant :

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

Le code html pertinent est le suivant :

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

Enfin, le code JavaScript pertinent :

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

Croyez-le Après avoir lu ces cas, vous maîtrisez les méthodes. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture connexe :

Un résumé de tous les éléments et de la syntaxe de base de H5

Comment faire fonctionner indexedDB en html5

Comment gérer l'incompatibilité des anciennes versions des navigateurs avec H5 et C3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!