JavaScriptでHH:MM:SSの形式で現在の時刻を表示するにはどうすればよいですか?


96

この形式HH:MM:SSで時間を設定する方法を教えてください。これをdivで設定したいですか?


これが私のコードです。jsfiddle.net
naveennsit/

1
しかし問題は、PMとAPがあることです。これは必要ありません。2番目に24形式
user2648752

@ user2648752私の回答デモを確認してくださいjsfiddle.net/cse_tushar/fKKSb
Tushar Gupta-curioustushar 2013

1
ええと... ユーザーが時間を要求しているのに、質問にdateというタグが付けられているのはなぜですか?
ロイドドミニク、

回答:


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>

DEMOのみ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 2016

10
3:59:45 PMは私に与えたものです。これは要求された形式ではありません。
Ivan

toLocaleTimeStringは関数ではありません
ユーザー

59

これはで行うことができますJavascript

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

現在は戻ります15:5:18。いずれかの値が10未満の場合、2桁ではなく1桁のみを使用して表示されることに注意してください。

JSFiddleでこれを確認してください

更新:
接頭辞が0の場合

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

質問しなさいに読み書きようはいしかし、私は3列を追加する必要があります.Iは、最初の列と2列目のリアルタイムデータに時間を追加する必要が先生の質問
user2648752

Tusharが回答で行ったように、10分未満の分と秒を考慮する必要があります。そうしないと、先頭に「0」が表示されません。
keepitreal 2013

@CleverGirl私は簡単な答えを出そうとしていたので、それを書きました。接頭辞0について言及したので、これは非常に明確に描かれている@ user113716の回答で行いたいと思います。
Praveen

40

これを行うには、moment.jsを使用できます。

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

出力:

16:30:03

4
レムスありがとうございます。私は二度とjs日時操作の陰鬱なうさぎの穴に落ちることはありません。
matlembo 2015

ありがとう!他の誰もがすべてをとても複雑にします!これは、簡単なコード行を取得する必要がある人にとって最も簡潔な応答です。
ChairmanMeow

5
20k +スクリプトを含めることで、これを実行するために必要な120奇数バイトを非表示にします。天才
フランベルト

1
ねえ、私はあなたが常にそれを使用する必要があります言っていないんだけど、あなたがすでにある場合は、なぜそれを簡単な方法😉ない
brandonscript

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

toLocaleTimeString()はのようなものを返す可能性があることに注意してください9:00:00 AM


1
これは、誰かがnew Date()なしで日付をインスタンス化するコード例を作成するのを見たのはこれが初めてです...それは(new Date)を使用するのが普通ですか?
OG Sean

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()1000ミリ秒または1秒に設定し、出力は1秒ごとに更新されます。

3:25:50 pm

これは、サイドプロジェクトの1つでこの方法を使用する方法です。

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

多分あなたは使用setInterval()がいくつかのパフォーマンスの問題を引き起こすかどうか疑問に思っています。

setIntervalはCPUに負荷がかかりますか?

setIntervalが本質的にパフォーマンスの重大な問題を引き起こすとは思いません。私の評判は、CPUの性能が低下した初期の時代から来ているのではないかと思います。...-孤独な日

いいえ、setInterval自体はCPUに負荷をかけません。非常に短いサイクルで実行される多くの間隔(または適度に長い間隔で実行される非常に複雑な操作)がある場合、間隔が正確に何を実行しているかによって、CPUに負荷がかかりやすくなります。...-aroth

ただし、一般に、サイトで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>

このコードブロックが質問に答える可能性がありますが、なぜそうするのかについて少し説明を提供できれば最適です。
ピーター
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.