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

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

当前时间如何取代过去的时间？

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

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>

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

最简单和最有效的方法是根本不附加。

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

这更简单，并且不会每秒添加和删除元素，这很昂贵。
这也是一个代码笔

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

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

这应该做你需要做的事情。

这里的问题是，每次将 3 个新节点附加到数字时钟时。

您应该做的是删除之前的内容，然后附加新节点。

即代替digitalSec.appendChild(secTxt)你应该做

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

分钟和小时也是如此。

这是一个如上所述工作的代码笔。

您也可以更换整个

    // 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()

另一种方法是这样的：

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>

相关内容

最新更新

热门标签：