javascript - temporizador - reloj jquery

Cómo crear un reloj/temporizador JQuery (9)

¿Qué tal lo mejor de ambos mundos? Combiné la respuesta con el formato del OP.

function pretty_time_string(num) { return ( num < 10 ? "0" : "" ) + num; } var start = new Date; setInterval(function() { var total_seconds = (new Date - start) / 1000; var hours = Math.floor(total_seconds / 3600); total_seconds = total_seconds % 3600; var minutes = Math.floor(total_seconds / 60); total_seconds = total_seconds % 60; var seconds = Math.floor(total_seconds); hours = pretty_time_string(hours); minutes = pretty_time_string(minutes); seconds = pretty_time_string(seconds); var currentTimeString = hours + ":" + minutes + ":" + seconds; $(''.timer'').text(currentTimeString); }, 1000);

Tengo una aplicación de cuestionario simple y quiero mostrar un buen temporizador / reloj en la parte superior de la página que muestra al usuario cuánto tiempo han estado buscando. (Si de alguna manera pudiera mostrarles un temporizador para Total Quiz Time y también un segundo para This Question Time, sería aún más genial, pero debería ser capaz de resolver cómo hacerlo yo mismo una vez que tengo un temporizador funcionando.

Mi pregunta es:

¿Cuál es una forma sencilla y agradable de mostrar un temporizador / reloj simple usando JQuery? (JS directo también está bien) Sé cómo controlar el tiempo, pero ¿cómo puedo obtener incrementos de segundos?

Mis propias búsquedas me siguen llevando a los complementos de JQuery (quiero lanzar los míos) y también a los "temporizadores de eventos" que no son lo que estoy buscando ...

Si puedes usar jQuery con Moment.js (gran biblioteca), esta es la forma:

var crClockInit1 = null; var crClockInterval = null; function crInitClock() { crClockInit1 = setInterval(function() { if (moment().format("SSS") <= 40) { clearInterval(crClockInit1); crStartClockNow(); } }, 30); } function crStartClockNow() { crClockInterval = setInterval(function() { $(''#clock'').html(moment().format(''D. MMMM YYYY H:mm:ss'')); }, 1000); }

Inicie la inicialización del reloj con crInitClock() . Se hace de esta manera para sincronizar segundos. Sin sincronización, iniciaría un temporizador de 1 segundo en la mitad del segundo y tardará medio segundo más tarde en tiempo real.

Un reloj de 24 horas:

setInterval(function(){ var currentTime = new Date(); var hours = currentTime.getHours(); var minutes = currentTime.getMinutes(); var seconds = currentTime.getSeconds(); // Add leading zeros minutes = (minutes < 10 ? "0" : "") + minutes; seconds = (seconds < 10 ? "0" : "") + seconds; hours = (hours < 10 ? "0" : "") + hours; // Compose the string for display var currentTimeString = hours + ":" + minutes + ":" + seconds; $(".clock").html(currentTimeString); },1000);

// 24 hour clock setInterval(function() { var currentTime = new Date(); var hours = currentTime.getHours(); var minutes = currentTime.getMinutes(); var seconds = currentTime.getSeconds(); // Add leading zeros hours = (hours < 10 ? "0" : "") + hours; minutes = (minutes < 10 ? "0" : "") + minutes; seconds = (seconds < 10 ? "0" : "") + seconds; // Compose the string for display var currentTimeString = hours + ":" + minutes + ":" + seconds; $(".clock").html(currentTimeString); }, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="clock"></div>

setInterval como lo sugirió SLaks era exactamente lo que necesitaba para hacer mi temporizador. (¡Gracias amigo!)

Usando setInterval y esta gran publicación de blog , terminé creando la siguiente función para mostrar un temporizador dentro de mi div "box_header". ¡Espero que esto ayude a cualquier persona con requisitos similares!

Está buscando la función setInterval , que ejecuta una función cada x milisegundos.

Por ejemplo:

var start = new Date; setInterval(function() { $(''.Timer'').text((new Date - start) / 1000 + " Seconds"); }, 1000);

################## JQuery (use API) ################# $(document).ready(function(){ function getdate(){ var today = new Date(); var h = today.getHours(); var m = today.getMinutes(); var s = today.getSeconds(); if(s<10){ s = "0"+s; } $("h1").text(h+" : "+m+" : "+s); setTimeout(function(){getdate()}, 500); } $("button").click(getdate); }); ################## HTML ################### <button>start clock</button> <h1></h1>

Hola, tengo una tarea similar que implica crear un reloj de cuenta atrás de Javascript. Aquí está el código que utilicé. Conecte el código anterior entre las etiquetas <script language = "Javascript"> </ script>. Tenga en cuenta que solo tener este javascript no hará mucho si no tiene el html para mostrar el reloj. Dejaré de escribir el html para ti. Diseña el reloj como quieras.