| 

.NET C# Java Javascript Exception

5
Hallo,

habe gerade ein wohl eher kleines Problem. Und zwar möchte ich einen Countdown schreiben, der die Zeit vom Server holt und dann Clientseitig runterzählt. Nun habe ich leider noch nie so richtig viel mit JavaScript beziehungsweise JQuery gearbeitet. Den Anfang für den Countdown habe ich aber nun gemacht:

<html>   

<?php
$endTime = mktime(00, 00, 00, 01, 01, 2012);
$actTime = time();
$difTime = $endTime - $actTime;
$seconds = $difTime;
?>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){
window.setInterval(function() {
var timeCounter = $('div#timer').html();
var updateTime = eval(timeCounter)- eval(1);
$('div#timer').html(updateTime);
}, 1000);
});
</script>

<div id="timer"><?php echo $seconds ?></div>

</html>


Jetzt möchte ich mir die verbleibenden Sekunden in Tagen, Monaten, Minuten, Sekunden anzeigen lassen. Allerdings weiss ich gerade nicht so richtig wie ich das ganze mit setInterval auch für die Elemente realisiere. Hat eventuell jemand ein paar Tipps für mich?

Vielen Dank schonmal im Voraus!

Martin
News:
21.12.2011
MRae 259 1 7
MRae 259 1 7
4 Antworten
1
Moin

Der JavaScript counter könnte so aussehen:
var counterHandle;

function startCountdown() {
var currentValue = parseInt($('div#timer').html());
if (currentValue > 0) {
currentValue--;
$('div#timer').html(currentValue);
}
else {
window.clearInterval(counterHandle);
alert('Frohes neues!');
}
}

$(document).ready(function() {
counterHandle = window.setInterval('startCountdown()', 1000);
});


Demo: JsFiddle

Anmerkung: Ich merke mir in counterHandle den interval und lösche ihn, sobald ich ihn nicht länger benötige. Ich vermisse dies in deinem Beispielcode.

Update

Ich habe das Beispiel abgewandelt. Du kannst es nehmen um die Tage / Stunden / Minuten / Sekunden bis zu einem bestimmten Datum anzuzeigen.

var counterHandle;
// Datum merken, bis wo der countdown runterzählt
// Kann auch durch php gesetzt werden
var countdownDate = new Date(2012, 0, 1);

function startCountdown() {
var now = new Date();
if (now < countdownDate) {
var timeObj = getTimeObjBetween(now, countdownDate);
$('div#display').html(
timeObj.totalDays + ' - '
+ timeObj.hours + ':'
+ timeObj.minutes + ':'
+ timeObj.seconds);
}
else {
window.clearInterval(counterHandle);
alert('Frohes neues!');
}
}

function getTimeObjBetween(startDate, endDate) {
var ONE_SECOND = 1000;
var ONE_MINUTE = 60 * ONE_SECOND;
var ONE_HOUR = 60 * ONE_MINUTE;
var ONE_DAY = 24 * ONE_HOUR;

var resultObject = {totalDays:0, hours:0, minutes:0, seconds:0};

var timespan = endDate.getTime() - startDate.getTime();

var dayCount = timespan / ONE_DAY;
resultObject.totalDays = Math.floor(dayCount);

var hours = (dayCount - resultObject.totalDays) * 24;
resultObject.hours = Math.floor(hours);

var minutes = (hours - resultObject.hours) * 60;
resultObject.minutes = Math.floor(minutes);

var seconds = (minutes - resultObject.minutes) * 60;
resultObject.seconds = Math.floor(seconds);

return resultObject;
}

$(document).ready(function() {
counterHandle = window.setInterval('startCountdown()', 1000);
});


Demo: JsFiddle

Gruß
21.12.2011
Nicolai Schönberg 2,4k 2 9
0
Danke,

so richtig weiß ich aber trotzdem nicht weiter... Hast du eventuell noch nen paar mehr Anhaltspunkte?

Martin
21.12.2011
MRae 259 1 7
Ich glaub ich versteh die frage nicht. Du weißt wie viele Sekunden noch übrig sind und willst jetzt anzeigen wieviel Jahre / Tage / Stunden / Minuten das sind? Oder willst du das direkt in Php berechnen?
Nicolai Schönberg 21.12.2011
0
Nein,

php möchte ich nur für den Timestamp verwenden, damit alle die selbe Zeit haben. Der Rest soll dann wirklich clientseitig erfolgen. Das Ganze soll lediglich ein Timer für ein fiktives Gewinnspiel auf Facebook werden.

Anzeigeformat

DD:HH:MM:SS

Evtl. ist das ganze ja auch ohne den Timestamp lösbar? Hoffe ich konnte es jetzt ein bisschen besser rüberbringen?
21.12.2011
MRae 259 1 7
Einfach die Sekunden hochrechnen? Gruß
Nicolai Schönberg 21.12.2011
Ich habe meiner Antwort ein Update hinzugefügt - Ich hoffe es hilft dir. Hatte gestern keine Zeit mehr. Grüße
Nicolai Schönberg 22.12.2011
0
Mit PHP-Serverzeit könnte das ganze ja wie unten aufgeführt aussehen. Jetzt zählt natürlich die Zeit nicht fortlaufend runter. Nehme ich
var now = new Date(<?php date("Y, n-1, j, G, i, s"); ?>);
mit in die Methode
startCountdown()
, dann hab ich ja jede Sekunde eine Serveranfrage. Soll ja auch nicht sein. Die Zeit so also per JavaScript heruntergezählt werden. Wie könnte man denn das ohne großen Aufwand lösen?

<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript">
var counterHandle;
var countdownDate = new Date(2012, 0, 14, 12, 00, 00);
var now = new Date(<?php date("Y, n-1, j, G, i, s"); ?>);

function startCountdown() {

if (now < countdownDate) {
var timeObj = getTimeObjBetween(now, countdownDate);
$('div#display').html(
timeObj.totalDays + 'T '
+ timeObj.hours + ':'
+ timeObj.minutes + ':'
+ timeObj.seconds);
}
else {
window.clearInterval(counterHandle);
}
}

function getTimeObjBetween(startDate, endDate) {
var ONE_SECOND = 1000;
var ONE_MINUTE = 60 * ONE_SECOND;
var ONE_HOUR = 60 * ONE_MINUTE;
var ONE_DAY = 24 * ONE_HOUR;

var resultObject = {totalDays:0, hours:0, minutes:0, seconds:0};

var timespan = endDate.getTime() - startDate.getTime();

var dayCount = timespan / ONE_DAY;
resultObject.totalDays = Math.floor(dayCount);

var hours = (dayCount - resultObject.totalDays) * 24;
resultObject.hours = Math.floor(hours);

var minutes = (hours - resultObject.hours) * 60;
resultObject.minutes = Math.floor(minutes);

var seconds = (minutes - resultObject.minutes) * 60;
resultObject.seconds = Math.floor(seconds);

return resultObject;
}

$(document).ready(function() {
counterHandle = window.setInterval('startCountdown()', 1000);
});
</script>

<div id="display"></div>
</html>


Wäre nochmal für Tipps dankbar!
01.01.2012
MRae 259 1 7
MRae 259 1 7
Warum setzt du 'now' nicht einfach im JavaScript so wie ich es in meinem Beispiel gemacht habe? Dann wird es jedes mal von JavaScript gesetzt.
Nicolai Schönberg 02.01.2012
Weil dann ja nicht die Serverzeit verwendet wird?!? Somit könnte ja jemand der eine falsche Uhrzeit konfiguriert hat, ne andere Restzeit haben. Oder?
MRae 02.01.2012
Joar - Das ist aber gar nicht mal das Problem in JavaScript. Auf der JavaScript Seite bekommst du immer die Zeit des Rechners der die Seite aufruft. Das bedeutet auch, das die Zeit aus einer anderen Zeitzone kommen kann (Was auch OK ist). Es sollte nicht dein Problem sein, wenn jemand seine Uhrzeit falsch eingestellt hat. Du musst den client und den server auf die gleiche Zeit bringen, am einfachsten geht das mit UTC (Koordinierte Weltzeit). Rechnen also mit UTC Wert, für die Anzeige wieder umwandeln. Hier noch ein link: http://stackoverflow.com/questions/3714443/php-return-js-utc-date-format
Nicolai Schönberg 03.01.2012

Stelle deine Javascript-Frage jetzt!