...

View Full Version : Help with setInterval



bcarter755
07-20-2010, 03:10 PM
Hi, I've been working on a clock script that will appear on a frame of my site.
Originally, I had used the following to refresh the page every second to the script shows the updated time and seconds.

<meta HTTP-EQUIV="Refresh" url="WEBSITE HERE" CONTENT="1">

This worked but unfortunately, there was the refresh "tick" sound every second, which became too annoying!

I found the "setInterval" method and tried to apply it to my code.

For the purpose of this thread,
I've created another script similar to mine, but about 1/20 as long, though the result is the same.
I would like it to re-run every second using setInterval, but it only runs once and then disappears.


<script type="text/javascript">
<!--
updateClock();
setInterval ("updateClock()", 1000);
function updateClock()
{
var t = new Date();
var seconds = t.getSeconds();
document.write(seconds);
}
// -->
</script>


Any help would be appreciated!! Thanks.

RandomUser531
07-20-2010, 06:08 PM
I don't know where you expect that text to appear, but document.write cannot be used in a loaded document.
The easiest solution is to write to the .value property of a styled form element.

bcarter755
07-20-2010, 06:14 PM
I am doing this with Dreamweaver on an HTML page.

It seems to work fine without the "updateClock" function and "setInterval".

RandomUser531
07-20-2010, 06:30 PM
I am doing this with Dreamweaver on an HTML page.

It seems to work fine without the "updateClock" function and "setInterval".That's because it runs once at build time, but it cannot work thereafter.


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

<script type="text/javascript">

function updateClock()
{
document.getElementById('secs').value = new Date().getSeconds();
}

setInterval( updateClock, 995 );

</script>

</head>
<body>
<p>
<input id='secs' style='border:inset 4px #00f;background-color:#0df;color:#000;font-size:1.2em;width:30px;padding: 4px;text-align:center'>
</body>
</html>

Rowsdower!
07-20-2010, 07:37 PM
Hi, I've been working on a clock script that will appear on a frame of my site.
Originally, I had used the following to refresh the page every second to the script shows the updated time and seconds.

<meta HTTP-EQUIV="Refresh" url="WEBSITE HERE" CONTENT="1">

This worked but unfortunately, there was the refresh "tick" sound every second, which became too annoying!

I found the "setInterval" method and tried to apply it to my code.

For the purpose of this thread,
I've created another script similar to mine, but about 1/20 as long, though the result is the same.
I would like it to re-run every second using setInterval, but it only runs once and then disappears.


<script type="text/javascript">
<!--
updateClock();
setInterval ("updateClock()", 1000);
function updateClock()
{
var t = new Date();
var seconds = t.getSeconds();
document.write(seconds);
}
// -->
</script>


Any help would be appreciated!! Thanks.


It's working the first time because of this:

<script type="text/javascript">
<!--
updateClock();
setInterval ("updateClock()", 1000);
function updateClock()
{
var t = new Date();
var seconds = t.getSeconds();
document.write(seconds);
}
// -->
</script>

Thereafter you get no results because you have not used setInterval correctly (you need to use window.setInterval, not just setInterval). Try something like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Test Page</title>
<script type="text/javascript">
//<!--
var tick_tock = "";
function updateClock(){
var t = new Date();
var seconds = t.getSeconds();
document.getElementById('clock').innerHTML=seconds;
}
function start_clock(){
tick_tock = window.setInterval ("updateClock()", 1000);
}
function stop_clock(){
window.clearInterval(tick_tock);
}
//-->
</script>
</head>
<body>
<input type="button" value="Start" onclick="start_clock();" />
<input type="button" value="Stop" onclick="stop_clock();" />
<div id="clock"></div>
</body>
</html>

Old Pedant
07-20-2010, 08:56 PM
you need to use window.setInterval, not just setInterval).

Not true.

It's true that in actuality the function is a method on the window object, but it's always legal to omit the window object name, as that is understood as the base object of everything on a page.

It *is* true, though, that he needs to use

document.getElementById('clock').innerHTML=seconds;
rather than document.write.

So:


<html>
<head>
<script type="text/javascript">
function updateClock()
{
document.getElementById('clock').innerHTML = ( new Date() ).getSeconds();
}
</script>
</head>
<body onload="updateClock(); setInterval(updateClock,1000);">
...
<div id="clock"></div><!-- or could be a span -->
...
</body>
</html>


Incidentally, the use of //<!-- and // --> with JavaScript code is long long obsolete. If you see that in a published script, it's an indication that the script is probably old and maybe not reliable.

Old Pedant
07-20-2010, 08:59 PM
Sorry, my code is a virtual clone of Phil's. His use of 995 for the setInterval will cause the occasional "lag" on the clock, but it will work.

I added the immediate call in the <body onload> so that the clock is set as soon as the page appears.

Old Pedant
07-20-2010, 09:02 PM
And just in case...

Try this as the sole contents of an HTML page. Try it in any browser:


<script>
if ( setInterval == window.setInterval ) alert("identical");
</script>

bcarter755
07-20-2010, 09:49 PM
Thanks guys...
Please bear with me here, as I am still new to JavaScript!

My real code (before I added "setInterval") looked like this:

To display the Date (ie. July 20, 2010)
the local time (with seconds)
UTC time (zulu)
and server time (2 hours behind zulu time)


I understand that I should not be using "document.write" but am unsure of any other way to code it.

I am looking to change this so it will update the clock every second.
If you can do that for me, I would really appreciate it!

The code currently works perfectly the first time. All we need to do it keep it updating!

Once again,
Thanks!!!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScript Time/Date</title>
</head>

<body>

<script type="text/javascript">
updateClock();
function updateClock()
{

var m_names = new Array("January", "February", "March",
"April", "May", "June", "July", "August", "September",
"October", "November", "December");
var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth();
var curr_year = d.getFullYear();
var t = new Date();
var curr_hours = t.getHours();
var curr_minutes = t.getMinutes();
var curr_seconds = t.getSeconds();
if (curr_minutes < 10)
{
curr_minutes = "0" + curr_minutes;
}
if (curr_seconds < 10)
{
curr_seconds = "0" + curr_seconds;
}
var curr_time;
if (curr_hours < 12 && curr_hours != 0)
{
curr_time = "am";
}
if (curr_hours == 0)
{
curr_hours = 12;
curr_time = "am";
}
if (curr_hours == 12)
{
curr_time = "pm";
}
if (curr_hours > 12)
{
curr_hours = curr_hours - 12;
curr_time = "pm";
}
var curr_z_hour = t.getUTCHours();
if (curr_z_hour < 10)
{
curr_z_hour = "0" + curr_z_hour;
}
var curr_z_minutes = t.getUTCMinutes();
var curr_s_hour = curr_z_hour;
var curr_s_minutes = curr_z_minutes;
if (curr_z_minutes < 10)
{
curr_z_minutes = "0" + curr_z_minutes;
curr_s_minutes = "0" + curr_s_minutes;
}
var s_back;

s_back = 2;

if (curr_z_hour >= 02 )
{
curr_s_hour = curr_z_hour - s_back;
}
if (curr_z_hour == 01 )
{
curr_s_hour = 23;
}
if (curr_z_hour == 00)
{
curr_s_hour = 22;
}
if (curr_s_hour < 10)
{
curr_s_hour = "0" + curr_s_hour;
}

document.write(m_names[curr_month] + " " + curr_date + "," + " " + curr_year + " " + " " + "|" + " " + " " + curr_hours + ":" + curr_minutes + ":" + curr_seconds + curr_time
+ " " + " " + "|" + " " + " " + curr_z_hour + ":" + curr_z_minutes + " zulu" + " " + " " + "|" + " " + " " + curr_s_hour + ":" + curr_s_minutes + " server");
}
</script>



</body>
</html>

Old Pedant
07-20-2010, 10:41 PM
Yes? And how did what we all wrote not give you the answer??

In place of

document.write(m_names[curr_month] + " " + curr_date + "," + " " + curr_year + " " + " " + "|" + " " + " " + curr_hours + ":" + curr_minutes + ":" + curr_seconds + curr_time
+ " " + " " + "|" + " " + " " + curr_z_hour + ":" + curr_z_minutes + " zulu" + " " + " " + "|" + " " + " " + curr_s_hour + ":" + curr_s_minutes + " server");

you will need to do


document.getElementById("clock").innerHTML =
(m_names[curr_month] + " " + curr_date + "," + " " + curr_year + " " + " " + "|" + " " + " " + curr_hours + ":" + curr_minutes + ":" + curr_seconds + curr_time
+ " " + " " + "|" + " " + " " + curr_z_hour + ":" + curr_z_minutes + " zulu" + " " + " " + "|" + " " + " " + curr_s_hour + ":" + curr_s_minutes + " server");


And instead of the line in the code that calls it directly:

updateClock();

just do


<body onload="updateClock(); setInterval(updateClock,1000);">

And, finally, you need a <span id="clock"> or <div id="clock">

bcarter755
07-20-2010, 10:48 PM
And, finally, you need a <span id="clock"> or <div id="clock">

Thank you!
Except, how do I implement this?

I know I would have to do something like </div> near the bottom, right?

This is my first time writing in JavaScript! I'm just not sure where everything should go.

Old Pedant
07-20-2010, 11:11 PM
It really doesn't matter where you put things.

The only important part is the <body> tag, where you need the onload as I showed you. (Even that can be changed, and should be if there is anything else also being activated at page load time.)

The <script> tag can really go anywhere. Traditionally, it is put in the <head>...</head>, but many people are now opting to put it at the bottom of the page.

The <div id="clock"> should simply be put wherever on the page you want the clock to appear. Same as any other <div> (or <span>).

Just try it!

bcarter755
07-20-2010, 11:26 PM
Sorry, am I working with everything in <head>... </head> or <body>... </body>?
I've tried everything and get no result.

Again, I have had no prior experience with any of this.

Thanks.

bcarter755
07-20-2010, 11:28 PM
Currently, I have...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScript Time/Date</title>
</head>
<body onload="updateClock(); setInterval(updateClock,1000);">


<script type="text/javascript">
<div id="clock">
function updateClock()
{
var m_names = new Array("January", "February", "March",
"April", "May", "June", "July", "August", "September",
"October", "November", "December");
var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth();
var curr_year = d.getFullYear();
var t = new Date();
var curr_hours = t.getHours();
var curr_minutes = t.getMinutes();
var curr_seconds = t.getSeconds();
if (curr_minutes < 10)
{
curr_minutes = "0" + curr_minutes;
}
if (curr_seconds < 10)
{
curr_seconds = "0" + curr_seconds;
}
var curr_time;
if (curr_hours < 12 && curr_hours != 0)
{
curr_time = "am";
}
if (curr_hours == 0)
{
curr_hours = 12;
curr_time = "am";
}
if (curr_hours == 12)
{
curr_time = "pm";
}
if (curr_hours > 12)
{
curr_hours = curr_hours - 12;
curr_time = "pm";
}
var curr_z_hour = t.getUTCHours();
if (curr_z_hour < 10)
{
curr_z_hour = "0" + curr_z_hour;
}
var curr_z_minutes = t.getUTCMinutes();
var curr_s_hour = curr_z_hour;
var curr_s_minutes = curr_z_minutes;
if (curr_z_minutes < 10)
{
curr_z_minutes = "0" + curr_z_minutes;
curr_s_minutes = "0" + curr_s_minutes;
}
var s_back;

s_back = 2;

if (curr_z_hour >= 02 )
{
curr_s_hour = curr_z_hour - s_back;
}
if (curr_z_hour == 01 )
{
curr_s_hour = 23;
}
if (curr_z_hour == 00)
{
curr_s_hour = 22;
}
if (curr_s_hour < 10)
{
curr_s_hour = "0" + curr_s_hour;
}

document.getElementById("clock").innerHTML =
(m_names[curr_month] + " " + curr_date + "," + " " + curr_year + " " + " " + "|" + " " + " " + curr_hours + ":" + curr_minutes + ":" + curr_seconds + curr_time
+ " " + " " + "|" + " " + " " + curr_z_hour + ":" + curr_z_minutes + " zulu" + " " + " " + "|" + " " + " " + curr_s_hour + ":" + curr_s_minutes + " server");


}

</div>
</script>



</body>
</html>

Old Pedant
07-20-2010, 11:36 PM
You can *NOT* put HTML tags inside of <script>...</script>

Move your <div> *OUT* of the <script> block.

There is NO NEED at all for the <div> and the <script> to even be close to each other on the page.

Again, I would *STRONGLY* suggest--until you start learning more things---that you stick with putting the <script> inside the <head>. And the <div> *MUST* of course go in the <body>.

See my code example in post #6 in this thread.

bcarter755
07-20-2010, 11:49 PM
AWESOME! Got it working now!!!

Thanks for all your help and advice!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum