Progressbar
Guten Abend,
Ich habe mal eine Frage. Und zwar möchte ich gerne eine Progress bar erstellen.
Mit dem <progress> möchte ich es nicht machen, da es in jedem Browser anders aussieht.
Aktuell habe ich es so das ich es mit "width"
Dort ist aber das Problem das ich gerne die den kompletten Balken auf 70 % Width machen.
Dann möchte ich gerne "max" auf "4" habe. Heißt, wenn mein Value "4" ist, ist der Balken voll. Wenn meine Values aber auf "2" ist, soll der Balken nur bis zur Hälfe voll sein.
Aber die komplette Width vom Balken soll auf 70% bleiben, da es bei 4% sonst ja relativ klein ist.
Hat da jemand eine Idee?
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<style>
body{
width:100%;
}
.box{
padding:5px;
margin:10px;
border:2px solid black;
}
.test1{
height:22px;
width:70%;
margin:0 auto;
border:2px solid blue;
}
.progress-bar{
height:21px;
background:green;
color:red;
font-weight:800;
text-align:center;
border:1px solid black;
width:10px;
}
</style>
<body>
<div class="box">Welche Zahl soll 100% des Balkens sein ?
<input id="zahl1" type="number" value="4"></div>
<div id="balkena" class="test1">
<div class="progress-bar progress-bar-danger" id="innen" role="progressbar"></div>
</div>
<div class="box"> Jetzt wähle eine neue Zahl die der Balken anzeigen soll
<input id="zahl2" type="number" value="2">
</div>
<div id="out"></div>
<script>
//prozent=70;
//aktuellefenstergroesse=document.body.offsetWidth;
var number1=document.getElementById('zahl1');
var number2=document.getElementById('zahl2');
number1.addEventListener('change',function(){
weiter(number1,number2)
})
number2.addEventListener('change',function(){
weiter(number1,number2)
})
function weiter(number1,number2){
let x1=number2.value;
let x2=number1.value;
var info=document.getElementById('out');
if(parseInt(x1)<=parseInt(x2)){
//code normalerweise hier rein
}else{
info.innerHTML='<p style="color:red">Deine zweite Zahl ist größer als der Balken anzeigen (100%) kann.</p>';
return;
}
var valuezahl=x2/100;
var balkenprozentneu=x1/valuezahl;
var bin=document.getElementById('innen');
bin.innerHTML=balkenprozentneu.toFixed(3)+'%';
bin.style.width=balkenprozentneu+'%';
info.innerHTML='Rechenweg<br>'
+' '+x2+' sind 100% <br>'
+' Das teilen wir durch 100.<br>'
+' Das ergibt '+valuezahl+'<br>'
+' Die erwünschte Zahl ('+x1+')<br>'
+' Teilen wir mit der '+valuezahl+'<br>'
+' Das macht dann '+balkenprozentneu+' %<br>'
+' Das ist der neue Prozentsatz vom Balken<br>';
}
</script>
</body>