Countdown Balken feste Breite ?

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

12:25, 8.8.2012

Hallo

ich habe ein kleines Countdown JS mit sowas wie einem Lade-Balken als Ansicht

jede Sekunde wird der grüne Balken kleiner

<html>
<head>
<title>Countdown Balken Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
<!--
	
	sek=200;
	
	function countdown(){
		sek--;
		document.getElementById('zaehler').innerHTML=sek;
		document.getElementById('zbalken').style.width = sek + 'px'; 
		if(sek>0) { 
		setTimeout('countdown()',1000);
		}
		else { 
		// ---- Aktion nach Ablauf ---- 
		document.getElementById('ergebnis').innerHTML='habe fertig';
		}
	}

//-->
</script>


<style type="text/css">
<!--

body { 
  background:#EFEFEF; 
  color:#000000; 
}

#zbox { 
  height:20px; 
  width:240px; 
  margin:0px; 
  padding:4px; 
  background:#AAAAAA; 
} 

#xbalken { 
  height:20px; 
  width:200px; 
  margin:0px; 
  padding:0px; 
  background:#FF0000; 
  float:left; 
} 

#zbalken { 
  height:18px; 
  width:200px; 
  margin:0px; 
  padding:0px; 
  background:#33FF33; 
  border:solid 1px #FF0000; 
} 

#zaehler { 
  height:20px; 
  width:30px; 
  margin:0px; 
  padding:2px 0px 0px 4px; 
  background:#CCCCFF; 
  float:right; 
} 

#ergebnis { 
  font-size:36px; 
}

.ztext { 
  font-family: "Courier New", Courier, mono; 
  font-size: 14px; 
} 


-->
</style>


</head>

<body onload="countdown()">

<br>
<br>

<div id="zbox">

  <div id="xbalken">
    <div id="zbalken">&nbsp;</div>
  </div>
  
  <div id="zaehler" class="ztext">&nbsp;</div>
  
</div>

<br>
<br>

<div id="ergebnis">&nbsp;</div>

<br>
<br>

</body>
</html>

die Balken-Breite ist da aber abhängig von der Sekunden-Anzahl,

wie kann ich es machen, dass der Balken
- egal wieviele Sekunden - immer eine feste Balken-Breite hat

also er soll auch bei 10 Sekunden oder bei 30 Sekunden oder ... immer 200 Pixel breit sein,
und sich mit jeder Sekunde dann verkleinern, aber nicht immer im 1 Pixel, sondern prozentual

also wenn Sekunden = 10 und Balken = 200 Pixel dann je Sekunde um 20 Pixel
so dass er nach 10 Sekunden weg ist

oder wenn Sekunden = 20 und Balken = 200 Pixel dann je Sekunde um 10 Pixel
so dass er nach 20 Sekunden weg ist

also .. feste Balken-Breite und verkleinern um Pixel dynamisch ...

Wie stelle ich das an ?
Danke!

EDIT: ........ habe es irgendwie hinbekommen

<script type="text/javascript">
<!--
     
    var sek = 30;
    var pxw = 200; 
	var shr = Math.ceil(pxw/sek); 
	
    function countdown(){
        sek--;
		var pxg = (sek*shr); 
		
        document.getElementById('zaehler').innerHTML=sek;
        document.getElementById('zbalken').style.width = pxg + 'px';
        if(sek>0) {
        setTimeout('countdown()',1000);
        }
        else {
        // ---- Aktion nach Ablauf ---- 
        document.getElementById('ergebnis').innerHTML='habe fertig';
        }
    }
 
//-->
</script>

aber vielleicht gibts ja doch noch ne bessere Lösung :)
... für Countdown mit Balken

Beitrag zuletzt geändert: 8.8.2012 12:47:04 von wegreise

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
php-test1

php-test1 hat kostenlosen Webspace.

20:30, 13.8.2012
Und was hat das für einen sinn, wenn du das auf deine Webseite stellen möchtest hast du irgendwann keine Besucher mehr weil dieser immer kleiner werdende Balken sie total verwirrt und vorallem auch nervt. Also ich würde das lassen, aber das musst du wissen.
roket

roket hat kostenlosen Webspace.

23:24, 13.8.2012
Wieso bastelst du dir überhaupt son zeug zusammen?? Benutze lieber jQuery, da gibts genug fertige Funktionen wie animate(), slideToggle() und was weiss ich...das kannst du immernoch nach sec. animieren lassen indem du die animationszeit dynamisch abänderst! is viel unproblematischer, leichter zu handeln und deine Breite bleibt gleich!
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city