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

Question

我正在尝试显示当前时间，但是随着时间的流逝，新的时间实例会添加到 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>

Answer 1

这里的问题是，每次您向数字时钟添加 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()

Answer 2

您每次调用 setDigitalClock() 时都在附加 span 元素。

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

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

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

Answer 3

另一种方法是这样的：

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;

<span id="clock"></span>

Answer 4

function setDigitalClock() {

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

已编辑：如以下评论所示。

这应该可以完成您需要做的事情。

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

How to auto replace past seconds/ minutes/ hours with current time in a clock application

html

javascript

css

clock