How to display JS values on my HTML page

Question

I'm trying to get three different dynamic timezone clocks on my site. i've got the following js code which i found on this site (saved as myClocks.js and included on the header of my html site):

var clock1 = new Date();
var clock2 = new Date();
var clock3 = new Date();
clock2.setHours(clock2.getHours() + 3);
clock3.setHours(clock3.getHours() - 5);
clock1.getUTCHours();
clock1.getUTCMinutes();
clock1.getUTCSeconds();
clock2.getUTCHours();
clock2.getUTCMinutes();
clock2.getUTCSeconds();
clock3.getUTCHours();
clock3.getUTCMinutes();
clock3.getUTCSeconds();

How do I code the "display" to show it anywhere I want on my HTML page? For example as an id called clocks, to look like the following:

New York: 02:12:02 Paris: 17:01:24 Moscow: 22:23:42

Many thanks in advance.

you should learn DOM manipulation. for a start, you can just do document.write(clock1); — kennypu
– kennypu, Commented Jul 20, 2013 at 10:04
Bear in mind that UTC doesn't take daylight saving time changes into account — Jarek.D
– Jarek.D, Commented Jul 20, 2013 at 10:14
I'm overwhelmed with the fast responses and how helpful everyone is arround here. However what i am really looking for is for the world clocks to be dynamic and not static. Is there any way to do this? — João Tiago
– João Tiago, Commented Jul 20, 2013 at 10:24

Iren Patel · Accepted Answer · 2013-07-20 10:14:44Z

1

<html><head></head><body>
<script language="javascript">
ourDate = new Date();
document.write("The time and date at your computer's location is: "
+ ourDate.toLocaleString() 
+ ".<br/>");
document.write("The time zone offset between local time and GMT is " 
+ ourDate.getTimezoneOffset() 
+ " minutes.<br/>");
document.write("The time and date (GMT) is: " 
+ ourDate.toGMTString() 
+ ".<br/>");
</script>
</body></html>

answered Jul 20, 2013 at 10:14

Iren Patel

7771 gold badge10 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ivan Chernykh · Accepted Answer · 2013-07-20 12:12:22Z

0

innerHTML is what you need. Try something like:

window.onload = function(){ // It is important to wait till DOM is ready!
   var clocks_str = clock3.getUTCHours()+" "+ clock3.getUTCMinutes()+" "+clock3.getUTCSeconds();
   document.getElementById("clocks").innerHTML = clocks_str ;
}

And if you want it dynamic , use setInterval method , like this:

 var clocks_interval;
 var clocks_box;

 window.onload = startClocks;

 function startClocks(){
    clocks_box = document.getElementById("clocks");
    clocks_interval = setInterval(updateClocks , 1000); // 1000 means 1 second
 }

 function updateClocks (){
    var clocks_str = clock3.getUTCHours()+" "+ clock3.getUTCMinutes()+" "+clock3.getUTCSeconds();
    clocks_box.innerHTML = clocks_str ;
 }

edited Jul 20, 2013 at 12:12

answered Jul 20, 2013 at 10:08

Ivan Chernykh

42.2k13 gold badges136 silver badges148 bronze badges

1 Comment

João Tiago Over a year ago

thanks for the help. is there any way to avoid making the clocks static? (no page refresh required to see time changing)

DhoTjai · Accepted Answer · 2013-07-20 10:09:45Z

0

You can create a div or other HTML and use "innerHTML".

document.getElementById("clocks").innerHTML = clock1.getUTCHours();

answered Jul 20, 2013 at 10:09

DhoTjai

1511 silver badge6 bronze badges

Collectives™ on Stack Overflow

How to display JS values on my HTML page

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related