00:00形式でライブクロックを作成する
Nov 26 2020
どうすれば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秒に等しいので、500msは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>回答
3 firatozcevahir Nov 26 2020 at 14:08
のsetInterval代わりにを使用する必要がありますsetTimeout。さらに、padStart()関数を使用して、string値に先行ゼロを追加できます。
追伸：時間と分のみを表示しているため、時計は秒ごとではなく分ごとに更新されます（関数は引き続き毎秒実行されます）
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>1 kernel Nov 26 2020 at 14:16
このようにメインページの内側または外側にjsを作成します
このコードのIDとしてMyClockDisplayを持つ要素が必要です
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>