Vergangene Zeit ermitteln und dementsprechend Farbe ändern

[blabla333]

Ich möchte einen Minutenzähler einrichten. Dabei soll die Zeit von einem bestimmten Wert an (ist als timestamp hinterlegt) hochgezählt werden. Anhand dieses Wertes soll dann die Farbe eines Elementes definiert werden: Sind 10 Minuten seit dem vorgegebenen Wert vergangen, so wird das Element grün angezeigt, nach 60 Minuten gelb und nach 120 Minuten rot.

Ich weiß nicht, ob das möglich ist, aber richtig schön wäre es, wenn sich die Farbe dynamisch und nicht abrupt ändert, d.h. mit Zunahme der Minuten geht die Farbe von grün in gelb und dann rot über. Aber wie gesagt, ich weiß nicht, ob das überhaupt möglich ist.

 

[omoxen]

das sollte doch möglich sein. Das kannst du sogar mit CSS machen (keyframes und transition duration).
Mit JS nimmst du einfach die rgb-Werte der Farben und passt jeden Wert nach und nach dem Endwert an. z.B.:

Startwert rgb(100, 0 0) - Endwert rgb(200, 100, 0), Zeit: 600000ms

Mit jedem Wert (r, g, b) machst du dann folgendes (hier r-Wert):
Ende - Anfang = 200 - 100 = 100
100 * vergangeneZeitInMs / Zeit = 100 * 60000 / 600000 = 100 * 0.1 = 10;
Anfang + 10 = 110;
...

 

[blabla333]

Danke.

Aber wie ermittel ich die vergangenen Minuten? Also den Zähler als solchen?

Edit:

function getTime(){
 var startzeit = 1369610769;
 var zeit = new Date();
 var aktuellezeit = Math.floor(Date.parse(zeit.toGMTString())/1000);
 vergangene_zeit = aktuellezeit - startzeit;
 minuten = Math.floor(vergangene_zeit/60);
 //lngMinuten = (lngMinuten < 10) ? ("0"+lngMinuten) : lngMinuten;
 $(".wartezeit").text(minuten);
 window.setTimeout("getTime()", 60000);
}

 

[Sempervivum]

wenn sich die Farbe dynamisch und nicht abrupt ändert

Das geht am einfachsten mit jQuery. Schau dir mal die Funktion animate() an. Wenn Du Farben animieren willst, musst Du zusätzlich jQuery UI einbinden.