View Full Version : Clocks and Iframes.
Ok, so I just started looking at Javascript, and I found a neat little code for a clock.
Its like this:
<h4>It is now <script type="text/javascript">
<!--
var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
if (minutes < 10)
minutes = "0" + minutes
document.write(hours + ":" + minutes + " ")
if(hours > 11){
document.write("PM")
} else {
document.write("AM")
}
//-->
</script>
</h4>
now what Im wondering is whether or not I can make this autorefresh inside an iframe. That way I can put the seconds on it and make it flow second to second.
any ideas?
Piperwolf
04-21-2006, 12:31 PM
try adding <meta http-equiv="refresh" content="1"> in your head section.
Piperwolf
04-21-2006, 12:34 PM
Or...
In your script/javascript section, declare a variable
var timerId //it can be any variable
your body tag like so
<body onload="timerId = setinterval('self.location.reload()',1000)">
and if you want:
<a href="javascript:clearinterval(timerId)">STOP TIME!</a>
let me know if it works, I'm modifying an example in a book I have.
but I can put into an i frame right? and what if I did 1 milisecond instead of 1000 would that make the second to second more fluent?
Piperwolf
04-21-2006, 12:54 PM
My second example doesn't work, the first example (as well as the second example) goes by one second. Your clock doesn't display seconds so you may want to adjust that. It'll work it iframes as far as I know. What this does is refresh the page every second, so no, don't make it every millisecond. Its annoying enough every second w/o crashing my browser.
I added the seconds to it...its pretty simple...heres the update.
<html>
<head><title>Clock countdown thingy.</title>
<style type="text/css">
<!--
body {
background-image: url(Foggy1.jpg);
background-position: 0% 0%;
}
table {
overflow: visible;
position: absolute;
z-index: auto;
height: 483px;
width: 730px;
left: 166px;
top: 70px;
background-color: #FFFFFF;
}
a {
font-size: 9px;
color: #FFFF00;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FF0000;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
}
a:active {
text-decoration: none;
color: #FF0000;
}
p {
font-family: "Times New Roman", Times, serif;
font-size: 24px;
font-weight: bolder;
color: #FFFFFF;
}
.style1 {font-size: 24px}
.style4 {font-size: 14%}
.style5 {font-size: 14pt}
.style7 {
font-size: 14px;
color: #FFFFFF;
}
.style10 {color: #003265}
-->
</style></head>
<h4>It is now <script type="text/javascript">
<!--
var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
var seconds = currentTime.getSeconds()
if (minutes < 10)
minutes = "0" + minutes
if (seconds < 10)
seconds = "0" + seconds
document.write(hours + ":" + minutes + ":" + " " + seconds + " ")
if(hours > 11){
document.write("PM")
} else {
document.write("AM")
}
//-->
</script>
</h4>
sorry bout the css.
Piperwolf
04-21-2006, 12:58 PM
correction, capitalization matters, even on things that shouldn't be capitalized. I wonder about that. But referencing my book again, make sure to use onLoad, not onload. Also, setinterval should be setInterval. This second way is much more smooth than the first. I don't think changing it to milliseconds is going to change that. I however did add seconds to the clock to see it working. Just add another variable called seconds (var seconds = currentTime.getSeconds()) and change your display, or append it to: document.write(hours + ":" + minutes + " " + seconds + " ")
I dont understand how that will make it go second by second...
Piperwolf
04-21-2006, 01:01 PM
Does that work? You don't have a <body> tag so its not doing the main javascript function, that is onLoad set this interval function to refresh the page. I'd be really surprised if it did. here's my full code, i'm using xhtml, which probably shouldn't be used but I'm too lazy to change it right now.
<!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" lang="en-US" xml:lang="en-US">
<head>
<title> The Title of Your Page Goes Here </title>
<meta name="Generator" content="EditPlus" /><meta name="Author" content="Your Name Goes Here" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
-->
</style>
<script type="text/javascript">
var timerId;
</script>
</head>
<body onLoad="timerId = setInterval('self.location.reload()',1000)">
<h4>It is now <script type="text/javascript">
<!--
var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
var seconds = currentTime.getSeconds()
if (minutes < 10)
minutes = "0" + minutes
if (seconds < 10)
seconds = "0" + seconds
document.write(hours + ":" + minutes + " " + seconds + " ")
if(hours > 11){
document.write("PM")
} else {
document.write("AM")
}
//-->
</script>
</h4>
</body>
</html>
you can cut in paste in your css although you're not using half of what your defining there.
That works...now Ill just pop it into a div so the whole page wont refresh right?
Piperwolf
04-21-2006, 01:07 PM
I dont understand how that will make it go second by second...
I added seconds to see that it was working instead of having to wait a minute pass by to see if the clock was actually updating. 1000 milliseconds is one second. Updating it more than every one second is just causing more work on the client's computer than is really necessary. Does that answer you question?
I already knew that...I was talking about something else in that post...it works now. thanks a lot.
Piperwolf
04-21-2006, 01:09 PM
That works...now Ill just pop it into a div so the whole page wont refresh right?
Nope. I don't know how to refresh a specific div. The only way I'd know is adding the old frameset, which is a no-no. Anyone else know of a different way?
mellamokb
04-21-2006, 05:51 PM
Hi,
I was just going to mention that case sensitivity matters in JavaScript but not in HTML, and that can make for sticky situations. Since the 'onload' you are using is HTML, case sensitivity isn't an issue; however, if you were defining the onload method in a script tag, the case sensitivity might be more important.
As far as the clock; I think a better way yet than what you have here is to place the writing inside of an input, or label, or paragraph, or span, or whatever can display text rather than using an entire document. There is no need to write directly to a document. Instead, you should have a box containing the time, and update what is written in the box every second. In this case, there would be no refreshing involved, and it would make your page less distracting:
<!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" lang="en-US" xml:lang="en-US">
<head>
<title> The Title of Your Page Goes Here </title>
<meta name="Generator" content="EditPlus" /><meta name="Author" content="Your Name Goes Here" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
-->
</style>
</head>
<body onload="update_clock ();">
<!-- PAGE CONTENT -->
<h4>It is now <span id="clock">sd</span></h4>
<!-- PAGE CONTENT -->
<script type="text/javascript">
<!--
function update_clock ()
{
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
if (minutes < 10)
minutes = "0" + minutes;
if (seconds < 10)
seconds = "0" + seconds;
clock_text = hours + ":" + minutes + ":" + seconds + " ";
if(hours > 11) {
clock_text += "PM";
} else {
clock_text += "AM";
}
clock.innerHTML = clock_text;
setTimeout("update_clock ();", 1000);
}
//-->
</script>
</body>
</html>
The span named 'clock' contains the current time, and it is updated every second by the javascript code. When the page loads [<body onload="xxx">] the clock is updated once; inside the update method, the clock automatically updates itself every 1000 ms (1 second) [setTimeout("update_clock ();", 1000);].
mellamokb
vBulletin® v3.6.7, Copyright ©2000-2009, Jelsoft Enterprises Ltd.