function time(){
var d = new Date();
var s = d.getSeconds();
var m = d.getMinutes();
var h = d.getHours();
document.write(h + ":" + m + ":" + s);
}
setInterval(time,1000);
添加一个标签并更新其文本内容。
var span = document.getElementById('span');
function time() {
var d = new Date();
var s = d.getSeconds();
var m = d.getMinutes();
var h = d.getHours();
span.textContent =
("0" + h).substr(-2) + ":" + ("0" + m).substr(-2) + ":" + ("0" + s).substr(-2);
}
setInterval(time, 1000);<span id="span"></span>答案更新 [2022] https://dev59.com/AVkS5IYBdhLWcg3w05eT#67149791
window.onload = displayClock();
function displayClock(){
var display = new Date().toLocaleTimeString();
document.body.innerHTML = display;
setTimeout(displayClock, 1000);
}new Date().toLocaleTimeString()。
setInterval(() => console.log(new Date().toLocaleTimeString()),1000);
以下是我的回答，希望能对你有所帮助。
<html>
<body>
<script type="text/javascript" charset="utf-8">
let a;
let time;
setInterval(() => {
a = new Date();
time = a.getHours() + ':' + a.getMinutes() + ':' + a.getSeconds();
document.getElementById('time').innerHTML = time;
}, 1000);
</script>
<span id="time"></span>
</body>
</html>我使用了 setInterval 箭头函数，并声明了变量 a, time 在外部，以避免重复分配内存。这里的 标记在指定的间隔时间（这里是1000）运行，而 document.getElementById("time") 调用将获取指定ID的元素，并设置该元素的 innerHTML 值为 time 的值。
请点击此链接https://codepen.io/uniqname/pen/eIApt，你将获得你想要的时钟或者尝试这段代码。
<!DOCTYPE html>
<html>
<head>
<script>
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
这段代码将以数字格式显示时钟
function myClock() {
setTimeout(function() {
const d = new Date();
const n = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = n;
myClock();
}, 1000)
}
myClock(); <html>
<body>
<div id="demo"></div>
</body>
</html><html>
<head>
<script>
function clock() {
var clockDiv = document.querySelector("#clock");
return setInterval(() => {
let date = new Date();
let tick = date.toLocaleTimeString();
clockDiv.textContent = tick;
}, 1000);
}
</script>
</head>
<body onload="clock()">
<div id="clock"></div>
</body>
</html>如果这是你的问题根源
但是它不会替换当前时间，而是每秒打印一个新的时间。
那么你无法使Date对象响应，因为
JavaScript日期对象以平台独立的格式表示单个时刻。
如果您不希望每秒创建一个新对象，则可以注册专用Web worker，该工作程序每秒调用performance.now()，但这比仅创建Date对象更加耗费系统资源，后者只复制实际的系统时钟（因此不创建单独的进程来测量时间）。tl;dr: 就像您现在所做的那样，每秒创建一个新的Date对象。
你的document.write()问题的根源在于this:
因为document.write()会写入文档流，所以在已关闭（已加载）的文档上调用document.write() [在你的情况下是在setInterval中] 会自动调用document.open()，这将清除文档。
要更新页面的一部分，通常可以像@Pranav建议的那样设置某个元素的innerHTML。
const clock12 = document.getElementById('clock12')
const clock24 = document.getElementById('clock24')
// Concatenate a zero to the left of every single digit time frame
function concatZero(timeFrame) {
return timeFrame < 10 ? '0'.concat(timeFrame) : timeFrame
}
function realTime() {
let date = new Date()
let sec = date.getSeconds()
let mon = date.getMinutes()
let hr = date.getHours()
// 12 hour time
// If the hour equals 0 or 12, the remainder equals 0, so output 12 instead. (0 || 12 = 12)
clock12.textContent = `${concatZero((hr % 12) || 12)} : ${concatZero(mon)} : ${concatZero(sec)} ${hr >= 12 ? 'PM' : 'AM'}`
// 24 hour time
clock24.textContent = `${concatZero(hr)} : ${concatZero(mon)} : ${concatZero(sec)}`
}
setInterval(realTime, 1000)body,
html {
height: 100%;
display: grid;
}
div {
margin: auto;
font-size: 2rem;
font-family: consolas;
}<div>
<p id="clock12"></p>
<p id="clock24"></p>
</div>setInterval(function () {
const time = new Date().toTimeString().slice(0, 8);
span.textContent = time
}, 1000)<span id="span"></span>
document.write只是向文档添加内容，因此您将获得多行输出。您希望替换输出而不是继续添加它。 - VLAZ