So erstellen Sie eine Energieleiste in JavaScript

Question

Wie erstellt man eine Powerleiste, die automatisch nach oben und unten schaltet und stoppt, wenn ich auf den Bildschirm klicke.

http://i.stack.imgur.com/L3JSH.jpg

Answer 1

Sie müssen präziser sein, was genau haben Sie versucht, und was nicht funktioniert. Dies sollte Ihnen jedoch helfen. Dieses Beispiel verwendet sgv, könnte aber leicht in einen orientierten Ansatz übersetzt werden.

Ziel ist es, die Schaltfläche Toggle zu drücken, wenn der Kreis im mittleren Bereich ist. Viel Glück!

Hinweis: Dies funktioniert momentan nur in Chrom.

document.getElementById("toggler").addEventListener("click", function(){ 
 
    var el = document.querySelector("circle"); 
 
    var className = "stopped"; 
 

 
    el.classList.toggle(className); 
 

 
    if (!el.classList.contains(className)) { return } 
 

 
    var currentCX = parseFloat(getComputedStyle(el).getPropertyValue("cx")); 
 

 
    if (currentCX >= 240 && currentCX <= 260) { 
 
    console.log("hit"); 
 
    } else { 
 
    console.log("miss"); 
 
    } 
 
});

@keyframes sweep { 
 
    from { cx: 5; } 
 
    to { cx: 495; } 
 
} 
 

 
circle{ 
 
    animation-duration: 3s; 
 
    animation-timing-function: ease-in-out; 
 
    animation-name: sweep; 
 
    animation-iteration-count: infinite; 
 
    animation-direction: alternate; 
 
} 
 

 
circle.stopped{ 
 
    animation-play-state: paused; 
 
}

<svg id="lineWithDots" width="500px" height="20px"> 
 
    <g transform="translate(0,10)"> 
 
    <rect width="490" height="2" y="-1" x="5" /> 
 
    <rect width="20" height="10" y="-5" x="240" /> 
 
    <circle r="4" cx="5" stroke="rgb(0, 0, 0)" fill="rgb(255, 255, 255)" /> 
 
    </g> 
 
</svg> 
 

 
<div> 
 
    <button id="toggler">toggle</button> 
 
</div>