如何在时钟应用程序中用当前时间自动替换过去的秒/分钟/小时答案

【问题标题】：How to auto replace past seconds/ minutes/ hours with current time in a clock application如何在时钟应用程序中用当前时间自动替换过去的秒/分钟/小时
【发布时间】：2019-07-11 13:45:00
【问题描述】：

我正在尝试显示当前时间，但是随着每一秒的流逝，一个新的时间实例会添加到 div 中。

现在的时间如何代替过去的时间？

我尝试使用替换功能，将 textContent 设置为该替换功能，但没有成功。我很困惑，因为正如您所看到的，使模拟时钟每秒重新加载正确时间的代码并且不确定为什么设计数字时钟部分不是这种情况。

const secondHand = document.querySelector('.second-hand')
const minuteHand = document.querySelector('.min-hand')
const hourHand = document.querySelector('.hour-hand')

// analog clock
function setAnalogClock() {
    const now = new Date()

    //get seconds
    const secs = now.getSeconds()
    const secDegs = ((secs / 60) * 360) + 90
    secondHand.style.transform = `rotate(${secDegs}deg)`

    //get minutes
    const mins = now.getMinutes()
    const minDegs = ((mins / 60) * 360) + 90
    minuteHand.style.transform = `rotate(${minDegs}deg)`

    //get hours
    const hours = now.getHours()
    const hourDeg = ((hours / 12) * 360) + 90
    hourHand.style.transform = `rotate(${hourDeg}deg)`

}

setInterval(setAnalogClock, 1000)

function setDigitalClock() {
    const digitalSec = document.querySelector('.sec')
    const digitalMin = document.querySelector('.min')
    const digitalHour = document.querySelector('.hour')

    const now = new Date()

    // set seconds
    const secTxt = document.createElement('span')
    secTxt.textContent = now.getSeconds()
    digitalSec.appendChild(secTxt)

    // set minutes
    const minTxt = document.createElement('span')
    minTxt.textContent = now.getMinutes()
    digitalMin.appendChild(minTxt)

    // set hours
    const hourTxt = document.createElement('span')
    hourTxt.textContent = now.getHours()
    digitalHour.appendChild(hourTxt)
}

setInterval(setDigitalClock, 1000)

html {
  background: rgb(237, 245, 250);
  background-size: cover;
  font-family: 'helvetica neue';
  text-align: center;
  font-size: 10px;
}

body {
  margin: 0;
  font-size: 2rem;
  margin-top: 10%;
}

.digital{
  padding: 1rem;
  font-size: 3rem;
}
.clock {
  width: 30rem;
  height: 30rem;
  border: 20px solid white;
  border-radius: 50%;
  margin: auto;
  position: relative;
  padding: 2rem;
}

.clock-face {
  position: relative;
  width: 100%;
  height: 100%;
  transform: translateY(-3px);
  /* account for the height of the clock hands */
}

.hand,
.dot {
  width: 50%;
  height: 8px;
  position: absolute;
  top: 50%;
  transform-origin: 100%;
  transform: rotate: 90(90deg);
  transition: all .05s;
  transition-timing-function: cubic-bezier(.1, 2.7, .58, 1)
}

.second-hand {
  background: blue;
  width: 30%;
  margin-left: 60px;
}

.min-hand {
  background: yellow;
  width: 40%;
  margin-left: 30px;
}

.hour-hand {
  background: red;
}

.dot {
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  margin-left: 47%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>JS + CSS Clock</title>
  <link rel="stylesheet" href="/styles.css">
</head>

<body>

    <div class="digital">
        <div class="sec"></div>
        <div class="min"></div>
        <div class="hour"></div>
    </div>

  <div class="clock">
    <div class="clock-face">
      <div class="hand hour-hand"></div>
      <div class="hand min-hand"></div>
      <div class="hand second-hand"></div>
      <div class="dot"></div>
    </div>
  </div>

<script src="/app.js"></script>

</body>
</html>

【问题讨论】：

标签： javascript html css clock

【解决方案1】：

每次调用 setDigitalClock() 时都会添加 span 元素。

最简单、最有效的方法是根本不追加。

  digitalSec.innerText = now.getSeconds();
  digitalMin.innerText = now.getMinutes();
  digitalHour.innerText = now.getHours();

这更简单，并且不会每秒添加和删除元素，这很昂贵。
这里也是codepen

【讨论】：

【解决方案2】：

function setDigitalClock() {

    const now = new Date()
    document.querySelector(".sec").innerText = `${now.getSeconds()}`;
    document.querySelector(".min").innerText = `${now.getMinutes()}`;
    document.querySelector(".hour").innerText = `${now.getHours()}`;
}

已编辑：正如下面的评论所暗示的。

这应该做你需要做的。

【讨论】：

document.querySelector(".sec") 将只获得一个节点，因此您不必使用 [0] 取消引用，并且由于您只是在节点中设置纯文本，您可以使用 .innerText 这是比.innerHTML“便宜”

【解决方案3】：

这里的问题是，每次您向数字时钟添加 3 个新节点时。

你应该做的是删除以前的内容，然后追加新节点。

即。而不是digitalSec.appendChild(secTxt) 你应该这样做

digitalSec.innerHTML = ''
digitalSec.appendChild(secTxt)

分钟和小时也一样。

这是一个codepen，如前所述。

也可以全部替换

    // set seconds
    const secTxt = document.createElement('span')
    secTxt.textContent = now.getSeconds()
    digitalSec.innerHTML = ''
    digitalSec.appendChild(secTxt)

    // set minutes
    const minTxt = document.createElement('span')
    minTxt.textContent = now.getMinutes()
    digitalMin.innerHTML = ''
    digitalMin.appendChild(minTxt)

    // set hours
    const hourTxt = document.createElement('span')
    hourTxt.textContent = now.getHours()
    digitalHour.innerHTML = ''
    digitalHour.appendChild(hourTxt)

使用以下内容（如果您不关心那个额外的跨度）

    // set seconds
    digitalSec.innerHTML = now.getSeconds()

    // set minutes
    digitalMin.innerHTML = now.getMinutes()

    // set hours
    digitalHour.innerHTML = now.getHours()

【讨论】：

【解决方案4】：

另一种方法是这样的：

function clock () {
  // set variables for the clock:
  var currentTime = new Date ();
  var currentHours = currentTime.getHours ();
  var currentMinutes = currentTime.getMinutes ();
  var currentSeconds = currentTime.getSeconds ();

  // add leading zeros,
  currentHours = ( currentHours < 10 ? "0" : "" ) + currentHours;
  currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
  currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;
  
  var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds;   // put it all together 
  document.getElementById("clock").textContent = currentTimeString;   // Update display
}
window.addEventListener('load', function() {setInterval('clock()', 1000) }); // activate the clock;

&lt;span id="clock"&gt;&lt;/span&gt;

【讨论】：