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.js 및 setInterval을 사용하는 매우 간단한 방법 입니다.

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.