|
|
TrioxX
Hi,
ich hab mal wieder eine spezielle Anfrage an die JS Cracks. Ich handhabe es derzeit so, dass jeden Morgen von 05.00 bis 05.30 meine Seite deaktiviert wird. Man sieht dann nurnoch eine Meldung, dass gerade Wartungsarbeiten durchgeführt werden.
Derzeit steht dort "Probiere es bitte in 30 Minuten noch einmal" aber das möchte ich etwas animieren, indem ich anzeige, in wie viel Minuten und Sekunden man es wieder versuchen soll (fortlaufend), ergo:
Probiere es bitte in ca. 21:29 Minuten noch einmal
Leider hab ich bei Google nichts passendes gefunden oder die falschen Suchbegriffe verwendet 
KrickelD
du könntest ein countdown-script verwenden welches die serverzeit durch php mitgeteilt bekommt.
edit:
habe das script gefunden, es wird mit der serverzeit durch php gefüttert und läuft immer bis zur nächsten viertel stunde. das script ist schon etwas älter, hier und da sollte es noch optimiert werden
| php: |
1:
|
<span id="countdown[<?=floor(time()/900)*900+900;?>]">x</span> |
|
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
|
<script type="text/javascript">
layers = document.getElementsByTagName("span");
k_max = layers.length;
function countdown() {
for (var k = 0; k < k_max; k++){
layer = layers[k].id;
timestamp = layer.match(/countdown\[(.*)\]/);
timestamp = timestamp[1];
date = new Date(); // aktuelle zeit
timestamp_now = Math.round(date.getTime() / 1000); // aktueller timestamp
timestamp_diff = timestamp - timestamp_now; // sekunden bis zum ende des countdowns
// wenn countdown noch nicht abgelaufen ist
if(timestamp_diff > 0){
s = timestamp_diff % 60; // sekunden
i = Math.floor(timestamp_diff / 60) % 60; // minuten
h = Math.floor(timestamp_diff / 3600) % 24; // stunden
d = Math.floor(timestamp_diff / 86400) % 365; // tage
w = Math.floor(timestamp_diff / 604800) % 52; // wochen
m = Math.floor(timestamp_diff / 2592000) % 12; // monate
y = Math.floor(timestamp_diff / 31104000); // jahre
// ausgabe
out = "";
if (y > 0) out += y+" Jahre, ";
if (y > 0 || m > 0) out += m+" Monate, ";
if (y > 0 || m > 0 || w > 0) out += w+" Wochen, ";
if (y > 0 || m > 0 || w > 0 || d > 0) out += d+" Tage, ";
if (y > 0 || m > 0 || w > 0 || d > 0 || h > 0) out += h+" Stunden, ";
if (y > 0 || m > 0 || w > 0 || d > 0 || h > 0 || i > 0) out += i+" Min, ";
if (y > 0 || m > 0 || w > 0 || d > 0 || h > 0 || i > 0 || s > 0) out += s+" Sek";
// die funktion alle 1000 millisekunden neu aufgerufen:
setTimeout("countdown();",1000);
}
else {
out = "-aktualisieren-";
void(document.location.href='index.php');
}
// ausgabe schreiben
document.getElementById(layer).innerHTML = out;
}
}
countdown();
</script> |
|
hoffe dass du damit ein wenig weiter kommst 
derletztekick
Hi,
um die Uhrzeit unabhängig von der Zeit des PC anzuzeigen, hatte ich das auch mal über die Serverzeit realisiert: JS-Clock. Im prinzip das, was KrickelD auch beschrieben hat. Im Script kommt serverRefTime vom Server und wird beim Aufruf gesetzt.
Gruß Micha
TrioxX
@Krickel
Dein Counter tuts leider garnicht. Zeigt konstant "x"
@Micha
Der IE kennt "const" nicht, aber "var" löst das Problem ^^ Deine Uhr macht das, was ich brauche, nur verkehrt herum und ohne festgelegte Uhrzeit
Ich hab auch grad nochmal ein wenig Gegoogelt und stoße nur auf Countdowns bis zum Tag X mit festgelegter Uhrzeit. Ich schau aber mal weiter. Irgendwo muss sich sowas ja finden lassen ^^
EDIT.
Okay... Mittlerweile hab ich es so weit hinbekommen, dass die Zeit bis X angezeigt wird. Aber 1. mehr als unschön und 2. nicht "animiert". Da bräuchte ich ggf. nochml Hilfe vom Profi
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
|
<script language="javascript">
var hend = 5;
var mend = 30;
var date = new (Date);
var hour= <?=date("H",time())?>;
var minute = <?=date("i",time())?>;
var second = <?=date("s",time())?>;
var hour_end = hend-hour;
var minute_end = mend - minute;
var second_end = 60 - second;
if (hour_end < 0){ hour_end = 24-hour+hend; }
if(minute_end < 0 ){ minute_end = 60 - minute + mend; hour_end--; }
minute_end--;
if(hour < 10) { hour = "0" + hour;}
if(minute < 10) { minute = "0" + minute; }
if(second < 10) { second = "0" + second; }
if(second_end < 10) { second_end = "0" + second_end; }
if(hour_end < 10) { hour_end = "0" + hour_end; }
if(minute_end < 10) { minute = "0" + minute;}
document.write(hour_end+":"+minute_end+":"+second_end);
</script> |
|
derletztekick
Hi,
korrekt. Lob fürs const! Ich weiß, das er das nicht kennt aber es ist auch nur ein Beispiel ;-)
Zu deinem Code. Also, animiert bekomme ich ihn aber es kommt nicht das raus, was Du willst?!
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
|
<script type="text/javascript">
var hend = 5;
var mend = 30;
var date = new (Date);
var hour= <?php echo date("H",time()) ?>;
var minute = <?php echo date("i",time())?>;
var second = <?php echo date("s",time())?>;
var hour_end = hend-hour;
var minute_end = mend - minute;
var second_end = 60 - second;
function updateClock() {
if (hour_end < 0){ hour_end = 24-hour+hend; }
if(minute_end < 0 ){ minute_end = 60 - minute + mend; hour_end--; }
minute_end--;
if(hour < 10) { hour = "0" + hour;}
if(minute < 10) { minute = "0" + minute; }
if(second < 10) { second = "0" + second; }
if(second_end < 10) { second_end = "0" + second_end; }
if(hour_end < 10) { hour_end = "0" + hour_end; }
if(minute_end < 10) { minute = "0" + minute;}
var str = hour_end+":"+minute_end+":"+second_end;
document.getElementById('clock').firstChild.nodeValue = str;
//document.write(hour_end+":"+minute_end+":"+second_end);
}
window.onload = function(){
this.setInterval(function() { this.updateClock(); }, 500);
}
</script>
<span id="clock"> </span> |
|
Ich denke aber, dass Du es selbst hinbekommst!
Gruß Micha
TrioxX
Okay, das sieht sehr verrückt aus... Ich steig da grad auch nicht durch, warum er zeigt, was er zeigt ^^
Einziger Fehler, den ich auf die Schnelle entdecken konnte ist, dass du 500ms, anstatt 1000ms angegeben hast. So war die Zeit nurnoch halb so kurz wie geplant ^^
Jetzt hab ich ne Lebensaugabe... ^^
derletztekick
Hallo,
die 500ms kommen aus dem JSClock Script und leiten sich aus der Nyquist-Frequenz ab. Diese besagt, dass ich doppelt so oft abtasten muss als ich eigentlich haben möchte. Also, wenn ich jede Stunde einen Weret benötige, taste ich alle 30min ab. Wenn ich jede Minute einen Wert haben will, nehme ich 30sec. Wenn ich Sekündlich Werte benötige, muss ich also mit 0.5sec abtasten. (Oder öfter)
So ist sichergestellt, dass ich zum gewünschten Zeitpunkt wirklich eine Info habe.
Du solltest Dich nicht auf setInterval verlassen. Die Uhr kann driften! Es ist also als Zeitgeber eine denkbar schlechte Lösung. Nutze die Systemzeit des PCs, so wie ich das auch bei dem JS-Clock Script gemacht habe.
Gruß Micha
KrickelD
mein script funktioniert in den allen browsern die ich zur hand habe: ff, ie, opera und sogar auf meinem handy, keine ahnung was da genau drauf ist 
es wird die zeit zu einem vordefinierten zeitpunkt heruntergezählt. war es nicht was was du brauchst? komisch komisch
TrioxX
Also ich habs im IE7 und FF getestet und mehr als x sehe ich nicht ^^ Klär mich auf, wenn ich etwas übersehe
KrickelD
das ist ja komisch... habe mein altes script auf einer testseite eingebaut, einzige änderung: statt früher auf viertel-stunde (siehe oben) wird jetzt auf die nächste halbe stunde (siehe unten) zurückgezählt - was ich in die variable $interval ausgelagert habe...
es muss natürlich eine .php-datei sein weil js die serverzeit ja nicht kennt, das brauche ich aber nicht zu erwähnen
Demo siehe http://krickeld.de/temp/jscountdown.php
| php: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
|
<?
$interval = 1800;
$countdownzeit = floor(time()/$interval)*$interval+$interval;
?>
<html>
<head>
<title>JS-Countdown</title>
</head>
<body>
Countdown bis zur kommenden halben Stunde:<br><br><span id="countdown[<?=$countdownzeit?>]">x</span>
<script type="text/javascript">
layers = document.getElementsByTagName("span");
k_max = layers.length;
function countdown() {
for (var k = 0; k < k_max; k++) {
layer = layers[k].id;
timestamp = layer.match(/countdown\[(.*)\]/);
timestamp = timestamp[1];
date = new Date(); // aktuelle zeit
timestamp_now = Math.round(date.getTime() / 1000); // aktueller timestamp
timestamp_diff = timestamp - timestamp_now; // sekunden bis zum ende des countdowns
// wenn countdown noch nicht abgelaufen ist
if(timestamp_diff > 0){
s = timestamp_diff % 60; // sekunden
i = Math.floor(timestamp_diff / 60) % 60; // minuten
h = Math.floor(timestamp_diff / 3600) % 24; // stunden
d = Math.floor(timestamp_diff / 86400) % 365; // tage
w = Math.floor(timestamp_diff / 604800) % 52; // wochen
m = Math.floor(timestamp_diff / 2592000) % 12; // monate
y = Math.floor(timestamp_diff / 31104000); // jahre
// ausgabe
out = "";
if (y > 0) out += y+" Jahre, ";
if (y > 0 || m > 0) out += m+" Monate, ";
if (y > 0 || m > 0 || w > 0) out += w+" Wochen, ";
if (y > 0 || m > 0 || w > 0 || d > 0) out += d+" Tage, ";
if (y > 0 || m > 0 || w > 0 || d > 0 || h > 0) out += h+" Stunden, ";
if (y > 0 || m > 0 || w > 0 || d > 0 || h > 0 || i > 0) out += i+" Min, ";
if (y > 0 || m > 0 || w > 0 || d > 0 || h > 0 || i > 0 || s > 0) out += s+" Sek";
// die funktion alle 1000 millisekunden neu aufgerufen:
setTimeout("countdown();",1000);
}
else {
out = "-aktualisieren-";
}
// ausgabe schreiben
document.getElementById(layer).innerHTML = out;
}
}
countdown();
</script>
</body>
</html> |
|
TrioxX
Nicht schön, aber einzigartig
Funktioniert wunderbar und meinen Fehler hab ich auch entdeckt. Logischerweise muss erst die id gesetzt und dann das Script ausgeführt werden und nicht umgekehrt. Das hab ich aber auch erst jetzt gesehen ^^ Danke dir
|
|
