Tutorials

Script für Countdown (alles möglich) Tutorial

Einloggen
Benutzername:
Passwort:

Passwort vergessen?
Kostenlos
Anmelden
werde Fan von ntmb.de...
anzeigen
Script für Countdown (alles möglich)
Schreibe dein eigenen Countdown.

5822 - chrisboy - 17.07.2009 21:54 Uhr - Version: 5 - - verlinken als BB-Code


Ich habe mal ein bisschen gebastelt und einen Countdown erstellt. Und der geht noch nun sage ich euch, wie ihr euren eigenen Countdown bauen könnt. Ist einfach, wenn man es weiß. Hier könnt ihr sogar aussuchen ob er nur Sekunden, Sekunden und Minuten, usw. anzeigen soll...

Okay. Das ist der Countdown wenn er mal fertig ist.
Das Datum ist: 17. Juli 2009 um 19:02:00 Uhr
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
 <div align=center>
 <SPAN id=c2 style="FONT: bold 25px arial; COLOR: black;">;</SPAN><br>
</div>

<script type='text/javascript'>
// Made by Chrisboy
var end = new Date('July 17, 2009 19:02:00');
function toSt2(n) {
  s = '';
  if (n < 10) s += '0';
  return (s + n).toString();
}
function toSt3(n) {
  s = '';
  if (n < 10) s += '00';
  else if (n < 100) s += '0';
  return (s + n).toString();
}
function countdown() {
  d = new Date();
  count = Math.floor(end.getTime() - d.getTime());
  if(count > 0) {
    miliseconds = toSt3(count%1000); count = Math.floor(count/1000);
    seconds = toSt2(count%60); count = Math.floor(count/60);
    minutes = toSt2(count%60); count = Math.floor(count/60);
    hours = toSt2(count%24); count = Math.floor(count/24);
    document.getElementById('c2').innerHTML = hours + ':' + minutes + ':' + seconds
    setTimeout('countdown()', 100);
  }
}
countdown();
</script>

----------------------------------------------
Nun werde ich euch alles erklären.
1
2
3
 <div align=center>
 <SPAN id=c2 style="FONT: bold 25px arial; COLOR: black;">;</SPAN><br>
</div>

black Ist die Farbe des Textes und 25px ist die Größe
----------------------------------------------
1
2
3
 <script type='text/javascript'>
// Made by Chrisboy 
var end = new Date('July 17, 2009 19:02:00');

Hier muss das End-Datum hin. Immer !!
----------------------------------------------
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 function toSt2(n) {
  s = '';
  if (n < 10) s += '0';
  return (s + n).toString();
}
function toSt3(n) {
  s = '';
  if (n < 10) s += '00';
  else if (n < 100) s += '0';
  return (s + n).toString();
}
function countdown() {
  d = new Date();
  count = Math.floor(end.getTime() - d.getTime());
  if(count > 0) {

Hier bitte nix ändern. Das muss so sein
----------------------------------------------
1
 seconds = toSt2(count%60); count = Math.floor(count/60);

Sagt aus, das Sekunden laufen. und zwar 60. kann man ändern (dazu später)
----------------------------------------------
1
 minutes = toSt2(count%60); count = Math.floor(count/60);

Sagt aus, das Minuten laufen, und zwar 60 kann man ändern (dazu später)
----------------------------------------------
1
 hours = toSt2(count%24); count = Math.floor(count/24);)

^^ das gleich nur in Stunden
----------------------------------------------
1
 document.getElementById('c2').innerHTML = hours + ':' + minutes + ':' + seconds

Sagt aus, das Stunden (hours) + Minuten (minutes) + Sekunden (seconds) angezeigt werden.
----------------------------------------------
Nun wird im Countdown Stunden, Minuten und Sekunden angezeigt.
Wenn der Countdown über mehrere Tage geht, ist es einfach. Man ändert einfach die zahl (24) auf 1000 ändern . Denn dann gibt es nicht mehr 24 Stunden sondern 1000.
1
 hours = toSt2(count%1000); count = Math.floor(count/1000);)

----------------------------------------------
Wenn man nur Minuten und sekunden angezeigt haben will, muss man einfach den hours abschnitt entfernen. ( Bitte achte dabei, das du die Minuten 60 wieder größer machst. ) Wichtig dabei ist, das du dann auch den.
1
 document.getElementById('c2').innerHTML = hours + ':' + minutes + ':' + seconds

Code veränderst. Wenn du die Stunden wegnimmst, musst du das hier auch machen
1
2
3
 <div align=center>
 <SPAN id=c2 style="FONT: bold 25px arial; COLOR: black;">;</SPAN><br>
</div>
0
Das gleiche, wenn du Minuten wegnimmst.
1
2
3
 <div align=center>
 <SPAN id=c2 style="FONT: bold 25px arial; COLOR: black;">;</SPAN><br>
</div>
1

Wenn du nur Sekunden haben willst, dann mach hours und minutes weg und mach es wieder größer von 60 auf 1000000. Kommt halt aufs Datum an.

Natürlich kann man nun noch ein bisschen mit rum basteln.

So das wars mit dem Tutorial. Wenn ihr Fragen habt, könnt ihr mir die gerne per PN schicken

Mitglieder-Kommentare

#7 von fexma
Ist es möglich mehrere Coundownzähler auf eine Seite einzubauen? Ein zweiter Countdown wird nicht angezeigt?! Smily NR:9
#6 von Caint
coole anleitung, danke
#5 von cplaygames
hihi, kann ja mal passieren Smily NR:2
#4 von chrisboy
upps ich sollte mal voher lesen, was ich schreibe. Da steht ja überall Counter anstadt Countdown Smily NR:1 nochmal Peinlich
#3 von cplaygames
egal, is trotzdem cool Smily NR:2

Nur registrierte Mitglieder könnten einen Kommentar schreiben.

Melde dich doch ganz einfach an, es ist kostenlos. :-)
©2019 ntmb.org Projekt - Impressum - AGB - Banner - Hauptseite - Service Center