Manipulating a JavaScript Clock’s Speed Inquiry [Archive]

View Full Version : Manipulating a JavaScript Clock’s Speed Inquiry

spookycharles

02-23-2006, 05:20 AM

Hello All,

I need a clock for the use in an RPG game site that instead of displaying ‘real time’ would display the game’s date and time. I’m assuming that this is possible using JavaScript but have not yet been able to find an example of one and don’t yet know how to write the coding well enough myself to alter the variables of a standard JavaScript clock for this purpose.

Below is the URL for the page that I want the clock for. Currently it has the static date and time that I obviously have to perpetually update:
http://dreamravendesigns.com/Hellmouth_Alliance/gamestory.html

What I want is a constantly running clock (that doesn’t require refreshing the page) that displays the full date (game date, not a true date) and the hour, minutes and seconds (seconds aren't actually needed for anything outside of amusement value) in the adjusted game time speed.

The game runs 1 hour of game time to a week of playtime (real time), so essentially I would want the clock ticking at a pace showing 1 game hour to every 168 real hours, but I can work the math on it if anyone could simply offer a touch of assistance as far as what variables I ought to be playing with to make this happen.

Assistance of any kind would be so greatly appreciated.

Thanks,
Amanda

Kor

02-23-2006, 11:26 AM

as a general approach. You can not manipulate the "javascript clock" as in fact it is the computer's clock, javascript only call it and display the result. But you can use the computer's clock.

First, You must build a pseudo-clock, and change the minutes using a setTimeout mrthod , instruct to turn back to 0 after 59, same time increment with a unit the hours. Now, when hours reach 24, add a day and use the new Date() object to calculate the correct day, return the corect date,month,year and go on the same manner.

spookycharles

02-23-2006, 11:51 PM

Thank you very much. I was afraid that might indeed be the case, but at least that certainly explains why my success has so far been nil and lets me know that I need to try a different route. I’ll instead play around with described pseudo-clock construction, that's a very good idea.

Thanks again,
Amanda

Kor

02-24-2006, 11:41 AM

In fact it is not intricate. Here's an example of a pseudo-clock which runs 60X times faster than a normal one (1 minute/second). The date displayed is a real and a valid date. The code is based on the fact that, nomatter the over-valid input (for instance 30 of february, or 61 minutes...or... ), the object Date() is able to autocorrect and returns the corect date.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">

</style>
<script type="text/javascript">
//Genuine code by Corneliu Lucian "Kor" RUSU, corneliulucian@apropo.ro
var d = [2010,11,31,23,55];//[year,month(Jan=0),date,hour,minutes]
var delay=1000;//miliseconds
var startC;
function writeD(){
var s=document.getElementById('myclock').getElementsByTagName('span');
var myd=new Date(d[0],d[1],d[2],d[3],d[4]);//sets the date new object
d=[];
d[0]=myd.getFullYear();d[1]=myd.getMonth();d[2]=myd.getDate();d[3]=myd.getHours();d[4]=myd.getMinutes();//returns the correct data
for(var i=0;i<d.length;i++){//writes the result adding '0' if value<10
if(i==1){s[i].firstChild.data=((d[i]+1)<10)?'0'+(d[i]+1):d[i]+1;}//the month +1, to display the common notation
else{s[i].firstChild.data=(d[i]<10)?'0'+d[i]:d[i];}
}
}
function startClock(){
d[4]++;//increments the minutes (1 minute/second this case)
writeD();
startC=setTimeout('startClock()',delay);
}
onload = writeD;
</script>
</head>
<body>
<div id="myclock">
Year <span> </span>
<br>
Month <span> </span>
<br>
Date <span> </span>
<br>
Hour <span> </span>
<br>
Min <span> </span>
</div>
<br>
<br>
<input type="button" value="START clock" onclick="startClock()"><input type="button" value="STOP clock" onclick="clearTimeout(startC)">
</body>
</html>