I'm currently playing around with a clock I found on codepen Here.

It works perfectly but I'm having a little trouble displaying more than one. I have duplicated the code just to try and get it working but I must have missed something. I have the following javascript firing on page load:

 setInterval(function() {
  function r(el, deg) {
    el.setAttribute('transform', 'rotate('+ deg +' 50 50)')
  }
  var d = new Date()
  r(sec, 6*d.getSeconds())  
  r(min, 6*d.getMinutes())
  r(hour, 30*(d.getHours()%12) + d.getMinutes()/2)
}, 1000);

setInterval2(function() {
  function r2(el2, deg2) {
    el2.setAttribute('transform', 'rotate('+ deg2 +' 50 50)')
  }
  var d2 = new Date()
  r2(sec2, 6*d2.getSeconds())  
  r2(min2, 6*d2.getMinutes())
  r2(hour2, 30*(d2.getHours()%12) + d2.getMinutes()/2)
}, 1000);

And the following duplicated CSS:

body {
  margin: 0;
  //background: midnightblue;
}
#clock-container { 
  display: inline-block;
  position: relative;
  width: 4%;
  //padding-bottom: 100%;
  vertical-align: middle;
  overflow: hidden;
  //background: midnightblue;
} 
#face { stroke-width: 2px; stroke: #fff; fill: #fff; }
#hour, #min, #sec { 
  stroke-width: 1px;
  fill: #333;
  stroke: #555;
}
#sec { stroke: #f55; }

body {
  margin: 0;
  //background: midnightblue;
}
#clock-container2 { 
  display: inline-block;
  position: relative;
  width: 4%;
  //padding-bottom: 100%;
  vertical-align: middle;
  overflow: hidden;
  //background: midnightblue;
} 
#face2 { stroke-width: 2px; stroke: #fff; fill: #fff; }
#hour2, #min2, #sec2 { 
  stroke-width: 1px;
  fill: #333;
  stroke: #555;
}
#sec2 { stroke: #f55; }

And also the following two regions:

<div id="clock-container">
<svg id="clock" viewBox="0 0 100 100">
  <circle id="face" cx="50" cy="50" r="45"/>
  <g id="hands">
    <rect id="hour" x="47.5" y="12.5" width="5" height="40" rx="2.5" ry="2.55" />
    <rect id="min" x="48.5" y="12.5" width="3" height="40" rx="2" ry="2"/>
    <line id="sec" x1="50" y1="50" x2="50" y2="16" />
  </g>
</svg>
</div>


<div id="clock-container2">
<svg id="clock2" viewBox="0 0 100 100">
  <circle id="face2" cx="50" cy="50" r="45"/>
  <g id="hands2">
    <rect id="hour2" x="47.5" y="12.5" width="5" height="40" rx="2.5" ry="2.55" />
    <rect id="min2" x="48.5" y="12.5" width="3" height="40" rx="2" ry="2"/>
    <line id="sec2" x1="50" y1="50" x2="50" y2="16" />
  </g>
</svg>
</div>

The first region is working perfectly and the second one displays with the hands at 12:00 and not moving, so I assume the Javascript isn't firing. I have tried it with just the code from the second one and it doesn't work so again, silly error I presume!

Can anyone see what I've done wrong? I'm doing this in Oracle Apex but it just generates a web page so I don't suppose that matters too much. Thanks!

I'm currently playing around with a clock I found on codepen Here.

It works perfectly but I'm having a little trouble displaying more than one. I have duplicated the code just to try and get it working but I must have missed something. I have the following javascript firing on page load:

 setInterval(function() {
  function r(el, deg) {
    el.setAttribute('transform', 'rotate('+ deg +' 50 50)')
  }
  var d = new Date()
  r(sec, 6*d.getSeconds())  
  r(min, 6*d.getMinutes())
  r(hour, 30*(d.getHours()%12) + d.getMinutes()/2)
}, 1000);

setInterval2(function() {
  function r2(el2, deg2) {
    el2.setAttribute('transform', 'rotate('+ deg2 +' 50 50)')
  }
  var d2 = new Date()
  r2(sec2, 6*d2.getSeconds())  
  r2(min2, 6*d2.getMinutes())
  r2(hour2, 30*(d2.getHours()%12) + d2.getMinutes()/2)
}, 1000);

And the following duplicated CSS:

body {
  margin: 0;
  //background: midnightblue;
}
#clock-container { 
  display: inline-block;
  position: relative;
  width: 4%;
  //padding-bottom: 100%;
  vertical-align: middle;
  overflow: hidden;
  //background: midnightblue;
} 
#face { stroke-width: 2px; stroke: #fff; fill: #fff; }
#hour, #min, #sec { 
  stroke-width: 1px;
  fill: #333;
  stroke: #555;
}
#sec { stroke: #f55; }

body {
  margin: 0;
  //background: midnightblue;
}
#clock-container2 { 
  display: inline-block;
  position: relative;
  width: 4%;
  //padding-bottom: 100%;
  vertical-align: middle;
  overflow: hidden;
  //background: midnightblue;
} 
#face2 { stroke-width: 2px; stroke: #fff; fill: #fff; }
#hour2, #min2, #sec2 { 
  stroke-width: 1px;
  fill: #333;
  stroke: #555;
}
#sec2 { stroke: #f55; }

And also the following two regions:

<div id="clock-container">
<svg id="clock" viewBox="0 0 100 100">
  <circle id="face" cx="50" cy="50" r="45"/>
  <g id="hands">
    <rect id="hour" x="47.5" y="12.5" width="5" height="40" rx="2.5" ry="2.55" />
    <rect id="min" x="48.5" y="12.5" width="3" height="40" rx="2" ry="2"/>
    <line id="sec" x1="50" y1="50" x2="50" y2="16" />
  </g>
</svg>
</div>


<div id="clock-container2">
<svg id="clock2" viewBox="0 0 100 100">
  <circle id="face2" cx="50" cy="50" r="45"/>
  <g id="hands2">
    <rect id="hour2" x="47.5" y="12.5" width="5" height="40" rx="2.5" ry="2.55" />
    <rect id="min2" x="48.5" y="12.5" width="3" height="40" rx="2" ry="2"/>
    <line id="sec2" x1="50" y1="50" x2="50" y2="16" />
  </g>
</svg>
</div>

The first region is working perfectly and the second one displays with the hands at 12:00 and not moving, so I assume the Javascript isn't firing. I have tried it with just the code from the second one and it doesn't work so again, silly error I presume!

Can anyone see what I've done wrong? I'm doing this in Oracle Apex but it just generates a web page so I don't suppose that matters too much. Thanks!

• javascript
• jquery
• html
• css
• clock

• Find out how to view the Javascript console in whichever browser you're using (you'll probably need to look for "web developer tools"). It'll help you save at least 90% of the debugging time you'd use without it. – Gareth Commented May 29, 2015 at 9:33

4 Answers 4

setInterval is a built-in Javascript function which causes something to happen at a regular interval (the function you pass as its argument).

setInterval2 is not a built-in Javascript function. You probably want to call setInterval again :)

Note that the other answers give you alternate (neater) ways to set up multiple clocks on one page. This answer is only answering the question about why your attempt fails, I'm not suggesting this is the best approach.

You need to duplicate the structure and amend the id's then duplicate the call to the r function with the new id's

E.g. Javascript:

setInterval(function() {
  function r(el, deg) {
    el.setAttribute('transform', 'rotate('+ deg +' 50 50)')
  }
  var d = new Date()
  r(sec, 6*d.getSeconds())  
  r(min, 6*d.getMinutes())
  r(hour, 30*(d.getHours()%12) + d.getMinutes()/2)
  r(sec2, 6*d.getSeconds())  
  r(min2, 6*d.getMinutes())
  r(hour2, 30*(d.getHours()%12) + d.getMinutes()/2)
}, 1000)

Then also make the same CSS apply to the new elements:

body {
  margin: 0;
  background: midnightblue;
}
#clock-container, #clock-container2 { 
  display: inline-block;
  position: relative;
  width: 20%;
  padding-bottom: 100%;
  vertical-align: middle;
  overflow: hidden;
  background: midnightblue;
} 
#face, #face2 { stroke-width: 2px; stroke: #fff; }
#hour, #min, #sec, #hour2, #min2, #sec2 { 
  stroke-width: 1px;
  fill: #333;
  stroke: #555;
}
#sec, #sec2 { stroke: #f55; }

Finally the additional HTML:

<div id="clock-container">
<svg id="clock" viewBox="0 0 100 100">
  <circle id="face" cx="50" cy="50" r="45"/>
  <g id="hands">
    <rect id="hour" x="47.5" y="12.5" width="5" height="40" rx="2.5" ry="2.55" />
    <rect id="min" x="48.5" y="12.5" width="3" height="40" rx="2" ry="2"/>
    <line id="sec" x1="50" y1="50" x2="50" y2="16" />
  </g>
</svg>
</div>
<div id="clock-container2">
<svg id="clock2" viewBox="0 0 100 100">
  <circle id="face2" cx="50" cy="50" r="45"/>
  <g id="hands2">
    <rect id="hour2" x="47.5" y="12.5" width="5" height="40" rx="2.5" ry="2.55" />
    <rect id="min2" x="48.5" y="12.5" width="3" height="40" rx="2" ry="2"/>
    <line id="sec2" x1="50" y1="50" x2="50" y2="16" />
  </g>
</svg>
</div>

Demo:http://codepen.io/anon/pen/EjZNyy

Run this function

setInterval(function() {
  function r(el, deg) {
    el.setAttribute('transform', 'rotate('+ deg +' 50 50)')
  }
  var d = new Date()
  r(sec, 6*d.getSeconds())  
  r(min, 6*d.getMinutes())
  r(hour, 30*(d.getHours()%12) + d.getMinutes()/2)
  r(sec2, 6*d.getSeconds())  
  r(min2, 6*d.getMinutes())
  r(hour2, 30*(d.getHours()%12) + d.getMinutes()/2)
}, 1000)

for multiple instance or clock use html frame.it will solve your problem thanks

this is home.html (where index.html is html clock page)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE>
</HEAD>
<FRAMESET cols="50%, 50%">
  <FRAMESET rows="100, 200">
      <FRAME src="index.html">
      <FRAME src="index.html">
  </FRAMESET>
  <FRAME src="index.html">
  <NOFRAMES>
      <P>This frameset document contains:
      <UL>
         <LI><A href="contents_of_frame1.html">Some neat contents</A>
         <LI><IMG src="contents_of_frame2.gif" alt="A neat image">
         <LI><A href="contents_of_frame3.html">Some other neat contents</A>
      </UL>
  </NOFRAMES>
</FRAMESET>
</HTML>