Little javascript help

Show off new creations, get help, or just chat about all aspects of web development and design.

Little javascript help

Postby caseyw on Wed Dec 16, 2009 10:19 pm

I'm doing some stuff and I one thing I need is a javascript timer that displays the time and updates itself without having to refresh the page. I know pretty much everything to get the time running but I have no idea of how to get it to update itself.

Is there a tutorial or can someone help me out?
User avatar
caseyw
Regular
Regular
 
Joined: Sun Feb 01, 2009 2:02 am

Re: Little javascript help

Postby Blink on Wed Dec 16, 2009 10:55 pm

I don't mean to sound patronising but - http://www.google.co.uk/search?sourceid ... ript+timer

That's where I would start
User avatar
Blink
Cool 'n that
Cool 'n that
 
Joined: Fri Oct 08, 2004 4:16 pm
Location: UK

Re: Little javascript help

Postby caseyw on Wed Dec 16, 2009 11:07 pm

Thanks, but I have been looking around, I've found several tutorials, but for some odd reason it always seems like it's about to work then it breaks. I think I might have messed a few other things up, so I'll keep trying.

EDIT:

Here's my code (html & js):


Code: Select all
<html>

<head>

<!-- JavaScript -->
<script type="text/javascript">

function updateTime(); {

// Initilization(s)
now = new Date();
timetype = "null";

// Definitions
now_sec = now.getSeconds();
now_min = now.getMinutes();
now_hur = now.getHours();

// Single Digit Correction
if (now_sec<10) {
   now_sec = "0" + now_sec;
}

if (now_min<10) {
   now_min = "0" + now_min;
}

if (now_hur<10) {
   now_hur = "0" + now_hur;
}

// Determine AM & PM
if (now_hur>=12) {
   time_type = "PM";
} else {
   time_type = "AM";
}

// Combine all parts to create Current Time
cur_tim = now_hur + ":" + now_min + ":" + now_sec + " " + time_type;

// Change timer span to current time
document.getElementById("#timer").innerHTML = cur_tim;

// Update interval
setTimeout("updateTime()", 0);
}

</script>

<!-- Stylesheets -->
<link rel="stylesheet" href="default.css" media="all" />

</head>

<body onload="updateTime();">

<span id="timer"></span>

</body>

</html>
Last edited by caseyw on Thu Dec 17, 2009 12:47 am, edited 3 times in total.
User avatar
caseyw
Regular
Regular
 
Joined: Sun Feb 01, 2009 2:02 am

Re: Little javascript help

Postby Surfa on Wed Dec 16, 2009 11:09 pm

I don't know java script but could you not use something like a while loop.
Code: Select all
while(IsRunning())
{
//Do timer stuff
}
bool IsRunning()
{
if(time = end time)
return false;
else
retun true;
}

Or something similar.
Surfa
May Contain Skills
May Contain Skills
 
Joined: Sun Dec 30, 2007 3:04 pm

Re: Little javascript help

Postby Blink on Wed Dec 16, 2009 11:12 pm

caseyw wrote:Thanks, but I have been looking around, I've found several tutorials, but for some odd reason it always seems like it's about to work then it breaks. I think I might have messed a few other things up, so I'll keep trying.


Maybe you could post what you have so far..?
User avatar
Blink
Cool 'n that
Cool 'n that
 
Joined: Fri Oct 08, 2004 4:16 pm
Location: UK

Re: Little javascript help

Postby caseyw on Wed Dec 16, 2009 11:14 pm

See above post for what I'm working with.

EDIT: I found a nice example of what I'm trying to replicate.

http://www.w3schools.com/js/tryit.asp?f ... ming_clock

I've pretty much got the same setup only written out a bit more, but for some reason it still isn't running, I don't understand why.
User avatar
caseyw
Regular
Regular
 
Joined: Sun Feb 01, 2009 2:02 am

Re: Little javascript help

Postby Blink on Thu Dec 17, 2009 12:14 am

Yes, but we can't help if we can't see your code...
User avatar
Blink
Cool 'n that
Cool 'n that
 
Joined: Fri Oct 08, 2004 4:16 pm
Location: UK

Re: Little javascript help

Postby caseyw on Thu Dec 17, 2009 12:46 am

Blink wrote:Yes, but we can't help if we can't see your code...


My code for the javascript is inside my HTML in the head. It's in one of my earlier posts. Check up some. If you meant something else then please specify please.
User avatar
caseyw
Regular
Regular
 
Joined: Sun Feb 01, 2009 2:02 am

Re: Little javascript help

Postby Blink on Thu Dec 17, 2009 1:05 am

caseyw wrote:My code for the javascript is inside my HTML in the head. It's in one of my earlier posts. Check up some. If you meant something else then please specify please.


Well, looking at the post times you clearly added that code after I made my post so why are bolding that statement as if it was my error? :roll:

Anyway, on to your actual code. I've just had a look and you've got two glaring syntax issues.

Function names shouldn't have a semi colon after them when you're declaring them, and you don't refer to an element id with a hash unless you're using jQuery or something.

Fixing those errors results in it working as expected:

Code: Select all
<html>

<head>

<!-- JavaScript -->
<script type="text/javascript">

function updateTime() {

// Initilization(s)
now = new Date();
timetype = "null";

// Definitions
now_sec = now.getSeconds();
now_min = now.getMinutes();
now_hur = now.getHours();

// Single Digit Correction
if (now_sec<10) {
   now_sec = "0" + now_sec;
}

if (now_min<10) {
   now_min = "0" + now_min;
}

if (now_hur<10) {
   now_hur = "0" + now_hur;
}

// Determine AM & PM
if (now_hur>=12) {
   time_type = "PM";
} else {
   time_type = "AM";
}

// Combine all parts to create Current Time
cur_tim = now_hur + ":" + now_min + ":" + now_sec + " " + time_type;

// Change timer span to current time
document.getElementById("timer").innerHTML = cur_tim;

// Update interval
setTimeout("updateTime()", 0);
}

</script>

<!-- Stylesheets -->
<link rel="stylesheet" href="default.css" media="all" />

</head>

<body onload="updateTime();">

<span id="timer"></span>

</body>

</html>


Are you using Firebug for Firefox? It provides a very useful JS error console.
User avatar
Blink
Cool 'n that
Cool 'n that
 
Joined: Fri Oct 08, 2004 4:16 pm
Location: UK

Re: Little javascript help

Postby caseyw on Thu Dec 17, 2009 1:10 am

I'm sorry about the bold. I just thought you skipped over it before. So I tried to emphasize it a little more. Yes, I am using Firefox (latest).

And I have to say, you completely fixed my problem. I owe you one big time! I've been trying to figure out the problem ever since I got home. But thanks to you, it no longer gives me headaches! :)
User avatar
caseyw
Regular
Regular
 
Joined: Sun Feb 01, 2009 2:02 am

Re: Little javascript help

Postby zombie@computer on Thu Dec 17, 2009 8:31 pm

settimeout with 0 could result in mayor performace loss. Please avoid using 0 here.
When you are up to your neck in shit, keep your head up high
User avatar
zombie@computer
Forum Goer Elite™
Forum Goer Elite™
 
Joined: Fri Dec 31, 2004 5:58 pm
Location: Lent, Netherlands

Re: Little javascript help

Postby caseyw on Sun Dec 20, 2009 10:37 am

It seems fine to me, but I may up it to 500 or even 1000 I suppose.
User avatar
caseyw
Regular
Regular
 
Joined: Sun Feb 01, 2009 2:02 am

Return to Web Design & Development

Who is online

Users browsing this forum: No registered users