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

问题描述

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

标签： javascripthtmlcssclock

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

问题描述

解决方案

推荐阅读