Hoch und runter zählen, einfache Scripte?

Super-Vegeta · 8. Oktober 2010, 14:07

So, ich habe auch mal wieder ein Problem. Ich Suche ein einfaches Script um eine Woche runter zu zählen. Bisher habe ich dazu das hier gefunden:

Quellcode

Noch
<script type="text/javascript">
// Countdown
var datum = new Date("October 11, 2010 00:00:00 GMT");
var d = new Date();
var count = Math.floor((datum.getTime() - d.getTime()) / 1000);
count = Math.floor(count / (60*60*24));
document.write(count);
</script>
Tag(e) bis X</center>

Allerdings würde ich zumindest neben der Tagesangabe noch gern die Stunden anzeigen lassen. Ich hab zwar ein paar Java Scripte gefunden, schlussendlich funktionierte davon aber nichts wirklich.

Ein ähnliches Script, das dann die Zeit hoch zählt, benötigte ich zu dem auch noch. Es soll einfach ab einen Startdatum beginnen mindestens Jahr, Monat und Tag, am besten auch noch Stunde zählen.

Wenn jemand da was passendes kennt, wäre ich recht froh. Such schon seit Monaten was passendes, aber irgendwie findet man kaum gute Scripte und wenn es mal brauchbar aussieht, läuft es nicht. -.-
Selbst programmieren liegt mir bei solchen Dingen leider nicht, sonst hätte ich schon selbst versucht soetwas zu basteln.

Vegeta

Retr0Virus · 8. Oktober 2010, 15:45

Deine Scriptgrundlage bietet ja schon alles an was du dafür brauchst.
Herunterzählen:

Quellcode

<p>Noch
<script type="text/javascript">
// Countdown
var datum = new Date("October 10, 2010 00:00:00");
var d = new Date();
var count = Math.floor((datum.getTime() - d.getTime()) / 1000);
var countStd = Math.round(count / (60*60)) % 24; // Stunden
count = Math.floor(count / (60*60*24)); // Tage
document.write(count);
</script>
Tag(e) und ungefähr
<script type="text/javascript">
document.write(countStd);
</script>
Stunde(n) bis X</p>

Alles anzeigen

Hochzählen sollte mit demselben Kode funktionieren - du musst nur bei der Variable count d.getTime() - datum.getTime() abziehen, statt andersherum.

Super-Vegeta · 8. Oktober 2010, 18:34

Ah, endlich, das runter zählen läuft jetzt, super.

Aber das hoch zählen ist mir noch nicht ganz klar.

Quellcode

<p>Noch
<script type="text/javascript">
// Countdown
var datum = new Date("October 10, 2010 00:00:00");
var d = new Date();
var count = Math.floor((datum.getTime() - d.getTime()) / 1000);
---> var countStd = Math.round(count / (60*60)) % 24; // Stunden <----
count = Math.floor(count / (60*60*24)); // Tage
document.write(count);
</script>
Tag(e) und ungefähr
------><script type="text/javascript">
document.write(countStd); <----
</script>
Stunde(n) bis X</p>

Alles anzeigen

Das ist ja nun neu (mit Pfeilen markiert). Wie ist denn die Bezeichnung für Jahr und Monat?

Es soll ja später angezeigt werden:

Dies und jenes exestiert schon:

x Jahre x Monate x Tage und x Stunden.

Hab auch schon versucht das umzudrehen um es wenigstens schon zum laufen zu bringen mit:

Quellcode

var count = Math.floor(d.getTime() - (datum.getTime()) / 1000);

Was aber eher schlecht als recht lief, hab dann das Datum zur Kontrolle ob das Script richtig rechnet auf den ersten Oktober eingestellt, laut dem ist dieser aber nun über 14 Millionen Tage her. ^^'

Hatte bisher wenig mit solchen Sachen zu tun, daher ist für mich größeres selbst ein oder umbauen eher ein Ratespiel.

Vegeta

Retr0Virus · 8. Oktober 2010, 19:12

Also das Hochzählen sollte in der Tat so einfach sein, wie du es beschrieben hast - du hast bei dir nur eine Klammer vergessen (guck dir nochmal die Originalzeile an). Das mit Jahren/Monaten habe ich überlesen.
Der Trick ist ja, dass man als Datum einen Millisekundenwert bekommt und diesen dann in Sekunde/Minute/Stunde/Tag umrechnen kann.
Am Anfang teilt das Skript den Wert durch 1000 und rundet ab => Sekunden.
Diese werden durch 60 geteilt => Minuten
Diese werden durch 60 geteilt => Stunden
Diese werden durch 24 geteilt => Tage
Problem bei Jahren/Monaten ist, dass jeder Monat unterschiedliche Taganzahlen hat und jedes Jahr auch unterschiedlich viele Tage (Schaltjahr).
Man kann natürlich grob rechnen und sagen 1 Monat = 30 Tage und 1 Jahr = 365 Tage. Oder das ganze komplizierter machen und alles richtig ausrechnen.

Super-Vegeta · 8. Oktober 2010, 20:09

Na ja, habe mittlerweile soweit das hier erzeugt, da ich noch ein Script fand das Daten ergänzte. Problem bei diesem ist nur noch, das die Darstellung in

7,28,2 endet.

Für die Darstellung brauch ich aber die Möglichkeit es zu trennen, also

7 [einiger Abstand] 28 [einiger Abstand] 2 da ich im Hintergrund dazu passende Fächer habe, hinzu kommt, das ich die Farbe noch ändern muss. Kannst du mir da noch einen tipp geben? Script ist bisher funktionstüchtig aber das passt noch nicht. Wenn das Ding sich dann leicht verrechnet ist OK, es soll nur nicht komplett abweichen, genau wäre zwar am besten, aber dafür das alles rein zu setzen reicht mein Wissen bei weitem nicht.

Quellcode

<script type="text/javascript">
// <![CDATA[
function countUp() {
var jahr=2010, monat=2, tag=10, stunde=18, minute=00; // Jahrestag hier angeben
var akt=new Date();
var j=akt.getFullYear()-jahr;
var m=akt.getMonth()+1-monat;
var t=akt.getDate()-tag;
var s=akt.getHours()-stunde;
var u=akt.getMinutes()-minute;
if(u<0) {s--; u=60+u;}
if(s<0) {t--; s=24+s;}
if(t<0) {m--; t=new Date(akt.getFullYear(),akt.getMonth(),0).getDate()+t;}
if(m<0) {j--; m=12+m;}
var z="";
if(j) {z = j + ""; if(j>1) z += "";}
if(m) {if(z) z += ","; z += (m + ""); if(m>1) z += "";}
if(t) {if(z) z += ", "; z += (t + ""); if(t>1) z += "";}
if(s) {if(z) z += ", "; z += (s + ""); if(s>1) z += "";}
document.write(z);
}
// ]]>
</script>
<div>
<strong><script type="text/javascript">countUp()</script></strong>
<noscript><div>dem 10.02.2010 18:00 Uhr</div></noscript></div>

Alles anzeigen

Edit:

Alles hin bekommen, nur die Farbe der Werte fehlt noch, wo muss man den <font color="blue"> </font> einsetzen, dann hab ichs ^^'

Vegeta

Retr0Virus · 9. Oktober 2010, 07:27

Variable z wird ausgegeben.
D.h. wenn alles zusammen eine Farbe bekommen soll, dann kannst du einfach z erweitern:
Vorher:

Quellcode

...
document.write(z);
...

Nachher:

Quellcode

...
z = "<font color=\"blue\"> + z + "</font>";
document.write(z);
...

Wenn jeder Buchstabe einzeln soll, musst du nach var z="" die j,m,t,s,u Variablen so erweitern wie du es haben möchtest.

Super-Vegeta · 9. Oktober 2010, 13:55

Quellcode

...
var z="                                             ";
if(j) {z = j + "                  "; if(j>1) z += "";}
if(m) {if(z) z += "    "; z += (m + ""); if(m>1) z += "";}
if(t) {if(z) z += "                "; z += (t + ""); if(t>1) z += "";}
if(s) {if(z) z += "                "; z += (s + ""); if(s>1) z += "";}
document.write(z);
...

Hab mal versucht die Zeile so dazu zu setzen, brachte aber nichts, wie muss das hier dann eingesetzt werden? Hab es versucht einzubauen, endete aber immer darin das ich schlussendlich gar nichts mehr angezeigt bekam. Musste wegen der Abstände leider einige &nbsp rein hauen, was das Ding nicht wirklich übersichtlicher macht. ^^'

Vegeta

Retr0Virus · 9. Oktober 2010, 18:21

Im Prinzip schreibst du dann nach dem var z="......." für die Jahre/Monate/... Variable jeweils einen neuen Wert z.B.

Quellcode

var z="    ";
j = "    <font ...>" + j + "</font>";
m = "    <font ...>" + m + "</font>";
if(j) { ..... }
if(m) { .... }

Super-Vegeta · 10. Oktober 2010, 20:22

Hab das mit der Farbe jetzt mit dem BG gemacht, allerdings hab ich seit heute ein anderes Problem. Das Script lief, alles war OK, doch nun ist, warum auch immer, die Stunden angabe nicht sichtbar und änder ich die Uhrzeit verschwindet auch noch die Tagesangabe.

HTML-Quellcode

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title></title>
</head>
<body>
<center><table style="text-align: left; background-repeat: no-repeat; width: 100%;" background="modules/powerlevel/Existenz3.png" border="0" cellpadding="2" cellspacing="2"></center>
<tbody>
<tr>
<td>
<br>
<br>
<br>
<h3> <script type="text/javascript">
// <![CDATA[
function countUp() {
var jahr=2010, monat=2, tag=10, stunde=18, minute=00; // Jahrestag hier angeben
var akt=new Date();
var j=akt.getFullYear()-jahr;
var m=akt.getMonth()+1-monat;
var t=akt.getDate()-tag;
var s=akt.getHours()-stunde;
var u=akt.getMinutes()-minute;
if(u<0) {s--; u=60+u;}
if(s<0) {t--; s=24+s;}
if(t<0) {m--; t=new Date(akt.getFullYear(),akt.getMonth(),0).getDate()+t;}
if(m<0) {j--; m=12+m;}
var z="                                             ";
if(j) {z = j + "                  "; if(j>1) z += "";}
if(m) {if(z) z += "    "; z += (m + ""); if(m>1) z += "";}
if(t) {if(z) z += "                "; z += (t + ""); if(t>1) z += "";}
if(s) {if(z) z += "                "; z += (s + ""); if(s>1) z += "";}
document.write(z);
}
// ]]>
</script><h3>
<div>
<strong><script type="text/javascript">countUp()</script></strong>
<noscript><div>dem 10.02.2010 18:00 Uhr</div></noscript></div>
<br>
<br>
<br>
</tbody>
</table>
</body>
</html>

Alles anzeigen

Da ich nichts verändert hab, ist mir schleierhaft was mitmal nicht mehr geht.

Vorher Stand da Monat, Tag, Stunde nun nur noch Monat und Tag und wenn ich z.B. 17.00 Uhr eintrage, kommt nur noch die Monats Angabe.

Edit:
Scheint noch zu gehen, allerdings rutscht die Stundenangabe in die Tagesangabe wenn es 0 Stunden sind. Kann man da noch irgendwo einbauen das die 0 angezeigt wird?

Also statt 8 Monate und 3 Stunden
dann
8 Monate, 0 Tage und 3 Stunden

Vegeta

Hoch und runter zählen, einfache Scripte?

Hoch und runter zählen, einfache Scripte?

Quellcode

RE: Hoch und runter zählen, einfache Scripte?

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

HTML-Quellcode

Teilen