使用 HTML、CSS、Javascript 的 Web 应用程序上的多个时钟

Question

我目前正在玩我在 codepen Here 上找到的一个时钟。

它工作得很好，但我在显示多个时遇到了一些问题。我已经复制了代码只是为了尝试让它工作但我一定错过了一些东西。我有以下 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)
}, 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);

以下重复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; }

还有以下两个地区：

<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>

第一个区域运行良好，第二个区域显示指针位于 12:00 并且没有移动，所以我假设 Javascript 没有触发。我已经用第二个代码试过了，但还是不行，我想这是个愚蠢的错误！

谁能看出我做错了什么？我在 Oracle Apex 中这样做，但它只生成一个网页，所以我认为这不太重要。谢谢！

Answer 1

setInterval 是一个内置的 Javascript 函数，它会导致定期发生某些事情（您作为参数传递的函数）。

setInterval2 不是内置的 Javascript 函数。您可能想再次调用 setInterval :)

请注意，其他答案为您提供了在一页上设置多个时钟的替代（简洁）方法。这个答案只是回答你为什么尝试失败的问题，我并不是说这是最好的方法。

Answer 2

用于多实例或时钟使用 html frame.it 将解决您的问题，谢谢

这是 home.html（其中 index.html 是 html 时钟页面）

<!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>

Answer 3

您需要复制结构并修改 ID，然后使用新 ID

复制对 r 函数的调用

例如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)

然后也将相同的 CSS 应用于新元素：

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; }

最后补充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>

演示：http://codepen.io/anon/pen/EjZNyy

Answer 4

运行这个函数

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)

使用 HTML、CSS、Javascript 的 Web 应用程序上的多个时钟

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

html

javascript

css

jquery

clock