Live clock?

[techno_race]

I really need an answer to this before Thursday.
What is the refresh function in JavaScript that makes a live clock live?
How can I make this script clock appear as live (I know, I know, please ignore the poor formatting and methods for now.):

var today = new Date();
var month = today.getMonth();
var displayMonth;
var hours = today.getHours();
var minutes = today.getMinutes();
var ap;
var displayHours;
var displayMinutes;
var displaySeconds;
var seconds = today.getSeconds();
var year = today.getFullYear();
var milli = today.getMilliseconds();
var displayMilli;
var date = today.getDate();
var day = today.getDay();
var displayDay;

switch (month) {
case 0 :
displayMonth = "January"
break
case 1 :
displayMonth = "February"
break
case 2 :
displayMonth = "March"
break
case 3 :
displayMonth = "April"
break
case 4 :
displayMonth = "May"
break
case 5 :
displayMonth = "June"
break
case 6 :
displayMonth = "July"
break
case 7 :
displayMonth = "August"
break
case 8 :
displayMonth = "September"
break
case 9 :
displayMonth = "October"
break
case 10 :
displayMonth = "November"
break
case 11 :
displayMonth = "December"
break

default: displayMonth = ""

}

switch (day) {
case 0 :
displayDay = "Sunday"
break
case 1 :
displayDay = "Monday"
break
case 2 :
displayDay = "Tuesday"
break
case 3 :
displayDay = "Wednesday"
break
case 4 :
displayDay = "Thursday"
break
case 5 :
displayDay = "Friday"
break
case 6 :
displayDay = "Saturday"
break

default: displayDay = ""
}

if (hours <= 11 && hours != 0) {
displayHours = hours;
ap = "AM";
}
if (hours == 0) {
displayHours = 12;
ap = "AM";
}
if (hours == 12) {
displayHours = hours;
ap = "PM";
}
if (hours > 12) {
displayHours = hours - 12;
ap = "PM";
}

if (minutes < 10) {
displayMinutes = "0" + minutes;
}
else {
displayMinutes = minutes;
}

if (seconds < 10) {
displaySeconds = "0" + seconds;
}
else {
displaySeconds = seconds;
}

if (milli < 10) {
displayMilli = "00" + milli;
}
if (milli > 10 && milli < 100) {
displayMilli = "0" + milli;
}
else {
displayMilli = milli;
}

var timestart = '<div class="date">'
var timend = '</div>'
var display = timestart + displayDay + ", " + displayMonth + " " + date + ", " + year + " " + displayHours + ":" + displayMinutes + ":" + displaySeconds + "." + displayMilli;
document.write(display);

:confused::confused::confused::confused:

[Nile]

Try this:


function datef(){
setTimeout('datef()',100);
var today = new Date();
var month = today.getMonth();
var displayMonth;
var hours = today.getHours();
var minutes = today.getMinutes();
var ap;
var displayHours;
var displayMinutes;
var displaySeconds;
var seconds = today.getSeconds();
var year = today.getFullYear();
var milli = today.getMilliseconds();
var displayMilli;
var date = today.getDate();
var day = today.getDay();
var displayDay;

switch (month) {
case 0 :
displayMonth = "January"
break
case 1 :
displayMonth = "February"
break
case 2 :
displayMonth = "March"
break
case 3 :
displayMonth = "April"
break
case 4 :
displayMonth = "May"
break
case 5 :
displayMonth = "June"
break
case 6 :
displayMonth = "July"
break
case 7 :
displayMonth = "August"
break
case 8 :
displayMonth = "September"
break
case 9 :
displayMonth = "October"
break
case 10 :
displayMonth = "November"
break
case 11 :
displayMonth = "December"
break

default: displayMonth = ""

}

switch (day) {
case 0 :
displayDay = "Sunday"
break
case 1 :
displayDay = "Monday"
break
case 2 :
displayDay = "Tuesday"
break
case 3 :
displayDay = "Wednesday"
break
case 4 :
displayDay = "Thursday"
break
case 5 :
displayDay = "Friday"
break
case 6 :
displayDay = "Saturday"
break

default: displayDay = ""
}

if (hours <= 11 && hours != 0) {
displayHours = hours;
ap = "AM";
}
if (hours == 0) {
displayHours = 12;
ap = "AM";
}
if (hours == 12) {
displayHours = hours;
ap = "PM";
}
if (hours > 12) {
displayHours = hours - 12;
ap = "PM";
}

if (minutes < 10) {
displayMinutes = "0" + minutes;
}
else {
displayMinutes = minutes;
}

if (seconds < 10) {
displaySeconds = "0" + seconds;
}
else {
displaySeconds = seconds;
}

if (milli < 10) {
displayMilli = "00" + milli;
}
if (milli > 10 && milli < 100) {
displayMilli = "0" + milli;
}
else {
displayMilli = milli;
}

var timestart = '<div class="date">'
var timend = '</div>'
var display = timestart + displayDay + ", " + displayMonth + " " + date + ", " + year + " " + displayHours + ":" + displayMinutes + ":" + displaySeconds + "." + displayMilli;
document.write(display);
}

Then add:


onLoad="datef()"

To your body section. :)

[techno_race]

That didn't work...and wiped out the rest of my page.

[Nile]

Try switching:


setTimeout('datef()',100);

To:


setTimeout(datef(),100);

If this doesn't work, search google for the setTimeout function.
Im not the best with this function.

[techno_race]

Stack overflow at line 3.

[Nile]

See if this helps you any bit:
http://www.w3schools.com/htmldom/met_win_settimeout.asp

[techno_race]

I already tried that.

[rangana]

There is a dynamic clock here (http://www.dynamicdrive.com/dynamicindex6/clock2.htm)

Haven't you tried adding a meta refresh on your page?..;)

[codeexploiter]

Hello Techno_race,

Here is your live clock code which is working as it supposed. I've highlighted the section on which I've made the changes. Wrapped your code inside a function for easiness.


<?xml version="1.0" encoding="UTF-8"?>
<!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>
<title></title>
<style type="text/css">
</style>
<script type="text/javascript">
var timeDisplay = function(){
var today = new Date();
var month = today.getMonth();
var displayMonth;
var hours = today.getHours();
var minutes = today.getMinutes();
var ap;
var displayHours;
var displayMinutes;
var displaySeconds;
var seconds = today.getSeconds();
var year = today.getFullYear();
var milli = today.getMilliseconds();
var displayMilli;
var date = today.getDate();
var day = today.getDay();
var displayDay;

switch (month) {
case 0:
displayMonth = "January"
break
case 1:
displayMonth = "February"
break
case 2:
displayMonth = "March"
break
case 3:
displayMonth = "April"
break
case 4:
displayMonth = "May"
break
case 5:
displayMonth = "June"
break
case 6:
displayMonth = "July"
break
case 7:
displayMonth = "August"
break
case 8:
displayMonth = "September"
break
case 9:
displayMonth = "October"
break
case 10:
displayMonth = "November"
break
case 11:
displayMonth = "December"
break
default:
displayMonth = ""

}

switch (day) {
case 0:
displayDay = "Sunday"
break
case 1:
displayDay = "Monday"
break
case 2:
displayDay = "Tuesday"
break
case 3:
displayDay = "Wednesday"
break
case 4:
displayDay = "Thursday"
break
case 5:
displayDay = "Friday"
break
case 6:
displayDay = "Saturday"
break
default:
displayDay = ""
}

if (hours <= 11 && hours != 0) {
displayHours = hours;
ap = "AM";
}
if (hours == 0) {
displayHours = 12;
ap = "AM";
}
if (hours == 12) {
displayHours = hours;
ap = "PM";
}
if (hours > 12) {
displayHours = hours - 12;
ap = "PM";
}

if (minutes < 10) {
displayMinutes = "0" + minutes;
}
else {
displayMinutes = minutes;
}

if (seconds < 10) {
displaySeconds = "0" + seconds;
}
else {
displaySeconds = seconds;
}

if (milli < 10) {
displayMilli = "00" + milli;
}
if (milli > 10 && milli < 100) {
displayMilli = "0" + milli;
}
else {
displayMilli = milli;
}

var timestart = '<div id="date">'
var timend = '</div>'
var display = timestart + displayDay + ", " + displayMonth + " " + date + ", " + year + " " + displayHours + ":" + displayMinutes + ":" + displaySeconds + "." + displayMilli + timend;

if (document.getElementById('date'))
document.getElementById('date').innerHTML = displayDay + ", " + displayMonth + " " + date + ", " + year + " " + displayHours + ":" + displayMinutes + ":" + displaySeconds + "." + displayMilli;
else
document.write(display);
setTimeout('timeDisplay()', 1000);
}

timeDisplay();
</script>
</head>
<body>
<div>
This is another div
</div>
</body>
</html>

[techno_race]

There is a dynamic clock here (http://www.dynamicdrive.com/dynamicindex6/clock2.htm)

Haven't you tried adding a meta refresh on your page?..;)
For 1 millisecond? Yeah, right. If this page is on a server, it wouldn't be able to load before it refreshed next.

[techno_race]

Thank you. Now please improve upon this code in any way phisically possible, taking it to the most advanced JavaScript possible--I'll figure it out eventually. The most important would be all the switch and if statements.

var timeDisplay = function(){
var today = new Date();
var month = today.getMonth();
var displayMonth;
var hours = today.getHours();
var minutes = today.getMinutes();
var ap;
var displayHours;
var displayMinutes;
var displaySeconds;
var seconds = today.getSeconds();
var year = today.getFullYear();
var milli = today.getMilliseconds();
var displayMilli;
var date = today.getDate();
var day = today.getDay();
var displayDay;

switch (month) {
case 0:
displayMonth = "January"
break
case 1:
displayMonth = "February"
break
case 2:
displayMonth = "March"
break
case 3:
displayMonth = "April"
break
case 4:
displayMonth = "May"
break
case 5:
displayMonth = "June"
break
case 6:
displayMonth = "July"
break
case 7:
displayMonth = "August"
break
case 8:
displayMonth = "September"
break
case 9:
displayMonth = "October"
break
case 10:
displayMonth = "November"
break
case 11:
displayMonth = "December"
break
default:
displayMonth = ""

}

switch (day) {
case 0:
displayDay = "Sunday"
break
case 1:
displayDay = "Monday"
break
case 2:
displayDay = "Tuesday"
break
case 3:
displayDay = "Wednesday"
break
case 4:
displayDay = "Thursday"
break
case 5:
displayDay = "Friday"
break
case 6:
displayDay = "Saturday"
break
default:
displayDay = ""
}

if (hours <= 11 && hours != 0) {
displayHours = hours;
ap = "AM";
}
if (hours == 0) {
displayHours = 12;
ap = "AM";
}
if (hours == 12) {
displayHours = hours;
ap = "PM";
}
if (hours > 12) {
displayHours = hours - 12;
ap = "PM";
}

if (minutes < 10) {
displayMinutes = "0" + minutes;
}
else {
displayMinutes = minutes;
}

if (seconds < 10) {
displaySeconds = "0" + seconds;
}
else {
displaySeconds = seconds;
}

if (milli < 10) {
displayMilli = "00" + milli;
}
if (milli > 10 && milli < 100) {
displayMilli = "0" + milli;
}
else {
displayMilli = milli;
}

var timestart = '<div id="date">'
var timend = '</div>'
var display = timestart + displayDay + ", " + displayMonth + " " + date + ", " + year + " " + displayHours + ":" + displayMinutes + ":" + displaySeconds + "." + displayMilli + timend;

if (document.getElementById('date'))
document.getElementById('date').innerHTML = displayDay + ", " + displayMonth + " " + date + ", " + year + " " + displayHours + ":" + displayMinutes + ":" + displaySeconds + "." + displayMilli;
else
document.write(display);
setTimeout('timeDisplay()', 1);
}

timeDisplay();
What do I do with the related CSS code -- I might get in trouble if I post it in the CSS forum for not posting it here, or I might get in trouble if I post it here for not posting it there...

[rangana]

If your problem regards about CSS, then better in the CSS section :)
If it's a JS problem, then better off here :)

What do you mean by? ;)


taking it to the most advanced JavaScript possible

[techno_race]

As in, x = y * z if (L < v) exec c}
Incomprehensible by newbies, basically.