Zur Navigation

Javascript "Countdown" gesucht

1 Tombone

Hallo,
ich bin Anfänger in Javascript und habe auch schon ein paar Countdown-Scripte gefunden. Nur brachten diese nicht das Ergebnis, das ich suche.

Ich suche ein Countdown-Script in Javascript, das mir die Zeit sichtbar herunterzählt (Tage, Stunden, Minuten, Sekunden + "aufgeüllte" Nullen bei einstelligen Zahlen), nach Zeitablauf eine Nachricht ausgibt und NACH einer weiteren gewissen Zeit (einstellbar) dann den gesamten DIV versteckt aber so, daß der Div den Platz freigibt und nicht ein leerer Raum bleibt!
Wichtig wäre auch noch, daß der Countdown bei einem Reload NICHT von vorne anfängt sondern nur 1 x durchläuft!

Kann mir jemand diesbezüglich unter die Arme greifen?

Danke!

Grüße
Tom

22.08.2011 16:47 | geändert: 22.08.2011 16:49

2 Jörg

ich bin Anfänger in Javascript und habe auch schon ein paar Countdown-Scripte gefunden. Nur brachten diese nicht das Ergebnis, das ich suche.

Die gefundenen Scripte könntest du ja als Ausgangs-Basis für dein Script nehmen - die Grundfunktionalität des Herunterzählens, die du benötigst, ist in diesen ja enthalten

Ich suche ein Countdown-Script in Javascript, das mir die Zeit sichtbar herunterzählt, nach Zeitablauf eine Nachricht ausgibt und NACH einer weiteren gewissen Zeit ()einstellbar dann den gesamten DIV versteckt aber so, daß der Div den Platz freigibt und nicht ein leerer Raum bleibt!

Das Div, in welchem die Nachricht erscheint, oder ein anderes div?

Du kannst mit innerHTML eine Nachricht in ein vorhandenes div ausgeben

Ein div ausblenden kannst du, indem du diesem die CSS-Eigenschaft display:none zuweist, in dem folgenden Code-Beispiel dem div mit der ID "meinDiv":

document.getElementById("meinDiv").style.display = 'none';

Wichtig wäre auch noch, daß der Countdown bei einem Reload NICHT von vorne anfängt sondern nur 1 x durchläuft!

Dann musst du den erfolgreichen Countdown speichern, z.B. in einem Cookie. Das Script liest das Cookie bei jedem Aufruf der Seite aus, und falls das Cookie nicht vorhanden oder leer ist, startet das Script den Countdown nicht.

22.08.2011 20:01 | geändert: 22.08.2011 20:05

3 Tombone

Hi Jörg,

ich habe dieses Countdown-Script gefunden und in meine Seite eingebaut. Nun ist es aber so, daß ich - wie im ersten Thread beschrieben - mein Div nach Beendigung des Countdowns verschwinden lassen möchte.Ich habe das zurzeit mit

window.setTimeout("disablediv('countdown')",'');
und der Funktion
function disablediv(div){
		var objDiv = document.getElementById(div);
		objDiv.style.display="none"; 
	}

gelöst.
Jetzt ist es aber so, daß zwar der Div verschwindet, aber bei jedem Reload der Seite der Div (in meinem Fall mit Hindergrundbild) immer ganz kurz (kaum erkennbar) erscheint, dadurch den darunter liegenden Div wieder herunter und wieder nach oben schiebt.
Wie bringe ich das hin, daß der Countdown-Div nicht mehr erscheint, also auch nicht für einen kurzen Moment, wenn ich die Seite reloade?

Der Countdown-Code:


<?php
$hour = 13;
$minute = 44;
$month = 8;
$day = 27;
$year = 2011;
$event = 'zum Ende der Happy-HourAktion!';

$remaining = date('U', mktime($hour, $minute, 0, $month, $day, $year)) - date('U');

$days = floor($remaining / 60 / 60 / 24);
$hours = $remaining / 60 / 60 % 24;
$minutes = $remaining / 60 % 60;
$seconds = $remaining % 60;
?>


<script type="text/javascript">
function disablediv(div){
		var objDiv = document.getElementById(div);
		objDiv.style.display="none"; 
	}
</script>

<div class="happy-hour" id="countdown"></div>

<script type="text/javascript">
var days = '<?php echo $days; ?>';
var hours = '<?php echo $hours; ?>';
var minutes = '<?php echo $minutes; ?>';
var seconds = '<?php echo $seconds; ?>';
var finished = false;
function updatecountdown(){
seconds--;
if(seconds < 0){
seconds = 59;
minutes--;
if(minutes < 0){
minutes = 59;
hours--;
if(hours < 0){
hours = 23;
days--;
if(days < 0){
finished = true;
}
}
}
}
if(!finished){
if(days < 10 || days == 0){
var message = '0' + days + ' Tage<br />';
}
else
{var message = days + ' Tage<br />';}

//config für Stunden
if(hours < 10){
message +=  '0' + hours + ' Stunden<br />';
}
else
{message += hours + ' Stunden<br />';}

//config für Minuten
if(minutes < 10){
message += '0' + minutes + ' Minuten<br />';
}
else
{message += minutes + ' Minuten<br />';}

//config für Sekunden
if(seconds < 10){
message += '0' + seconds + ' Sekunden<br />';
}
else
{message += seconds + ' Sekunden<br />';}


message += 'bis <?php echo $event; ?>!';
document.getElementById('countdown').innerHTML = message;
}
else{
//document.getElementById('countdown').innerHTML = '<?php echo $event; ?>!';
clearInterval(theInterval);
window.setTimeout("disablediv('countdown')",''); /* Hier sind es 2sek. Die Zeit wird hinter dem Komma eingestellt. Z.B. 2000 sind 2 Sek.*/
}
}
var theInterval = setInterval("updatecountdown()", 1000);
</script>

Grüße
Tom

27.08.2011 13:34

4 Jörg

Vorweg: dein Code ist etwas schwierig zu lesen ohne Einrückungen. Aber die folgende Frage lässt sich ja auch allgemein beantworten

Jetzt ist es aber so, daß zwar der Div verschwindet, aber bei jedem Reload der Seite der Div (in meinem Fall mit Hindergrundbild) immer ganz kurz (kaum erkennbar) erscheint, dadurch den darunter liegenden Div wieder herunter und wieder nach oben schiebt.

Ich würde das Div in CSS so definieren, dass es ausgeblendet ist ("display:none;"). Dann kannst du es gezielt nur beim erstem Aufruf der Seite mit JavaScript einblenden.

Den ersten Aufruf der Seite kannst du ermitteln, indem du beim Reload noch einen Parameter hintendranhängst, z.B. "reloaded=1" (http://example.com/xy.html?reloaded=1). Bei jedem Aufruf überprüfst du dann, ob der Parameter gesetzt ist (siehe auch http://de.selfhtml.org/javascript/objekte/location.htm#search) - falls das nicht der Fall ist, blendest du das Div ein und führst dein Counter-Script aus

if (window.location.search != "reloaded=1") {
    // Einblenden des Divs und der übrige Counter-Code
}

27.08.2011 15:59 | geändert: 27.08.2011 16:00

5 Tombone

Hi Jörg,

ich habe verstanden was du meinst.

Nur eine Frage:
Mein CMS (zazavi) startet mit der Url /localhost/meinCMS/ ... also ohne index.php am Ende! Wie kann ich das einstellen, daß er mir index.php + deinem Tipp (?reloaded=1) sichtbar anhängt? Kann ich das über eine htaccess-Datei machen?

Grüße
Thomas

27.08.2011 20:16 | geändert: 27.08.2011 20:17

6 Jörg

Wie bringe ich das hin, daß der Countdown-Div nicht mehr erscheint, also auch nicht für einen kurzen Moment, wenn ich die Seite reloade?

"wenn ich die Seite reloade" habe ich dann wohl falsch verstanden - ich hatte das so verstanden, dass du da ein Meta-Refresh o.ä. drin hast, den du entsprechend anpassen kannst.

Dann musst du stattdessen wie in Beitrag 2 vorgeschlagen, das ganze über einen Cookie lösen (siehe auch dortigen Link). Wenn die Seite zum ersten Mal aufgerufen wird, speicherst du den Cookie und führst deinen restlichen Code aus. Wenn der Cookie bereits vorhanden ist, wird die Seite nicht zum ersten Mal aufgerufen. Das Verfahren funktioniert natürlich nicht bei Usern, bei denen Cookies deaktiviert sind.

27.08.2011 21:03 | geändert: 27.08.2011 21:03

7 Tombone

Hallo Jörg,
ich möchte Dir mein Vorhaben noch einmal beschreiben.

Ich möchte auf meiner Startseite ein Happy-Hour Feature (das nur zu sehen sein soll, wenn der Countdown aktiv ist) anbieten, daß mit einem Countdown-Script verwirklicht werden soll.
Diese Feature soll irgendwann am Tag beginnen und nach einer Stunde zum Beispiel - nach Ablauf der Countdown-Zeit, das zuständige Div ausblenden, weil ich nicht immer per Hand dann in den Code rein möchte, um es wieder zu disablen. Wenn der Countdown dann fertig gezählt hätte, würde ansonsten für eine längere Zeit die Ablaufmeldung (z.B. ...sie haben leider den Happy-Hour Bonus verpasst) permanent zu sehen sein, was ich nicht möchte. So könnte ich den Countdown-Zähler im Code stehen lassen und müßte nur die Zeit für ein erneutes Zählen einstellen, um ihn bzw. das Div zu aktivieren.

Bis jetzt funktioniert ja alles, aber eben bei einem Reload der Seite, was dann sehr unschön ist, blitzt kurz das Div (mit einem Hintergrundbild) und Schlussmeldung auf, verschiebt das darunter liegende Div nach unten und dann wieder nach oben. Also der Content ruckt dann, was für den User verwirrend ist.

Wie man nun das Div nach Ablauf der Zeit "verstecken" kann, ohne es kurz aufblitzen zu sehen...das ist mein Problem!

Grüße
Tom

28.08.2011 12:40

8 Jörg

Diese Feature soll irgendwann am Tag beginnen und nach einer Stunde zum Beispiel - nach Ablauf der Countdown-Zeit, das zuständige Div ausblenden, weil ich nicht immer per Hand dann in den Code rein möchte, um es wieder zu disablen.

Ist das eine feste Zeit, die für alle gilt? Dann würde ich den betreffenden Code per PHP zeitabhängig einbauen, z.B.:

<?php
$start = '15:00';
$end = '16:00';
$now = date("H:i");
if ($now >= $start && $now < $end) {
    ?>
    // dein Counter-Code
<?php
}
?>

28.08.2011 13:44 | geändert: 28.08.2011 13:47

9 Tombone

Hi Jörg,

man, das geht aber fix :-) Endlich mal ein Forum, das kompetente und auch sehr schnelle Antworten liefert! Toll!
Ach...übrigens...habe gelesen, daß du aus Göttingen kommst? Ich komme aus dem Landkreis Northeim :-)

Zum Thema:
Ja, dieses Feature soll z.B. zu irgendeiner Tageszeit 1 Stunde z.B. dauern, wobei Beginn und Ende für jeden Seitenbesucher gleichermaßen gelten soll! Jeder soll den Countdown zur gleichen Zeit sehen bzw. nicht mehr sehen können! Also jetzt nicht speziell für einzelne Besucher und auch keine verschiedene Zeiten für verschiedene Besucher!

Grüße
Tom

28.08.2011 13:56

10 Tombone

Jörg,

es funktioniert! Danke!

Ich lass' aber auch das Javascript für das zeitgesteuerte "Verstecken" des Divs drin, da somit ein Benutzer sofort nach Ablauf des Countdowns das Happy-Hour Feature nicht mehr zu sehen bekommt und diesbezüglich kein Seitenreload brauch, um das Feature (per PHP-Code) entgültig aus der Seite zu "verbannen"!

Echt klasse...so wenig Code und doch sooooo viel Wirkung! Nur muss man sich damit auskennen - so wie Du! :-)

Grüße
Tom

28.08.2011 14:22 | geändert: 28.08.2011 14:23