JavaScript에서 HH : MM : SS 형식으로 현재 시간을 표시하는 방법은 무엇입니까?


96

HH : MM : SS이 형식으로 시간을 설정하는 방법을 알려주세요. div에서 설정하고 싶습니다.


여기 내 코드입니다 .. jsfiddle.net/naveennsit/yd99X
user2648752

1
하지만 문제는 PM과 AP가 필요하지 않다는 것입니다. 두 번째 24 형식
user2648752 2013-08-14

@ user2648752 데모 내 대답 확인 jsfiddle.net/cse_tushar/fKKSb
curioustushar - Tushar 굽타

1
음 ... 사용자가 시간을 묻는데 왜 질문에 date 태그 가 붙었나요?
Lloyd Dominic

답변:


104

function checkTime(i) {
  if (i < 10) {
    i = "0" + i;
  }
  return i;
}

function startTime() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();
  // add a zero in front of numbers<10
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById('time').innerHTML = h + ":" + m + ":" + s;
  t = setTimeout(function() {
    startTime()
  }, 500);
}
startTime();
<div id="time"></div>

JavaScript 만 사용하는 데모

최신 정보

Updated Demo

(function () {
    function checkTime(i) {
        return (i < 10) ? "0" + i : i;
    }

    function startTime() {
        var today = new Date(),
            h = checkTime(today.getHours()),
            m = checkTime(today.getMinutes()),
            s = checkTime(today.getSeconds());
        document.getElementById('time').innerHTML = h + ":" + m + ":" + s;
        t = setTimeout(function () {
            startTime()
        }, 500);
    }
    startTime();
})();

111

기본 기능을 사용할 수 있습니다 Date.toLocaleTimeString().

var d = new Date();
var n = d.toLocaleTimeString();

예를 들어 다음과 같이 표시됩니다.

"11:33:01"

http://www.w3schools.com/jsref/jsref_tolocaletimestring.asp 에서 찾았습니다 .


5
나는 이것이 받아 들여지는 대답이어야한다고 생각하고, 질문에 정확히 대답하고, 기본 기능을 사용하고, 요청 된 것을 얻는 데 가장 짧은 작업 코드입니다.
vchrizz

10
3:59:45 PM이 제게 준 것입니다. 요청 된 형식이 아닙니다.
Ivan

toLocaleTimeString이 함수가 아닙니다
User

59

에서이 작업을 수행 할 수 있습니다 Javascript.

var time = new Date();
console.log(time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds());

현재 그것은 반환 15:5:18 . 값 중 하나가 10보다 작 으면 두 자리가 아닌 한 자리 만 사용하여 표시됩니다.

JSFiddle 에서 확인하십시오.

업데이트 :
접두사가 0 인 경우 try

var time = new Date();
console.log(
    ("0" + time.getHours()).slice(-2)   + ":" + 
    ("0" + time.getMinutes()).slice(-2) + ":" + 
    ("0" + time.getSeconds()).slice(-2));

이 질문에 대답하십시오. stackoverflow.com/questions/18227667/…
user2648752

첫 번째 열에 시간을 표시해야하는이 질문에 답하십시오.
user2648752 2013-08-14

예하지만 질문에 쓰여진대로 세 개의 열을 추가해야합니다. 선생님 질문을 읽어주세요. 첫 번째 열에 시간을 추가하고 두 번째 열에 실시간 데이터를 추가해야합니다
user2648752 2013-08-14

Tushar가 답변에서 한 것처럼 분과 초 <10을 고려해야합니다. 그렇지 않으면 선행 "0"이 표시되지 않습니다.
keepitreal dec

@CleverGirl 저는 간단한 대답을하려고했기 때문에 그것을 썼습니다. 접두사 0에 대해 언급 했으므로 매우 명확하게 묘사 된 @ user113716의 답변으로 이것을하고 싶습니다 .
Praveen

40

moment.js 를 사용 하여 이를 수행 할 수 있습니다 .

var now = new moment();
console.log(now.format("HH:mm:ss"));

출력 :

16:30:03

4
레무스 감사합니다. 다시는 js datetime 조작의 끔찍한 토끼 구멍에 빠지지 않을 것입니다.
matlembo

감사합니다! 다른 사람들은 모든 것을 너무 복잡하게 만듭니다! 이것은 간단한 일을 위해 빠른 코드 줄을 잡아야하는 사람에게 가장 간결한 응답입니다!
ChairmanMeow

5
20k + 스크립트를 포함하여이를 수행하는 데 필요한 120 홀수 바이트를 숨기십시오! 천재
frumbert

1
이봐, 난 당신이 항상 그것을 사용해야한다는 말은 아니지만, 당신이 이미 사용하고 있다면, 왜 쉬운 방법을 사용하지 않습니까
brandonscript

27
new Date().toTimeString().slice(0,8)

toLocaleTimeString ()은 9:00:00 AM.


1
누군가가 new Date ()없이 날짜를 인스턴스화하는 코드 예제를 만드는 것을 본 것은 처음입니다 ... (new Date)를 사용하는 것이 정상입니까?
OG 숀

5

다음과 같이 사용하십시오.

var d = new Date();
localtime = d.toLocaleTimeString('en-US', { hour12: false });

결과 : 18:56:31


2

function realtime() {
  
  let time = moment().format('h:mm:ss a');
  document.getElementById('time').innerHTML = time;
  
  setInterval(() => {
    time = moment().format('h:mm:ss a');
    document.getElementById('time').innerHTML = time;
  }, 1000)
}

realtime();
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>

<div id="time"></div>

moment.jssetInterval을 사용하는 매우 간단한 방법 입니다.

setInterval(() => {
  moment().format('h:mm:ss a');
}, 1000)

샘플 출력

사용 setInterval()1000MS 또는 1 초로 설정, 출력은 1 초마다 리프레쉬한다.

3:25:50 오후

이것이 내 사이드 ​​프로젝트 중 하나에서이 방법을 사용하는 방법입니다.

setInterval(() => {
  this.time = this.shared.time;
}, 1000)

사용 setInterval()하면 성능 문제가 발생 하는지 궁금 할 것입니다.

setInterval CPU 집약적입니까?

나는 setInterval이 본질적으로 심각한 성능 문제를 일으킬 것이라고 생각하지 않습니다. CPU가 덜 강력했던 초기 시대에서 명성이 올 수 있다고 생각합니다. ...-외로운

아니요, setInterval은 그 자체로 CPU를 많이 사용하지 않습니다. 매우 짧은 주기로 많은 간격을 실행하는 경우 (또는 적당히 긴 간격으로 실행되는 매우 복잡한 작업) 간격이 정확히 무엇을하고 얼마나 자주 실행하는지에 따라 쉽게 CPU 집약적이 될 수 있습니다. ...-아 로스

그러나 일반적으로 사이트에서 setInterval을 많이 사용하면 속도가 느려질 수 있습니다. 다소 무거운 작업과 함께 20 개의 동시 실행 인터벌이 쇼에 영향을 미칩니다. 그리고 다시 .. setInterval의 문제가 아니라고 생각하는 부분을 엉망으로 만들 수 있습니다. ...-jAndy


2
new Date().toLocaleTimeString('it-IT')

그만큼 it-IT로케일이 필요한 경우 패드에 시간을 발생하고 PM 또는 AM을 생략01:33:01


이 코드는 사용 방법을 보여주는 기존 솔루션에 대해 무엇을 제공 .toLocaleTimeString()합니까?
Jason Aller

'it-IT'부분은 요청한대로 정확하게 출력 함을 의미합니다. console.log (event.toLocaleTimeString ( 'it-IT')); // 예상 출력 : 01:15:30 'it-IT'를 포함하지 않으면 1:15:30 PM초기 0을 놓치고 'PM'을 추가하는 것과 같은 결과 를 얻습니다 . 그렇지 않으면 제거해야합니다. 나는 그것을 정리하기 위해 내 대답을 편집했습니다.
iamnotsam

1

이 코드는 콘솔에서 HH : MM : SS 형식으로 현재 시간을 출력하며 GMT 시간대를 고려합니다.

var currentTime = Date.now()
var GMT = -(new Date()).getTimezoneOffset()/60;
var totalSeconds = Math.floor(currentTime/1000);
seconds = ('0' + totalSeconds % 60).slice(-2);
var totalMinutes = Math.floor(totalSeconds/60);
minutes = ('0' + totalMinutes % 60).slice(-2);
var totalHours = Math.floor(totalMinutes/60);
hours = ('0' + (totalHours+GMT) % 24).slice(-2);
var timeDisplay = hours + ":" + minutes + ":" + seconds;
console.log(timeDisplay);
//Output is: 11:16:55

0

javascript를 사용하여 div (only_time)에서 시간을 설정하는 방법의 예입니다.

function date_time() {
    var date = new Date();
    var am_pm = "AM";
    var hour = date.getHours();
    if(hour>=12){
        am_pm = "PM";
    }
    if (hour == 0) {
        hour = 12;
    }
    if(hour>12){
        hour = hour - 12;
    }
    if(hour<10){
        hour = "0"+hour;
    }

    var minute = date.getMinutes();
    if (minute<10){
        minute = "0"+minute;
    }
    var sec = date.getSeconds();
    if(sec<10){
        sec = "0"+sec;
    }

    document.getElementById("time").innerHTML =  hour+":"+minute+":"+sec+" "+am_pm;
}
setInterval(date_time,500);
<per>
<div class="date" id="time"></div>
</per>

이 코드 블록이 질문에 답할 수 있지만 그 이유에 대해 약간의 설명을 제공하는 것이 가장 좋습니다.
Peter
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.