javascript - 使用 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 :)

请注意，其他答案为您提供了在一页上设置多个时钟的替代(简洁)方法。此答案仅回答有关您的尝试为何失败的问题，我并不是说这是最好的方法。