Wie wird die aktuelle Uhrzeit in JavaScript im Format HH: MM: SS angezeigt?

93

Können Sie mir bitte sagen, wie ich die Zeit in diesem Format einstellen soll? HH: MM: SS. Ich möchte das in einem Div einstellen?

user2648752
quelle
Hier ist mein Code .. jsfiddle.net/naveennsit/yd99X
user2648752
1
Aber das Problem ist, dass es PM und AP hat. Ich brauche das nicht. Zweitens 24 Format
user2648752
@ user2648752 überprüfen Sie meine Antwort Demo jsfiddle.net/cse_tushar/fKKSb
Tushar Gupta - curioustushar
1
Ähm ... Warum ist die Frage mit einem Datum versehen , obwohl der Benutzer nach der Uhrzeit fragt?
Lloyd Dominic

Antworten:

102

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

Aktualisieren

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();
})();
Tushar Gupta - Curioustushar
quelle
109

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

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

Dies zeigt zB an:

"11:33:01"

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

pstryk
quelle
5
Ich denke, dies sollte die akzeptierte Antwort sein, da sie genau die Frage beantwortet, die native Funktion verwendet und der kürzeste Arbeitscode ist, um das zu bekommen, wonach gefragt wird.
Vchrizz
10
15:59:45 Uhr hat es mir gegeben. Das ist nicht das angeforderte Format.
Ivan
toLocaleTimeString ist keine Funktion
Benutzer
58

Sie können dies in tun Javascript.

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

Zur Zeit kehrt es zurück 15:5:18. Beachten Sie, dass bei einem der Werte unter 10 nur eine Ziffer und nicht zwei angezeigt werden.

Überprüfen Sie dies in JSFiddle

Updates:
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));
Praveen
quelle
Bitte beantworten Sie diese Frage. stackoverflow.com/questions/18227667/…
user2648752
Bitte beantworten Sie diese Frage. Ich muss die Zeit in der ersten Spalte anzeigen.
user2648752
Ja, aber ich muss drei Spalten hinzufügen, wie in Frage geschrieben. Bitte lesen Sie Sir Frage. Ich muss Zeit in der ersten Spalte und Echtzeitdaten in der zweiten Spalte
hinzufügen
Sie müssen Minuten und Sekunden <10 berücksichtigen, wie Tushar es in seiner Antwort getan hat, sonst wird keine führende "0" angezeigt.
Keepitreal
@CleverGirl Ich habe versucht, eine einfache Antwort zu geben, also habe ich das geschrieben. Da Sie über vorangestellte Nullen gesprochen haben, möchte ich dies mit der Antwort von @ user113716 tun , die sehr klar dargestellt wurde.
Praveen
40

Sie können moment.js verwenden , um dies zu tun.

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

Ausgänge:

16:30:03
Brandonscript
quelle
4
Danke remus. Ich werde nie wieder in das unrühmliche Kaninchenloch von js datetime Manipulationen fallen.
Matlembo
Danke, Mann! Jeder andere macht alles so kompliziert! Dies ist die prägnanteste Antwort für jemanden, der für eine einfache Sache eine kurze Codezeile benötigen!
VorsitzenderMeow
5
Verstecken Sie die 120 Bytes, die dazu erforderlich sind, indem Sie ein Skript mit mehr als 20.000 KB einfügen! Genie
Frumbert
1
Hey, ich sage nicht, dass Sie es immer verwenden sollten, aber wenn Sie es bereits sind, warum nicht auf einfache Weise 😉
Brandonscript
26
new Date().toTimeString().slice(0,8)

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

Thorsten
quelle
1
Dies ist das erste Mal, dass ich jemanden sehe, der ein Codebeispiel zum Instanziieren eines Datums ohne neues Datum () erstellt. Ist das normal (neues Datum)?
OG Sean
4

Verwenden Sie diesen Weg:

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

Ergebnis: 18:56:31

Thomas
quelle
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>

Eine sehr einfache Möglichkeit, moment.js und setInterval zu verwenden .

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

Beispielausgabe

Bei setInterval()Einstellung auf 1000 ms oder 1 Sekunde wird die Ausgabe alle 1 Sekunde aktualisiert.

15:25:50 Uhr

So verwende ich diese Methode bei einem meiner Nebenprojekte.

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

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

Ist setInterval CPU intensiv?

Ich glaube nicht, dass setInterval von Natur aus erhebliche Leistungsprobleme verursachen wird. Ich vermute, dass der Ruf aus einer früheren Zeit stammt, als die CPUs weniger leistungsfähig waren. ... - einsamer Tag

Nein, setInterval ist an und für sich nicht CPU-intensiv. Wenn viele Intervalle in sehr kurzen Zyklen ausgeführt werden (oder eine sehr komplexe Operation in einem mäßig langen Intervall), kann dies leicht CPU-intensiv werden, je nachdem, was genau Ihre Intervalle tun und wie häufig sie ausgeführt werden. ... - aroth

Aber im Allgemeinen kann die Verwendung von setInterval auf Ihrer Website die Dinge verlangsamen. 20 gleichzeitige Laufintervalle mit mehr oder weniger schwerer Arbeit wirken sich auf die Show aus. Und andererseits ... Sie können wirklich jeden Teil durcheinander bringen, von dem ich denke, dass er kein Problem von setInterval ist. ... - jAndy

Vadamadafaka
quelle
2
new Date().toLocaleTimeString('it-IT')

Das it-ITGebietsschema füllt die Stunde bei Bedarf auf und lässt PM oder AM weg01:33:01

iamnotsam
quelle
Was beantwortet dieser Code nur im Vergleich zu den vorhandenen Lösungen, die die Verwendung zeigen .toLocaleTimeString()?
Jason Aller
Der Teil 'it-IT' bedeutet, dass er genau wie gefragt ausgegeben wird console.log (event.toLocaleTimeString ('it-IT')); // erwartete Ausgabe: 01:15:30 Wenn Sie 'it-IT' nicht einschließen, erhalten Sie so etwas wie 1:15:30 PMdas , was die anfängliche 0 verfehlt, und fügt 'PM' hinzu, das Sie sonst entfernen müssten. Ich habe meine Antwort bearbeitet, um das zu klären.
Iamnotsam
1

Dieser Code gibt die aktuelle Zeit 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
vanjavk
quelle
0

Dies ist ein Beispiel für das Festlegen der Zeit 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>
ASAbir
quelle
Während dieser Codeblock die Frage beantworten kann, ist es am besten, wenn Sie eine kleine Erklärung dafür geben könnten, warum dies so ist.
Peter