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

每次调用setDigitalClock（）时都将附加跨度元素。

最简单，最有效的方法是根本不添加。

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

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

Answer 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()}`;
}

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

这应该做您需要做的。

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

Answer 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;

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

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

4 个答案: