¿Cómo mostrar la hora actual en JavaScript en el formato HH: MM: SS?

96

¿Puede decirme cómo configurar la hora en este formato HH: MM: SS. Quiero configurar esto en un div?

usuario2648752
fuente
Aquí está mi código ... jsfiddle.net/naveennsit/yd99X
user2648752
1
Pero el problema es que tiene PM y AP. No lo necesito. Segundo formato 24
user2648752
@ user2648752 comprobar mi respuesta demo jsfiddle.net/cse_tushar/fKKSb
Tushar Gupta - curioustushar
1
Um ... ¿Por qué la pregunta está etiquetada como fecha , aunque el usuario pregunta la hora?
Lloyd Dominic

Respuestas:

104

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 usando solo javaScript

Actualizar

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
fuente
111

Puede usar la función nativa Date.toLocaleTimeString():

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

Esto mostrará, por ejemplo:

"11:33:01"

Lo encontré en http://www.w3schools.com/jsref/jsref_tolocaletimestring.asp

pstryk
fuente
5
Creo que esta debería ser la respuesta aceptada, porque responde exactamente a la pregunta, usa una función nativa y es el código de trabajo más corto para obtener lo que se solicita.
vchrizz
10
3:59:45 PM es lo que me dio. Ese no es el formato solicitado.
Ivan
toLocaleTimeString no es una función
Usuario
59

Puedes hacer esto en Javascript.

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

En la actualidad vuelve 15:5:18. Tenga en cuenta que si alguno de los valores es inferior a 10, se mostrará utilizando solo un dígito, no dos.

Compruebe esto en JSFiddle

Actualizaciones:
para los 0 con prefijo intente

var time = new Date();
console.log(
    ("0" + time.getHours()).slice(-2)   + ":" + 
    ("0" + time.getMinutes()).slice(-2) + ":" + 
    ("0" + time.getSeconds()).slice(-2));
Praveen
fuente
Por favor responda esta pregunta. stackoverflow.com/questions/18227667/…
user2648752
Por favor responda esta pregunta. Necesito mostrar la hora en la primera columna.
user2648752
sí, pero necesito agregar tres columnas como está escrito en la pregunta. Por favor, lea la pregunta del señor. Necesito agregar tiempo en la primera columna y datos en tiempo real en la segunda columna
user2648752
Debe tener en cuenta los minutos y segundos <10, como hizo Tushar en su respuesta, o de lo contrario no mostrará un "0" inicial.
keepitreal
@CleverGirl Estaba tratando de dar una respuesta simple, así que escribí eso. Como mencionó acerca de los 0 con prefijo, me gustaría hacer esto con la respuesta de @ user113716, que se ha representado muy claramente.
Praveen
40

Puedes usar moment.js para hacer esto.

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

Salidas:

16:30:03
brandonscript
fuente
4
Gracias remus. Nunca más volveré a caer por la siniestra madriguera de las manipulaciones js datetime.
matlembo
¡Gracias hombre! ¡Todos los demás hacen que todo sea tan complicado! ¡Esta es la respuesta más sucinta para alguien que necesita tomar una línea rápida de código para algo simple!
ChairmanMeow
5
¡Oculte los 120 bytes que se necesitan para hacer esto al incluir un script de 20k +! genio
Frumbert
1
Oye, no estoy diciendo que siempre debas usarlo, pero si ya lo estás, ¿por qué no hacerlo de la manera más fácil? 😉
brandonscript
27
new Date().toTimeString().slice(0,8)

Tenga en cuenta que toLocaleTimeString () podría devolver algo como 9:00:00 AM.

Thorsten
fuente
1
Esta es la primera vez que veo a alguien hacer un ejemplo de código creando una instancia de fecha sin nueva Fecha () ... ¿es normal usar (nueva Fecha)?
OG Sean
5

Utilice de esta manera:

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

Resultado: 18:56:31

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

Una forma muy sencilla de usar moment.js y setInterval .

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

Salida de muestra

Si se setInterval()establece en 1000 ms o 1 segundo, la salida se actualizará cada 1 segundo.

3:25:50 pm

Así es como utilizo este método en uno de mis proyectos paralelos.

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

Quizás se esté preguntando si el uso setInterval()causaría algunos problemas de rendimiento.

¿Sobrecarga setInterval la CPU?

No creo que setInterval te cause problemas de rendimiento importantes de forma inherente. Sospecho que la reputación puede provenir de una época anterior, cuando las CPU eran menos potentes. ... - día solitario

No, setInterval no consume mucha CPU en sí mismo. Si tiene muchos intervalos que se ejecutan en ciclos muy cortos (o una operación muy compleja que se ejecuta en un intervalo moderadamente largo), entonces eso puede convertirse fácilmente en un uso intensivo de la CPU, dependiendo exactamente de lo que estén haciendo sus intervalos y con qué frecuencia lo estén haciendo. ... - aroth

Pero en general, usar setInterval como mucho en su sitio puede ralentizar las cosas. 20 intervalos de ejecución simultánea con trabajo más o menos pesado afectarán al espectáculo. Y de nuevo ... realmente puedes estropear cualquier parte, supongo que no es un problema de setInterval. ... - jAndy

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

El it-ITlugar rellena la hora si es necesario y omite PM o AM01:33:01

iamnotsam
fuente
¿Qué ofrece este código de solo respuesta sobre las soluciones existentes que muestran cómo usarlo .toLocaleTimeString()?
Jason Aller
la parte 'it-IT' significa que genera exactamente como se solicitó console.log (event.toLocaleTimeString ('it-IT')); // salida esperada: 01:15:30 si no incluye 'it-IT' entonces obtendrá algo como 1:15:30 PMque pierde el 0 inicial y agrega 'PM` que tendría que eliminar de lo contrario. Edité mi respuesta para aclarar eso.
iamnotsam
1

Este código generará la hora actual en formato HH: MM: SS en la consola, tiene en cuenta las zonas horarias 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
vanjavk
fuente
0

Este es un ejemplo de cómo configurar el tiempo en un div (only_time) usando 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
fuente
Si bien este bloque de código puede responder la pregunta, sería mejor si pudiera proporcionar una pequeña explicación de por qué lo hace.
Peter
0
new Date().toLocaleTimeString()
Dilushan
fuente