Làm cách nào để hiển thị thời gian hiện tại trong JavaScript ở định dạng HH: MM: SS?

Bạn có thể vui lòng cho tôi biết cách đặt thời gian ở định dạng này HH: MM: SS. Tôi muốn đặt thời gian đó trong một 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 chỉ sử dụng javaScript

Cập nhật

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

Bạn có thể sử dụng hàm gốc Date.toLocaleTimeString():

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

Điều này sẽ hiển thị ví dụ:

"11:33:01"

Tôi tìm thấy nó trên http://www.w3schools.com/jsref/jsref_tolocaletimestring.asp

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

Bạn có thể làm điều này trong Javascript.

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

Hiện tại nó trở lại 15:5:18. Lưu ý rằng nếu bất kỳ giá trị nào nhỏ hơn 10, chúng sẽ chỉ hiển thị bằng một chữ số, không phải hai.

Kiểm tra điều này trong JSFiddle

Cập nhật:
Để thử số 0 có tiền tố

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

Bạn có thể sử dụng moment.js để thực hiện việc này.

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

Kết quả đầu ra:

16:30:03

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

Lưu ý rằng toLocaleTimeString () có thể trả về một cái gì đó giống như 9:00:00 AM.

Sử dụng theo cách này:

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

Kết quả: 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>

Một cách rất đơn giản bằng cách sử dụng moment.js và setInterval .

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

Đầu ra mẫu

Sử dụng setInterval()đặt thành 1000ms hoặc 1 giây, đầu ra sẽ làm mới sau mỗi 1 giây.

3:25:50 chiều

Đây là cách tôi sử dụng phương pháp này cho một trong những dự án phụ của tôi.

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

Có thể bạn đang tự hỏi liệu việc sử dụng setInterval()có gây ra một số vấn đề về hiệu suất hay không.

CPU setInterval có chuyên sâu không?

Tôi không nghĩ rằng setInterval vốn dĩ sẽ gây ra cho bạn các vấn đề hiệu suất đáng kể. Tôi nghi ngờ danh tiếng có thể đến từ một thời đại trước đó, khi các CPU ít mạnh hơn. ... - một ngày nào đó

Không, setInterval không chuyên sâu về CPU. Nếu bạn có nhiều khoảng thời gian chạy trên các chu kỳ rất ngắn (hoặc một hoạt động rất phức tạp chạy trên một khoảng thời gian dài vừa phải), thì điều đó có thể dễ dàng trở nên tốn nhiều CPU, tùy thuộc vào chính xác khoảng thời gian của bạn đang làm gì và tần suất chúng thực hiện. ... - aroth

Nhưng nói chung, việc sử dụng setInterval thực sự thích trên trang web của bạn có thể làm chậm mọi thứ. 20 khoảng thời gian chạy đồng thời với ít nhiều công việc nặng nhọc sẽ ảnh hưởng đến chương trình. Và một lần nữa .. bạn thực sự có thể làm rối bất kỳ phần nào mà tôi đoán đó không phải là vấn đề của setInterval. ... - jAndy

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

Các it-ITđịa phương xảy ra với pad giờ nếu cần thiết và bỏ qua PM hay PM01:33:01

Mã này sẽ xuất ra thời gian hiện tại ở định dạng HH: MM: SS trong bảng điều khiển, nó tính đến múi giờ 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

Đây là một ví dụ về cách đặt thời gian trong một div (only_time) bằng cách sử dụng 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>