00:00 형식으로 라이브 시계 만들기
Nov 26 2020
00:00 형식으로 라이브 시계를 어떻게 만들 수 있습니까? 아래에 내 코드를 포함했습니다. 이 작업을 더 잘 수행하거나 더 짧은 코드로 수행 할 수있는 방법이 있습니까?
HTML
<body onload=display_ct();>
<span id='ct'></span>
이제 자바 스크립트 부분 만 추가하면됩니다. 이렇게하면 매초마다 시계가 새로 고쳐져 " 라이브 "가됩니다. 또한 getMinutes현재 시간을 가져 오는 것과 같은 기능을 사용합니다 .
자바 스크립트
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값에 선행 0을 추가 할 수 있습니다 .
추신 : 시간과 분만 표시하기 때문에 시계는 초가 아닌 1 분마다 업데이트됩니다 (기능은 여전히 1 초마다 실행 됨).
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>