Hallo 
Sorry dass der Titel so komisch ist, ich habe aber keine Ahnung, wie ich's besser beschreiben soll. Ich habe in Javascript eien Ladebalken programmiert, der sich mit click auf einen button fült. Sobald ein Timer abgelaufen ist, wird einem anderer Ladebalken, der über dem ersten liegt die gleiche breite zugewiesen (der andere also sozusagen umgefärbt). Ist es irgendwie möglich, dass das nicht sprunghaft, sondern im laufe von 1 bis 2 sekunden passiert? Also, dass zuerst die linke Seite grün wird und der Übergang dann weiter nach rechts wandert?
Ich hoffe ihr könnt mir helfen
LG Sandro
Hier der Code:
Sorry dass der Titel so komisch ist, ich habe aber keine Ahnung, wie ich's besser beschreiben soll. Ich habe in Javascript eien Ladebalken programmiert, der sich mit click auf einen button fült. Sobald ein Timer abgelaufen ist, wird einem anderer Ladebalken, der über dem ersten liegt die gleiche breite zugewiesen (der andere also sozusagen umgefärbt). Ist es irgendwie möglich, dass das nicht sprunghaft, sondern im laufe von 1 bis 2 sekunden passiert? Also, dass zuerst die linke Seite grün wird und der Übergang dann weiter nach rechts wandert?
Ich hoffe ihr könnt mir helfen
LG Sandro
Hier der Code:
<!DOCTYPE html>
<html>
<style>
#MyTime {
margin-top: 10px;
position: realtive;
width: 100%;
background-color: #d0d0d0;
}
#TimeBar {
top: 0;
width: 0%;
height: 5px;
background-color: #ff8800;
}
#myProgress {
display: grid;
grid-template-columns: repeat(1, 1fr);
/*grid to stack both bars*/
grid-template-rows: repeat(1, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
position: realtive;
width: 100%;
background-color: #ddd;
}
#myBar {
grid-area: 1/1/2/2;
/*red live bar*/
top: 0;
width: 0%;
height: 30px;
background-color: #ff0000;
}
#BarTwo {
grid-area: 1/1/2/2;
/*green reset update bar*/
margin-top: 0;
top: 0;
width: 0%;
height: 30px;
background-color: #4CAF50;
}
</style>
<body>
<h1>JavaScript Progress Bar</h1>
Combo:<p id="ComboCount"></p>
<p id="ClockDisplay"></p>
<div id="myProgress">
<div id="myBar"></div>
<div id="BarTwo"></div>
</div>
<div id="MyTime">
<div id="TimeBar"></div>
</div>
<br>
<button onclick="test()">Test</button>
<script>
var Clock = 300;
var Combo = 0;
var width = 0;
var elem = document.getElementById("myBar"); //setting numbers on first start
var elemtwo = document.getElementById("BarTwo");
var elemtime = document.getElementById("TimeBar");
document.getElementById("ClockDisplay").innerHTML = Clock;
document.getElementById("ComboCount").innerHTML = Combo;
function UpdateDisplay() {
document.getElementById("ComboCount").innerHTML = Combo;
elem.style.width = width / 100 + "%";
}
setInterval(countdown, 20); //10 seconds timer that refreshes the combo
function countdown() {
if (Clock > 0) {
Clock--;
document.getElementById("ClockDisplay").innerHTML = Clock;
elemtime.style.width = Clock / 3 + "%";
} else {
Combo = 0;
document.getElementById("ClockDisplay").innerHTML = Clock;
document.getElementById("ComboCount").innerHTML = Combo;
for (let i = 1; i <= width / 100; i++) {
elemtwo.style.width = i + "%";
}
}
}
function test() {
if (width >= 10000) {
Combo = 0;
width = 0;
document.getElementById("ComboCount").innerHTML = Combo;
} else {
Clock = 300; //resetting clock, adding to the combo, dealing damage, update numbers
Combo += 2;
width += 2 * Combo;
UpdateDisplay();
}
}
</script>
</body>
</html>
