web-dev-qa-db-de.com

Wie zeige ich die aktuelle Uhrzeit in JavaScript im Format HH: MM: SS an?

Kannst du mir bitte sagen, wie man die Zeit in diesem Format einstellt HH: MM: SS. Ich möchte das in einem div einstellen?

javascriptdatedatetime
63
user2648752
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 nur mit javaScript

Update

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();
})();
85
Tushar Gupta - curioustushar

Sie können die native Funktion Date.toLocaleTimeString() verwenden:

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

Dies wird z. B. angezeigt:

"11:33:01"

Ich habe es auf http://www.w3schools.com/jsref/jsref_tolocaletimestring.asp gefunden.

63
pstryk

Sie können dies in Javascript tun.

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

Derzeit gibt es 15:5:18 zurück. Beachten Sie, dass bei Werten unter 10 nur eine, nicht zwei Ziffern angezeigt werden. 

Überprüfen Sie dies in JSFiddle

Aktualisierung:
Für vorangestellte Nullen versuchen

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

Sie können dazu moment.js verwenden.

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

Ausgänge:

16:30:03
34
brandonscript
(new Date).toTimeString().slice(0,8)

Beachten Sie, dass toLocaleTimeString () möglicherweise etwas wie 9:00:00 AM zurückgibt.

16
Thorsten

Dieser Code gibt die aktuelle Uhrzeit im HH: MM: SS-Format in der Konsole aus und berücksichtigt GMT-Zeitzonen.

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
1
vanjavk

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>

Ein sehr einfacher Weg mit moment.js und setInterval .

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

Beispielausgabe

Wenn setInterval() auf 1000 ms oder 1 Sekunde eingestellt ist, wird die Ausgabe alle 1 Sekunde aktualisiert.

15:25:50

So verwende ich diese Methode in einem meiner Nebenprojekte.

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

Vielleicht fragen Sie sich, ob die Verwendung von setInterval() einige Leistungsprobleme verursachen würde. 

Ist setInterval CPU intensiv?

Ich denke nicht, dass setInterval von Natur aus erhebliche Leistungsprobleme verursachen wird. Ich vermute, der Ruf könnte aus einer früheren Zeit stammen, als die CPUs weniger stark waren. ... - Lonesomeday

Nein, setInterval ist an und für sich nicht CPU-intensiv. Wenn viele Intervalle in sehr kurzen Zyklen laufen (oder eine sehr komplexe Operation in einem mäßig langen Intervall), kann dies je nach CPU-Intensität leicht werden genau, was deine Intervalle machen und wie oft sie es tun ... - aroth

Aber im Allgemeinen kann setInterval wirklich sehr viel auf Ihrer Website sein, was die Geschwindigkeit verlangsamt. 20 gleichzeitige Laufen mit mehr oder weniger schwerer Arbeit wirken sich auf die Show aus. Und dann wieder ... Sie können wirklich jeden Teil vermasseln, den ich vermute das ist kein Problem von setInterval. ... - jAndy

0
Vadamadafaka

Dies ist ein Beispiel für das Festlegen der Uhrzeit in einem div (only_time) mithilfe von 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>
0
A.S.Abir