I am really stuck. (JavaScript)

I am really stuck. (JavaScript)

Post by Zkunxen on Thu Jan 29, 2009 6:56 pm
([msg=17067]see I am really stuck. (JavaScript)[/msg])

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";
}
Zkunxen
New User
New User
 
Posts: 12
Joined: Thu May 01, 2008 2:25 pm
Blog: View Blog (0)


Re: I am really stuck. (JavaScript)

Post by DenyTheTruth on Thu Jan 29, 2009 9:05 pm
([msg=17072]see Re: I am really stuck. (JavaScript)[/msg])

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.
~ Parruption in Coradise ~
User avatar
DenyTheTruth
Poster
Poster
 
Posts: 139
Joined: Wed Jan 07, 2009 9:54 pm
Blog: View Blog (0)


Re: I am really stuck. (JavaScript)

Post by Zkunxen on Fri Jan 30, 2009 5:37 am
([msg=17092]see Re: I am really stuck. (JavaScript)[/msg])

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...
Zkunxen
New User
New User
 
Posts: 12
Joined: Thu May 01, 2008 2:25 pm
Blog: View Blog (0)


Re: I am really stuck. (JavaScript)

Post by DenyTheTruth on Fri Jan 30, 2009 10:03 pm
([msg=17139]see Re: I am really stuck. (JavaScript)[/msg])

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.
~ Parruption in Coradise ~
User avatar
DenyTheTruth
Poster
Poster
 
Posts: 139
Joined: Wed Jan 07, 2009 9:54 pm
Blog: View Blog (0)


Re: I am really stuck. (JavaScript)

Post by Zkunxen on Sat Jan 31, 2009 4:32 pm
([msg=17169]see Re: I am really stuck. (JavaScript)[/msg])

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.
Zkunxen
New User
New User
 
Posts: 12
Joined: Thu May 01, 2008 2:25 pm
Blog: View Blog (0)


Re: I am really stuck. (JavaScript)

Post by DenyTheTruth on Sat Jan 31, 2009 6:31 pm
([msg=17174]see Re: I am really stuck. (JavaScript)[/msg])

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.
~ Parruption in Coradise ~
User avatar
DenyTheTruth
Poster
Poster
 
Posts: 139
Joined: Wed Jan 07, 2009 9:54 pm
Blog: View Blog (0)


Re: I am really stuck. (JavaScript)

Post by Zkunxen on Sat Jan 31, 2009 10:11 pm
([msg=17184]see Re: I am really stuck. (JavaScript)[/msg])

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?
Zkunxen
New User
New User
 
Posts: 12
Joined: Thu May 01, 2008 2:25 pm
Blog: View Blog (0)



Return to Web Design

Who is online

Users browsing this forum: No registered users and 0 guests