Countdown über eine Woche mit anschliessender Aktion

R

rvlvr

Grünschnabel
Liebes Forum,

ich bin auf der Suche nach einer einfachen Möglichkeit, folgendes zu realisieren:

Wie auf diesem Bild, soll ein Countdown über den Zeitraum einer Woche auf 100% raufzählen. Bei 100% wird darunter ein Bild bis verlassen der Seite eingeblendet. Der Witz ist, dass die Zahlen richtig fleissig rattern sollen, der Fortschritt tatsächlich aber nur langsam (eben über 7 Tage hinweg) geht. Eventuell braucht es dazu noch ein paar mehr Stellen hinter dem Punkt.

screenshot20110609at307.png


Kennt jemand eine einfache Lösung dafür?
Wäre super!

Vielen Dank im Vorraus,
busfahrer
 
Was spricht dagegen, dass Du einfach den jetzigen Zeitpunkt nimmst und mit setInterval() einfach alle 10 msec die Zahl änderst? Als Tipp: Wenn ich mich nicht verrechnet habe, dann hat eine Woche 604800000 msec ;)

Noch ein Tipp: das sind alle 10 msec 0,000001653% mehr oder jede msec 0,0000001653%
 
Zuletzt bearbeitet:
Hey!
Vielen Dank für die Antwort ;-)
Vielleicht denke ich auch viel zu kompliziert (bin kein Programmierer). Aber ist es so gedacht, dass sobald jemand, egal wann, die Seite betritt, der Countdown ab diesem Moment beginnt und bis 100% eine Woche dauert!

Vielen Dank für Hilfe jeder Art :-)
 
Noeden hat gesagt.:
Was spricht dagegen, dass Du einfach den jetzigen Zeitpunkt nimmst und mit setInterval() einfach alle 10 msec die Zahl änderst? Als Tipp: Wenn ich mich nicht verrechnet habe, dann hat eine Woche 604800000 msec...
Zum Vergrößern anklicken....
... weil kein Mensch sein Browserfenster mit der betreffenden Seite 604800000 msec lang offen hält. Oder?

P.S.
Ohne serverseitige Unterstützung wird das wohl nicht funktionieren.
 
Zuletzt bearbeitet:
Hi,
… dass niemand, normalerweise, die Seite so lange offenhält, ist quasi der Witz bei der Sache ;-)

Wie würdest du es lösen, hela?
 
Nur um auch mal was dazu zu sagen.

Villeicht mit einen Cokkie das sich merkt wann de Besucher den Countdown angestupost hat.
 
Hier mal eine Variante die vom Aufruf-Zeitpunkt an 7 Tage hoch zählt.
Wie du den Zeitpunkt für später speicherst, ist eine andere Geschichte.


HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Sieben Tage</title>
</head>

<body>
	<div>Loading <span id="out">0.0000000000000000000000</span>%</div>
	
	<script type="text/javascript">
	/* <![CDATA[ */
	var start = new Date().getTime(),//Der Wert käm z.B. von einer Datenbank oder einem Cookie, je nach dem, wann der User das ganze angestoßen hat.
		end = start + 7*24*60*60*1000,
		cur = new Date().getTime(),
		out = document.getElementById('out'),
		step = 30;//ms
	
	var timer = window.setInterval(function() {
		cur += step;
		
		//Fertig?
		if(cur > end) {
			window.clearInterval(timer);
			out.innerHTML = "100.0000000000000000000000";
		} else {
			var progress = ((cur - start) / (end - start)).toString();
			
			//Wenn in dem Prozentwert ein "e" vor kommt, ist der Wert so klein, dass die exponential Schreibweise benutzt wird. Also nehmen wir einfach 0.
			if(progress.indexOf('e') > -1) {
				out.innerHTML = '0.0000000000000000000000';
			} else {
				out.innerHTML = progress;
			}
		}
	}, step);
	/* ]]> */
	</script>
</body>

</html>
 
Ich hatte den "Witz" von Anfang an so verstanden. Aber sonst mit Cookies. Denn ohne Login gäb es keine andere Variante oder?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück