Page 1 of 1

I am really stuck. (JavaScript)

PostPosted: Thu Jan 29, 2009 6:56 pm
by Zkunxen
I'm trying to create a JavaScript Standard clock (1AM to 12PM, 1PM to 12AM, not 0 to 23 hundred hours)
I've got the code set up, but it isn't working. here's the code:
Code: Select all
function Clockf()
{
var t=new Date();
var clock=toStandard(t.getHours()) + ":" + fillSpace(t.getMinutes()) + ":" + fillSpace(t.getSeconds()) + var mer;
setTimeout("Clock()",1000);
document.getElementById("clock").innerHTML=clock;
}
function fillSpace(value)
{
return(value>9) ? "" + value : "0" + value;
}
function toStandard(value)
{
return(value>9) ? "" + value : "0" + value;
if(value==0) { value+12; mer="AM" } else if(value<12) { mer="AM" } else { value-12; mer="PM"; }
}

and the page accessing it (as a test page):
Code: Select all
<html>
<head><script src="behaviors/clock.js"></script>
</head>
<body onLoad="Clockf()">
<script src="behaviors/greeting.js"></script>
<div id="clock"></div>
</body>
</html>

The other script in here loads properly, but the clock part never shows up. Anyone know what I'm doing wrong, or how I could fix it?
I originally had the last JS function as:
Code: Select all
function toStandard(value)
{
return(value>9) ? "" + value : "0" + value;
return(value==0) ? value+12 && mer="AM"  : (value<12) ? mer="AM" :  value-12 && mer="PM";
}

Re: I am really stuck. (JavaScript)

PostPosted: Thu Jan 29, 2009 9:05 pm
by DenyTheTruth
You're making it too difficult. Follow the steps I've provided for a more simple solution.

Code: Select all
function Clockf()
{
var t=new Date();
var clock=toStandard(t.getHours()) + ":" + fillSpace(t.getMinutes()) + ":" + fillSpace(t.getSeconds()) + var mer;
setTimeout("Clock()",1000);
document.getElementById("clock").innerHTML=clock;
}



Overkill.

Code: Select all

  var currentTime = new Date ( );

  var currentHours = currentTime.getHours ( );
  var currentMinutes = currentTime.getMinutes ( );
  var currentSeconds = currentTime.getSeconds ( );



That works just as well.

Code: Select all

function fillSpace(value)
{
return(value>9) ? "" + value : "0" + value;
}
function toStandard(value)
{
return(value>9) ? "" + value : "0" + value;
if(value==0) { value+12; mer="AM" } else if(value<12) { mer="AM" } else { value-12; mer="PM"; }
}



Instead of that, try this:

Code: Select all

  // Pad the minutes and seconds with leading zeros, if required
  currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
  currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;

  // Choose either "AM" or "PM" as appropriate
  var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";

  // Convert the hours component to 12-hour format if needed
  currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;

  // Convert an hours component of "0" to "12"
  currentHours = ( currentHours == 0 ) ? 12 : currentHours;



and the page accessing it (as a test page):
Code: Select all
<html>
<head><script src="behaviors/clock.js"></script>
</head>
<body onLoad="Clockf()">
<script src="behaviors/greeting.js"></script>
<div id="clock"></div>
</body>
</html>



Just put it in the page.

Reference - Click for a working verison.

Re: I am really stuck. (JavaScript)

PostPosted: Fri Jan 30, 2009 5:37 am
by Zkunxen
thanks. comparing the codes, mine is overkill.
I was using this site for a reference, and it's set up in a slightly confusing way...

it works now. the final code ended up as:
Code: Select all
function Clockf()
{
var D=new Date();
var H=D.getHours();
var M=D.getMinutes();
var S=D.getSeconds();
var mer=(H >= 12) ? "AM" : "PM";
M=(M < 10 ? "0" : "") + M;
S=(S < 10 ? "0" : "") + S;
H=(H > 12) ? H-12 : H;
H=(H==0) ? 12 : H;
var clock=H + ":" + M + ":" + S + " " + mer;
document.getElementById("clock").innerHTML=clock;
setTimeout("Clockf()",1000);
}

Code: Select all
<html>
<head><script src="behaviors/clock2.js"></script>
</head>
<body onLoad="Clockf()">
<script src="behaviors/greeting.js"></script>
<div id="clock"></div>
</body>
</html>

I had wanted it as a dynamic clock, so it updates automatically with the time.
also, I like assigning my own variables. if I'm going to copy and paste it, I might as well not use the script anyway (that's why I learned JavaScript) and if I have to type out currentHours I might as well just type Date.getHours every time.
only a bit longer.

so, thanks for that. I was getting confused by my code...

Re: I am really stuck. (JavaScript)

PostPosted: Fri Jan 30, 2009 10:03 pm
by DenyTheTruth
Using your own variables is a good practice. Also, use descriptive variables (as you apparently are doing). I wasn't suggesting you take the code I posted, but just hoped that it showed you the correct way.

If you went to the side you'd have seen that the clock automatically updates like you're wanting. Hope everything is working now.

Re: I am really stuck. (JavaScript)

PostPosted: Sat Jan 31, 2009 4:32 pm
by Zkunxen
the site says you need to add a setInterval() function in the body tag to update it. I prefer to add a setTimeout() function in my function.
I looked through all the codes you had posted, and none of them contained anything that would update it.
I did get it to work, though.

Re: I am really stuck. (JavaScript)

PostPosted: Sat Jan 31, 2009 6:31 pm
by DenyTheTruth
You're right. Nothing I posted would indicate it would update.

However, if you had gone to the site* like I said, you'd have found this:

Updating Clock

* - I accidentally typed side instead of site in my last post.

Re: I am really stuck. (JavaScript)

PostPosted: Sat Jan 31, 2009 10:11 pm
by Zkunxen
I did check the site, just missed that link...
I have another question. does the setTimeout function work off the computer's clock? I mean, if I would set a timeout of 60000 (1 minute) would it start exactly 1 minute after the page loads, or would it sync with the computer clock, so the event triggered by the timeout would coincide perfectly with the user's computer's clock?