You're looking for the setInterval
function, which runs a function every x milliseconds.
For example:
var start = new Date;
setInterval(function() {
$('.Timer').text((new Date - start) / 1000 + " Seconds");
}, 1000);
setInterval as suggested by SLaks was exactly what I needed to make my timer. (Thanks mate!)
Using setInterval and this great blog post I ended up creating the following function to display a timer inside my "box_header" div. I hope this helps anyone else with similar requirements!
function get_elapsed_time_string(total_seconds) {
function pretty_time_string(num) {
return ( num < 10 ? "0" : "" ) + num;
}
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);
// Pad the minutes and seconds with leading zeros, if required
hours = pretty_time_string(hours);
minutes = pretty_time_string(minutes);
seconds = pretty_time_string(seconds);
// Compose the string for display
var currentTimeString = hours + ":" + minutes + ":" + seconds;
return currentTimeString;
}
var elapsed_seconds = 0;
setInterval(function() {
elapsed_seconds = elapsed_seconds + 1;
$('#box_header').text(get_elapsed_time_string(elapsed_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;
}
if (m < 10) {
m = "0" + m;
}
$("h1").text(h+" : "+m+" : "+s);
setTimeout(function(){getdate()}, 500);
}
$("button").click(getdate);
});
################## HTML ###################
<button>start clock</button>
<h1></h1>
How about the best of both worlds? I combined the answer with the OP's format.
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);
A 24 hour clock:
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>
If you can use jQuery with Moment.js (great library), this is the way:
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);
}
Start clock initialization with crInitClock()
. It's done this way to synchronize seconds. Without synchronization, you would start 1 second timer in half of second and it will be half second late after real time.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With