CODEWITHSUNDEEP
javascriptjqueryhtmlcssclock
ls_dev
ls_dev

Reputation: 191

Multiple clocks on a web application using HTML, CSS, Javascript

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!

Upvotes: 2

Views: 1683

Answers (4)

Gareth
Gareth

Reputation: 138002

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.

Upvotes: 4

sms247
sms247

Reputation: 4504

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.org/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>

Upvotes: 0

Oleh Leskiv
Oleh Leskiv

Reputation: 391

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)

Upvotes: 2

Rob Schmuecker
Rob Schmuecker

Reputation: 8954

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

Upvotes: 3

Related Questions