จะแสดงเวลาปัจจุบันใน JavaScript ในรูปแบบ HH: MM: SS ได้อย่างไร?

ช่วยบอกวิธีตั้งเวลาในรูปแบบนี้ HH: MM: SS ได้ไหมฉันต้องการตั้งค่านี้เป็น 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โดยใช้ 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();
})();

คุณสามารถใช้ฟังก์ชันเนทีฟDate.toLocaleTimeString():

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

สิ่งนี้จะแสดงเช่น:

"11:33:01"

ฉันพบที่http://www.w3schools.com/jsref/jsref_tolocaletimestring.asp

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

คุณสามารถทำได้ในJavascript.

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

15:5:18ที่ผลตอบแทนมันปัจจุบัน โปรดทราบว่าหากค่าใด ๆ น้อยกว่า 10 ค่าจะแสดงโดยใช้ตัวเลขเพียงหลักเดียวไม่ใช่สองหลัก

ตรวจสอบสิ่งนี้ในJSFiddle

อัปเดต:
สำหรับคำนำหน้า 0 ลอง

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

คุณสามารถใช้moment.jsเพื่อทำสิ่งนี้

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

ผลลัพธ์:

16:30:03

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

โปรดทราบว่า toLocaleTimeString () 9:00:00 AMจะกลับมาบางอย่างเช่น

ใช้วิธีนี้:

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

ผลลัพธ์: 18:56:31

รหัสนี้จะแสดงเวลาปัจจุบันในรูปแบบ 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

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 วินาที

15:25:50 น

นี่คือวิธีที่ฉันใช้วิธีนี้กับหนึ่งในโครงการด้านข้างของฉัน

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

บางทีคุณอาจสงสัยว่าการใช้setInterval()จะทำให้เกิดปัญหาด้านประสิทธิภาพหรือไม่

setInterval CPU เข้มข้นหรือไม่

ฉันไม่คิดว่า setInterval จะทำให้คุณมีปัญหาด้านประสิทธิภาพที่สำคัญ ฉันสงสัยว่าชื่อเสียงอาจมาจากยุคก่อนเมื่อซีพียูมีประสิทธิภาพน้อยกว่า ... - วันเหงา

ไม่ setInterval ไม่ใช่ CPU ที่เข้มข้นในตัวมันเอง หากคุณมีช่วงเวลาจำนวนมากที่ทำงานในรอบสั้น ๆ (หรือการดำเนินการที่ซับซ้อนมากซึ่งทำงานในช่วงเวลาที่ยาวนานพอสมควร) สิ่งนั้นอาจกลายเป็น CPU ที่เข้มข้นได้อย่างง่ายดายขึ้นอยู่กับช่วงเวลาที่คุณทำและความถี่ที่พวกเขาทำ ... - อาโร ธ

แต่โดยทั่วไปแล้วการใช้ setInterval มาก ๆ บนไซต์ของคุณอาจทำให้สิ่งต่างๆช้าลง ช่วงเวลาที่วิ่งพร้อมกัน 20 ครั้งโดยมีงานหนักมากหรือน้อยจะส่งผลต่อการแสดง แล้วอีกครั้ง .. คุณสามารถทำส่วนใดส่วนหนึ่งที่ยุ่งเหยิงได้ฉันเดาว่าไม่ใช่ปัญหาของ setInterval ... - jAndy

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

it-ITสถานที่เกิดเหตุที่เกิดขึ้นกับแผ่นชั่วโมงถ้าจำเป็นและละเว้น PM หรือน01:33:01

นี่คือตัวอย่างวิธีการตั้งเวลาใน div (only_time) โดยใช้ 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()