Bagaimana cara menampilkan waktu saat ini di JavaScript dalam format HH: MM: SS?

Bisakah Anda memberi tahu saya cara menyetel waktu dalam format ini HH: MM: SS. Saya ingin menyetelnya dalam div?

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 hanya menggunakan javaScript

Memperbarui

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();
})();

Anda dapat menggunakan fungsi asli Date.toLocaleTimeString():

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

Ini akan menampilkan misalnya:

"11:33:01"

Saya menemukannya di http://www.w3schools.com/jsref/jsref_tolocaletimestring.asp

var d = new Date();
var n = d.toLocaleTimeString();
alert("The time is: \n"+n);

Anda dapat melakukan ini di Javascript.

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

Saat ini ia kembali 15:5:18. Perhatikan bahwa jika salah satu nilainya kurang dari 10, mereka akan ditampilkan hanya menggunakan satu digit, bukan dua.

Periksa ini di JSFiddle

Pembaruan:
Untuk percobaan dengan awalan 0

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

Anda dapat menggunakan moment.js untuk melakukan ini.

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

Keluaran:

16:30:03

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

Perhatikan bahwa toLocaleTimeString () mungkin mengembalikan sesuatu seperti 9:00:00 AM.

Gunakan cara ini:

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

Hasil: 18:56:31

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>

Cara yang sangat sederhana menggunakan moment.js dan setInterval .

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

Keluaran sampel

Menggunakan setInterval()set ke 1000ms atau 1 detik, output akan diperbarui setiap 1 detik.

15:25:50

Beginilah cara saya menggunakan metode ini di salah satu proyek sampingan saya.

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

Mungkin Anda bertanya-tanya apakah penggunaan setInterval()akan menyebabkan beberapa masalah kinerja.

Apakah CPU setInterval intensif?

Saya tidak berpikir setInterval secara inheren akan menyebabkan masalah kinerja yang signifikan bagi Anda. Saya menduga reputasinya mungkin berasal dari era sebelumnya, ketika CPU kurang kuat. ... - suatu hari nanti

Tidak, setInterval tidak membutuhkan CPU yang intensif. Jika Anda memiliki banyak interval yang berjalan pada siklus yang sangat pendek (atau operasi yang sangat kompleks yang berjalan pada interval yang cukup panjang), maka itu dapat dengan mudah menjadi intensif CPU, tergantung pada apa yang dilakukan interval Anda dan seberapa sering mereka melakukannya. ... - aroth

Tapi secara umum, menggunakan setInterval seperti banyak hal di situs Anda dapat memperlambat banyak hal. 20 secara bersamaan menjalankan interval dengan pekerjaan yang lebih atau kurang berat akan mempengaruhi pertunjukan. Dan sekali lagi .. Anda benar-benar dapat mengacaukan bagian mana pun. Saya rasa itu bukan masalah setInterval. ... - jAndy

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

The it-ITlokal terjadi pad jam jika diperlukan dan menghilangkan PM atau AM01:33:01

Kode ini akan menampilkan waktu saat ini dalam format HH: MM: SS di konsol, ini memperhitungkan zona waktu 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

Ini adalah contoh cara mengatur waktu dalam div (only_time) menggunakan javascript.

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>

new Date().toLocaleTimeString()