制作00:00格式的实时时钟



如何制作00:00格式的实时时钟?我在下面包含了我的代码。有没有一种方法可以做得更好或使用更短的代码?

HTML

<body onload=display_ct();>
<span id='ct'></span>

现在我们只需要添加javascript部分。这每秒刷新一次时钟直播";。它还使用类似getMinutes的函数来获取当前时间。

Javascript

function display_c(){
var refresh=1000; // Refresh rate in milli seconds
mytime=setTimeout('display_ct()',refresh)
}
function display_ct() {
var x = new Date()
x1 = x.getHours( )+ ":" +  x.getMinutes();
document.getElementById('ct').innerHTML = x1;
display_c();
}

1000毫秒可以用更多或更少的时间来交换。1000等于1秒,也就是说500毫秒等于0.5秒。

我将在这里的可执行文件中包含我的代码:

function display_c(){
var refresh=1000; // Refresh rate in milli seconds
mytime=setTimeout('display_ct()',refresh)
}
function display_ct() {
var x = new Date()
x1 = x.getHours( )+ ":" +  x.getMinutes();
document.getElementById('ct').innerHTML = x1;
display_c();
}
<body onload=display_ct();>
<span id='ct'></span>

您需要使用setInterval而不是setTimeout。此外,您可以使用padStart()函数将前导零添加到string值中。

Ps:因为您只显示小时和分钟,所以时钟将每分钟更新一次,而不是每秒钟更新一次。(功能仍然每秒运行一次(

function display_c() {
var refresh = 1000; // Refresh rate in milli seconds
mytime = setInterval(display_ct, refresh)
}
function display_ct() {
var x = new Date()
x1 = x.getHours().toString().padStart(2,0) + ":" + x.getMinutes().toString().padStart(2,0);
document.getElementById('ct').innerHTML = x1;
display_c();
}
<body onload=display_ct();>
<span id='ct'></span>

像这样在主页面内外制作一个js

您必须有一个以MyClockDisplay作为此代码 id的元素

function showTime() {
var date = new Date();
var h = date.getHours(); // 0 - 23
var m = date.getMinutes(); // 0 - 59
var s = date.getSeconds(); // 0 - 59
var session = "AM";
if (h == 0) {
h = 12;
}
if (h > 12) {
h = h - 12;
session = "PM";
}
h = h < 10 ? "0" + h : h;
m = m < 10 ? "0" + m : m;
s = s < 10 ? "0" + s : s;
var time = h + ":" + m + ":" + s + " " + session;
document.getElementById("MyClockDisplay").innerText = time;
document.getElementById("MyClockDisplay").textContent = time;
setTimeout(showTime, 1000);
}
showTime();
<div id="MyClockDisplay"></div>

最新更新