Link to home
Start Free TrialLog in
Avatar of ChrisAndrews
ChrisAndrews

asked on

javascript clock?

Hi,

I need a javascript clock where I can put the time and date into the code (example 3:00pm, 6-28-99)(the actual gmt time and date will be timestamped from the server, I can set the format for the date differently or set the time to 24 hr), offset it by a number of minutes to get the correct timezone (example -60)(this will be pulled from a database using php and could be any value from -720 to +720) and output a running clock with the correct time (using am/pm) and date.

Can anyone here either create or know of where such an animal is?  Or is this to much to ask from from javascript and I need to go to java?

Chris
Avatar of ChrisAndrews
ChrisAndrews

ASKER

Edited text of question.
Edited text of question.
Not now (It's late hours in Denmark), but there's a good running clock on http://www.nymans.dk/clock/after.htm.

For inspiration purposes only

:)

JustinCase
Yes JustinCase, but I think ChrisAndrews is looking for an clock independent of the client's hour, His server sets the Javascript clock and then, when the script is loaded at client side, the offset'll be applied.

ChrisAndrews:
Is that what you are looking for?

Correct, I'd like to have it so that the server sets the start time (gmt) in the script with a timestamp.  That will make it so that the time is correct whether the client computer has the correct time set or not.

Then in the script I need to be able to indicate the offset in minutes.
Avatar of Michel Plungjan
All you need is a clock that does not call the Date() function each second.

The danish clock can easily be modified to call
dato = new Date(phpyear,phpmonth,phpday,phphourmphpminute,phpsecond)
currentSecs = dato.getTime();


and in the clock part do a
currentSecs = currentSecs + 60000;
dato2 = new Date(currentSecs);

Michel
Sorry, missed a comma:
dato = new Date(phpyear,phpmonth,phpday,phphour,phpminute,phpsecond)

Michel

Thank you for your help with this.  I found a clock script that I would like to use, is the script below something that can be adapted to use a timestamp in the script as a 'start time'?

For example, instead of it pulling the time and date from the client browser, I would like to use a timestamp that indicates that the current time and date is  "06-29-1999 2:35pm"  and for it to run from that point on keeping time.  I can put the date and time in any format necessary for the javascript to work.

If you don't mind, since I am not very javascript literate, please give examples instead of explaining what I need to do.... you could just take this script and write in a start time and date where it would need to go.  I also metioned in the questiong that I needed a way to adjust timezone, I found a way I can do that with the timestamp so don't worry about that.

Script below, thanks again,  Chris




<HTML>
 
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from old browsers

var timerID = null
var timerRunning = false

function stopclock (){
        if(timerRunning){
                clearTimeout(timerID);
                timerRunning = false
        }
}

function showtime () {
        var now = new Date();
        year = new String(now.getYear());
        month = new String(now.getMonth() + 1);
        date = new String(now.getDate());
        hours = new String(now.getHours());
        minutes = new String(now.getMinutes());
        seconds = new String(now.getSeconds());
       
        document.ampm.src = (hours < 12) ? "dgam.gif" : "dgpm.gif";
        hours = (hours > 12) ? (hours - 12) + "" : hours + ""
        hours = (hours == "0") ? "12" : hours
        document.day1.src = (date < 10) ? "dg0.gif" : "dg" + date.charAt(0) + ".gif";
        document.day2.src = (date < 10) ? "dg" + date + ".gif" : "dg" + date.charAt(1) + ".gif";
        document.month1.src = (month < 10) ? "space.gif" : "dg" + month.charAt(0) + ".gif";
        document.month2.src = (month < 10) ? "dg" + month + ".gif" : "dg" + month.charAt(1) + ".gif";
        document.year1.src = (year < 10) ? "dg0.gif" : "dg" + year.charAt(0) + ".gif";
        document.year2.src = (year < 10) ? "dg" + year + ".gif" : "dg" + year.charAt(1) + ".gif";
        document.hour1.src = (hours < 10) ? "space.gif" : "dg" + hours.charAt(0) + ".gif";
        document.hour2.src = (hours < 10) ? "dg" + hours + ".gif" : "dg" + hours.charAt(1) + ".gif";
        document.colon.src = (seconds % 2) ? "dgon.gif" : "dgoff.gif";
        document.minute1.src = (minutes < 10) ? "dg0.gif" : "dg" + minutes.charAt(0) + ".gif";
        document.minute2.src = (minutes < 10) ? "dg" + minutes + ".gif" : "dg" + minutes.charAt(1) + ".gif";

        timerID = setTimeout("showtime()",1000);
        timerRunning = true
}

function startclock () {
        stopclock();
        showtime()
}
// -->
</SCRIPT>

</HEAD>

<BODY ONLOAD="startclock();">
<IMG SRC="http://www.andrews.com/wwcimg/space.gif" HEIGHT="21" WIDTH="16"
 NAME="month1" BORDER="0"><IMG SRC="http://www.andrews.com/wwcimg/space.gif"
HEIGHT="21" WIDTH="16" NAME="month2" BORDER="0"><IMG
SRC="http://www.andrews.com/wwcimg/dg-.gif" HEIGHT="21" WIDTH="16"
BORDER="0"><IMG SRC="http://www.andrews.com/wwcimg/space.gif"
HEIGHT="21" WIDTH="16" NAME="day1" BORDER="0"><IMG
SRC="http://www.andrews.com/wwcimg/space.gif" HEIGHT="21" WIDTH="16"
NAME="day2" BORDER="0"><IMG SRC="http://www.andrews.com/wwcimg/dg-.gif"
HEIGHT="21" WIDTH="16" BORDER="0"><IMG
SRC="http://www.andrews.com/wwcimg/space.gif" HEIGHT="21" WIDTH="16"
NAME="year1" BORDER="0"><IMG SRC="http://www.andrews.com/wwcimg/space.gif"
HEIGHT="21" WIDTH="16" NAME="year2" BORDER="0">
<IMG SRC="http://www.andrews.com/wwcimg/space.gif" HEIGHT="21" WIDTH="16"
 BORDER="0"><IMG SRC="http://www.andrews.com/wwcimg/space.gif"
HEIGHT="21" WIDTH="16" NAME="hour1" BORDER="0"><IMG
SRC="http://www.andrews.com/wwcimg/space.gif" HEIGHT="21" WIDTH="16"
NAME="hour2" BORDER="0"><IMG
SRC="http://www.andrews.com/wwcimg/dgc.gif" HEIGHT="21" WIDTH="10" NAME="colon"
BORDER="0"><IMG SRC="http://www.andrews.com/wwcimg/space.gif"
HEIGHT="21" WIDTH="16" NAME="minute1" BORDER="0"><IMG
SRC="http://www.andrews.com/wwcimg/space.gif" HEIGHT="21" WIDTH="16"
NAME="minute2" BORDER="0"><IMG SRC="http://www.andrews.com/wwcimg/space.gif"
HEIGHT="21" WIDTH="16" NAME="ampm" BORDER="0">
</BODY>
</HTML>
The now in

function showtime () {
               var now = new Date();

is the one that gets the client time. - every time the script is called, in this case once a second (1000 miliseconds...)

If you take the now outside the function and give it a php time - here the values must be comma delimited so it ends up as new Date(1999,5,29,23,59,00):

var now = new Date(phpyear,phpmonth-1,phpday,phphour,phpminute,phpsecond-1);

function showtime () {
   now= new Date(now.getTime()+1000); /* get a new date object one second further */
   
That should be all you need to do... I am sorry I have no time to test it right now. I am off to bed...
Michel



Yea, that did the trick :)

Thank you,

Chris
ASKER CERTIFIED SOLUTION
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Glad to be of service

Michel