如何在时钟应用程序中用当前时间自动替换过去的秒/分钟/小时
[英]How to auto replace past seconds/ minutes/ hours with current time in a clock application
问题描述
I'm trying to display the current time, however with the passing of each second, a new instance of the time is added to the div. 
我试图显示当前时间，但是随着时间的流逝，时间的新实例将添加到div中。
How can the current time replace the past times? 当前时间如何代替过去的时间？
I've tried to use a replace function, set the textContent to that replace function, but had no success. 我尝试使用替换功能，将textContent设置为该替换功能，但没有成功。 I'm confused because as you can see, the code that makes the analog clock reloads each second with the correct time and am not sure why this is not the case for designing the digital clock portion. 我很困惑，因为如您所见，使模拟时钟的代码在正确的时间每秒重新加载，并且不确定为什么设计数字时钟部分不是这种情况。
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>
4 个解决方案
解决方案1
1 已采纳 2019-07-10 21:07:42
You are appending span elements each time you call setDigitalClock(). 每次调用setDigitalClock（）时，都将附加跨度元素。
The easiest and most efficient way is not to even append at all. 最简单，最有效的方法是根本不添加。
digitalSec.innerText = now.getSeconds();
digitalMin.innerText = now.getMinutes();
digitalHour.innerText = now.getHours();
This is simpler and isn't adding and removing elements every second which is expensive. 这更简单，并且不会每秒添加和删除元素，这很昂贵。
Here is a codepen as well 这也是一个codepen
解决方案2
1 2019-07-10 21:27:39
function setDigitalClock() {
const now = new Date()
document.querySelector(".sec").innerText = `${now.getSeconds()}`;
document.querySelector(".min").innerText = `${now.getMinutes()}`;
document.querySelector(".hour").innerText = `${now.getHours()}`;
}
Edited: as the comment below suggests. 编辑：如下注释所示。
This should do what you need to do. 这应该做您需要做的。
解决方案3
0 2019-07-10 21:04:20
The problem here, is that every time you are appending 3 new nodes to your digital clock. 这里的问题是，每当您向数字时钟添加3个新节点时。
What you should do, is remove the previous content, and then append the new node. 您应该做的是删除先前的内容，然后附加新节点。
ie. 即。 instead of digitalSec.appendChild(secTxt) you should do 而不是digitalSec.appendChild(secTxt)您应该做
digitalSec.innerHTML = ''
digitalSec.appendChild(secTxt)
and the same for minutes and hours. 几分钟和几小时都一样。
Here is a codepen that works as mentioned. 这是一个如上所述的codepen 。
You can also replace the whole 您也可以替换整个
// 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)
with the following (if you don't care about that extra span) 以下内容（如果您不关心该额外跨度）
// set seconds
digitalSec.innerHTML = now.getSeconds()
// set minutes
digitalMin.innerHTML = now.getMinutes()
// set hours
digitalHour.innerHTML = now.getHours()
解决方案4
0 2019-07-10 21:10:46
A different approach would be something like that: 一种不同的方法是这样的：
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.