Develop Reference

Start javascript stopwatch from a specific dynamic value

Before asking the question I would like to inform you that I've already searched in the questions with related topics , but my issues are different from others. Actually, I am building a "Javascript stopwatch", but there are some issues in the script that I've tried and searched to solve but can't find none. There are there issues in the stopwatch:
The stopwatch restarts automatically when page reloads even though the timer was stopped by the "stop_btn".
The stopwatch restarts automatically with the time comparing starting time and present time when page reloads; the paused time is totally ignored !
Can the stopwatch be started from a specific dynamic value; something like PHP variable as:
$time = "01:06:39"; ?
The Javascript:
var timer;
var startTime;
var isRunning = false;
var waitedTime = 0;
var stoppedTime = 0;
function start() {
if (isRunning) return;
isRunning = true;
startTime = parseInt(localStorage.getItem('startTime') || Date.now());
if (timer) {
waitedTime += (Date.now() - stoppedTime);
}
localStorage.setItem('startTime', startTime);
timer = setInterval(clockTick, 100);
}
function stop() {
isRunning = false;
clearInterval(timer);
stoppedTime = Date.now();
}
function reset() {
isRunning = false;
stoppedTime = 0;
waitedTime = 0;
clearInterval(timer);
timer = undefined;
localStorage.removeItem('startTime');
document.getElementById('display-area').innerHTML = "00:00:00.000";
}
function clockTick() {
var currentTime = Date.now(),
timeElapsed = new Date(currentTime - startTime - waitedTime),
hours = timeElapsed.getUTCHours(),
mins = timeElapsed.getUTCMinutes(),
secs = timeElapsed.getUTCSeconds(),
ms = timeElapsed.getUTCMilliseconds(),
display = document.getElementById("display-area");
display.innerHTML =
(hours > 9 ? hours : "0" + hours) + ":" +
(mins > 9 ? mins : "0" + mins) + ":" +
(secs > 9 ? secs : "0" + secs) + "." +
(ms > 99 ? ms : ms > 9 ? "0" + ms : "00" + ms);
};
var stopBtn = document.getElementById('stop_btn');
var startBtn = document.getElementById('start_btn');
var resetBtn = document.getElementById('reset_btn');
stopBtn.addEventListener('click', function() {
stop();
});
startBtn.addEventListener('click', function() {
start();
});
resetBtn.addEventListener('click', function() {
reset();
})
start();
Can anyone help please ?

You can add this new variable and then use it in the start function. If the custom time is defined then localstorage or current date will be ignored.
var customStartTime = new Date() // enter your custom date in the Date() function.
Then modify the starttime in the start() function
startTime = customStartTime || parseInt(localStorage.getItem('startTime') || Date.now());

Have you considered using window.onload handler from which you can load stopwatch value after page reload, I think this should cover first 2 issues you mentioned.
Also when you reload page stoppedTime variable will be 0, use localStorage to cache stoppedTime.

Countdown Timer With Class

I have the following lines of code on my web page - example/demo.
HTML:
<p class="countdown-timer">10:00</p>
<p class="countdown-timer">10:00</p>
JavaScript:
function startTimer(duration, display) {
var start = Date.now(),
diff,
minutes,
seconds;
function timer() {
// get the number of seconds that have elapsed since
// startTimer() was called
diff = duration - (((Date.now() - start) / 1000) | 0);
// does the same job as parseInt truncates the float
minutes = (diff / 60) | 0;
seconds = (diff % 60) | 0;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (diff <= 0) {
// add one second so that the count down starts at the full duration
// example 05:00 not 04:59
start = Date.now() + 1000;
}
};
// we don't want to wait a full second before the timer starts
timer();
setInterval(timer, 1000);
}
$(document).ready(function(){
// set the time (60 seconds times the amount of minutes)
var tenMinutes = 60 * 10,
display = document.querySelector('.countdown-timer');
startTimer(tenMinutes, display);
});
As I'm relatively new to JavaScript/jQuery, how would I be able to make the timer stop on 0 and so that the second clock also works?
I have tried replacing document.querySelector('.countdown-timer'); with $('.countdown-timer');

I created a class to do that a while ago, for one of my projects. It allows you to have multiple counters, with different settings. It can also be configured to be paused or reset with a button, using the available functions. Have a look at how it's done, it might give you some hints:
/******************
* STOPWATCH CLASS
*****************/
function Stopwatch(config) {
// If no config is passed, create an empty set
config = config || {};
// Set the options (passed or default)
this.element = config.element || {};
this.previousTime = config.previousTime || new Date().getTime();
this.paused = config.paused && true;
this.elapsed = config.elapsed || 0;
this.countingUp = config.countingUp && true;
this.timeLimit = config.timeLimit || (this.countingUp ? 60 * 10 : 0);
this.updateRate = config.updateRate || 100;
this.onTimeUp = config.onTimeUp || function() {
this.stop();
};
this.onTimeUpdate = config.onTimeUpdate || function() {
console.log(this.elapsed)
};
if (!this.paused) {
this.start();
}
}
Stopwatch.prototype.start = function() {
// Unlock the timer
this.paused = false;
// Update the current time
this.previousTime = new Date().getTime();
// Launch the counter
this.keepCounting();
};
Stopwatch.prototype.keepCounting = function() {
// Lock the timer if paused
if (this.paused) {
return true;
}
// Get the current time
var now = new Date().getTime();
// Calculate the time difference from last check and add/substract it to 'elapsed'
var diff = (now - this.previousTime);
if (!this.countingUp) {
diff = -diff;
}
this.elapsed = this.elapsed + diff;
// Update the time
this.previousTime = now;
// Execute the callback for the update
this.onTimeUpdate();
// If we hit the time limit, stop and execute the callback for time up
if ((this.elapsed >= this.timeLimit && this.countingUp) || (this.elapsed <= this.timeLimit && !this.countingUp)) {
this.stop();
this.onTimeUp();
return true;
}
// Execute that again in 'updateRate' milliseconds
var that = this;
setTimeout(function() {
that.keepCounting();
}, this.updateRate);
};
Stopwatch.prototype.stop = function() {
// Change the status
this.paused = true;
};
/******************
* MAIN SCRIPT
*****************/
$(document).ready(function() {
/*
* First example, producing 2 identical counters (countdowns)
*/
$('.countdown-timer').each(function() {
var stopwatch = new Stopwatch({
'element': $(this), // DOM element
'paused': false, // Status
'elapsed': 1000 * 60 * 10, // Current time in milliseconds
'countingUp': false, // Counting up or down
'timeLimit': 0, // Time limit in milliseconds
'updateRate': 100, // Update rate, in milliseconds
'onTimeUp': function() { // onTimeUp callback
this.stop();
$(this.element).html('Go home, it\'s closing time.');
},
'onTimeUpdate': function() { // onTimeUpdate callback
var t = this.elapsed,
h = ('0' + Math.floor(t / 3600000)).slice(-2),
m = ('0' + Math.floor(t % 3600000 / 60000)).slice(-2),
s = ('0' + Math.floor(t % 60000 / 1000)).slice(-2);
var formattedTime = h + ':' + m + ':' + s;
$(this.element).html(formattedTime);
}
});
});
/*
* Second example, producing 1 counter (counting up to 6 seconds)
*/
var stopwatch = new Stopwatch({
'element': $('.countdown-timer-up'),// DOM element
'paused': false, // Status
'elapsed': 0, // Current time in milliseconds
'countingUp': true, // Counting up or down
'timeLimit': 1000 * 6, // Time limit in milliseconds
'updateRate': 100, // Update rate, in milliseconds
'onTimeUp': function() { // onTimeUp callback
this.stop();
$(this.element).html('Countdown finished!');
},
'onTimeUpdate': function() { // onTimeUpdate callback
var t = this.elapsed,
h = ('0' + Math.floor(t / 3600000)).slice(-2),
m = ('0' + Math.floor(t % 3600000 / 60000)).slice(-2),
s = ('0' + Math.floor(t % 60000 / 1000)).slice(-2);
var formattedTime = h + ':' + m + ':' + s;
$(this.element).html(formattedTime);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
These 2 timers should count down from 10 minutes to 0 seconds:
<p class="countdown-timer">00:10:00</p>
<p class="countdown-timer">00:10:00</p>
But this one will count from 0 to 6 seconds:
<p class="countdown-timer-up">00:00:00</p>

I think your problem is you are passing an array into the startTimer function so it is just doing it for the first item.
If you change the document ready so that you initiate a timer for each instance of .countdown-timer, it should work:
// set the time (60 seconds times the amount of minutes)
var tenMinutes = 60 * 10;
$('.countdown-timer').each(function () {
startTimer(tenMinutes, this);
});
Example

document.querySelector('.class') will only find first element with .class. If you're already using jQuery I would recommend to do this:
var display = $('.countdown-timer');
for (var i = 0; i < display.length; i++) {
startTimer(tenMinutes, display[i]);
}
This way it will work for any number of countdown timers.

Here we go, jsfiddle
just changed the querySelector to getElementsByClassName to get all p elements with the same class. You can than start your timer on the different elements by using it's index.
No need for a queue :D
$(document).ready(function(){
// set the time (60 seconds times the amount of minutes)
var tenMinutes = 60 * 10,
display = document.getElementsByClassName('countdown-timer');
startTimer(tenMinutes, display[0]);
startTimer(tenMinutes, display[1]);
});

Show a countdowntimer-script with DOM

I'm fairly new to DOM and the whole HTML and PHP Stuff so I'm seeking some information on how to do this. What I have until now is a Javascript. Now I want/have to use DOM to show this script. (FYI: I'm implementing something for Moodle and this has be done like this)
What I have found out about DOM is that I can change values of different Nodes. The problem I've found myself in is that all the examples I found were like. Click on a button and something happens. That's ok but now I want my script to run every second so I can the person who needs it can see that the time is running down.
I hope I gave you enough information and I hope you can help me. Thank you for trying to help me.
var running = false
var endTime = null
var timerID = null
// totalMinutes the amount of minutes is put into
var totalMinutes = 3;
function startTimer() {
// running is being started and the current time is put into the variable
running = true
now = new Date()
now = now.getTime()
// Variable endTime gets the time plus the maximum time
endTime = now + (1000 * 60 * totalMinutes);
showCountDown()
}
function showCountDown() {
// same as startTimer, time is saved in variable now
var now = new Date()
now = now.getTime()
if (endTime - now <= 0) {
// Variable timerID gets clearTimeout -->http://de.selfhtml.org/javascript/objekte/window.htm#clear_timeout
clearTimeout(timerID)
// boolean running set to false
running = false
alert("Ihr Resultat wird nun ausgewertet!")
} else {
// delta is being calculated
var delta = new Date(endTime - now)
var theMin = delta.getMinutes()
var theSec = delta.getSeconds()
var theTime = theMin
// show seconds and minutes
theTime += ((theSec < 10) ? ":0" : ":") + theSec
document.getElementById('CheckResults').innerHTML = " (Übung in " + theTime + " Minuten abgelaufen)"
if (running) {
timerID = setTimeout("showCountDown()",900)
}
}
}
</script>

You might want to use window.setInterval for a start. Here is a short example. Create a blank html page, put the script into the head section, and the markup into the body section. I wasn't able to post it with proper html and body tags
<script>
function countDownTimer(msecGranularity, output) {
var secRunningTime, startTime, endTime, onFinish, interval;
function heartBeat() {
var diff = endTime - new Date();
output.innerHTML = diff / 1000;
if (diff < 0) {
window.clearInterval(interval);
onFinish();
};
};
this.start = function (secRunningTime, finishHandler) {
onFinish = finishHandler;
startTime = new Date();
endTime = startTime.setSeconds(startTime.getSeconds() + secRunningTime);
interval = window.setInterval(heartBeat, msecGranularity);
}
};
function startTimer(duration, granularity) {
var output = document.createElement("div");
document.getElementById("timerOutputs").appendChild(output);
var t = new countDownTimer(granularity, output);
t.start(duration, function () { output.innerHTML = 'TIMER FINISHED' });
};
</script>
In the HTML place these to start the timer class.
<button onclick="startTimer(60,100)">Start a new 60 seconds timer with 100 msec granularity</button><br />
<button onclick="startTimer(600,1000)">Start a new 600 seconds timer with 1000 msec granularity</button>
<div id="timerOutputs">
</div>

Recurrent Javascript countdown

I have an annoying problem, i have trying to implement a simple 10 or 15 minute recurrent countdown. i have tried jQuery but it just gives me options to count down to a date and stops after the countdown is finished.
I found the below code Here but i cant figure it to remove the days and make it to count down for 10 or 15 minuters. Can someone please help me?
<div id="countre3">Loading...</div>
<script type="text/javascript">
function mycountre(o, timeArray){
var countre = document.getElementById(o);
if(!countre) {
return;
}
// helper functions
function mksec(day, h, m, s){ return day*24*60*60+h*60*60+m*60+s; }
function toTimeString(sec, showZero){
var d=Math.floor(sec/(60*60*24))
var h=Math.floor(sec/(60*60)%24);
var m=Math.floor((sec/60) % 60);
var s=sec % 60;
var ret=d+'days '+h+'hrs '+m+'min '+s+'sec';
if(showZero){
return ret;
}else if(d==0 && h==0 && m==0){
return s+'sec';
}else if(d==0){
return h+'hrs '+m+'min '+s+'sec';
}else if(d==0 && h==0){
return m+'min '+s+'sec';
}else {
return ret;
}
}
//
var secArray = [];
var dayNow = new Date().getDay();
for(var i=0;i<timeArray.length;i++){
var day=timeArray[i][0];
if(day==-1){
day=dayNow;
}
secArray.push({
day: timeArray[i][0],
sec: mksec(day, timeArray[i][2], timeArray[i][2], timeArray[i][3]),
msg: timeArray[i][4] || false,
showZero: timeArray[i][5] || false
});
}
secArray.sort(function(a,b){ return a.sec-b.sec;});
// timer code - will be called around each second (~1000 ms)
function updatecountre(){
// get current UTC time in seconds
var d=new Date();
var secNow = mksec(d.getDay(), d.getUTCHours(), d.getUTCMinutes(), d.getUTCSeconds());
// find next event
var nextIndex=0;
for(var i=0;i<secArray.length; i++){
var diff = secArray[i].sec-secNow;
if(diff>0){
nextIndex=i;
break;
}
}
//
var diff=secArray[nextIndex].sec-secNow;
var prevDiff=diff;
if(diff<0){
var dayDiff = 6-secArray[nextIndex].day;
if(secArray[nextIndex].day == -1){
dayDiff=0;
}
diff=(dayDiff+1)*24*60*60-Math.abs(diff);
}
var str='';
// get message if there is any set
if(secArray[nextIndex].msg){
str=secArray[nextIndex].msg;
}
var timeString = toTimeString(diff, secArray[nextIndex].showZero);
if(str.match('#{countre}')!=null){
str=str.replace(/#{countre}/, timeString);
}else if(str.indexOf(' ')==0){ // message starts with space
str=timeString+str;
}else{ // no specific hint where to put countre, so display it after message
str+=timeString;
}
countre.innerHTML=str;
}
setInterval(updatecountre, 1000);
};
mycountre('countre3', [ [5, 5, 0, 0, '<center><b>Next Turns are Due in </b><p class="smalltext"> #{countre}</center>', false] ]);
</script>

Try this:
function mycountre(countdownId, countdownSeconds, countdownLooping){
var countre = document.getElementById(countdownId); // get html element
if (!countre) {
return;
}
var target = new Date().getTime() + 1000 * countdownSeconds; // target time
var intervalId; // id of the interval
// update function
function updatecountre(){
var time = Math.floor((target - new Date().getTime()) / 1000); // countdown time in seconds
if (time < 0) { // if countdown ends
if (countdownLooping) { // if it should loop
target += 1000 * countdownSeconds; // set new target time
time = Math.floor((target - new Date().getTime()) / 1000); // recalculate current time
} else { // otherwise
clearInterval(intervalId); // clear interval
time = 0; // set time to 0 to avoid displaying negative values
}
}
// split time to seconds, minutes and hours
var seconds = '0' + (time % 60);
time = (time - seconds) / 60;
var minutes = '0' + (time % 60);
time = (time - minutes) / 60;
var hours = '0' + time;
// make string from splited values
var str = hours.substring(hours.length - 2) + ':' + minutes.substring(minutes.length - 2) + ':' + seconds.substring(seconds.length - 2);
countre.innerHTML = str;
}
intervalId = setInterval(updatecountre, 200); // start interval to execute update function periodically
};
mycountre(
'countre3', // id of the html element
15 * 60, // time in seconds (15min here)
true // loop after countdown ends?
);
Working demo: http://jsfiddle.net/Xv3jx/1/

Small attempt for a jQuery plugin - more generic without minute/hour calc to avoid that the exaple gets too big:
(function($) {
$.fn.countdown = function(params) {
this.each(function() {
container = $.extend({
t: $(this),
stepSize: 1000, // milliseconds
duration: 3600, // seconds
offset: 0,
stepCallback: function() {},
finishCallback: function() {},
interval: function() {
if (this.offset>this.duration) {
this.finishCallback();
} else {
this.stepCallback();
}
this.offset += this.stepSize/1000;
}
}, params);
setInterval(function() {
container.interval();
}, container.stepSize);
});
return this;
};
})(jQuery);
Can be used with:
$('.main').countdown({
stepCallback: function() { console.log('step');},
finishCallback: function() { console.log('done');}
});
A simple countdown would then be implemented like this:
$('.main').countdown({
duration: 300,
stepCallback: function() {
var time = this.duration-this.offset
var seconds = '0' + (time % 60);
time = (time - seconds) / 60;
var minutes = '0' + (time % 60);
time = (time - minutes) / 60;
var hours = '0' + time;
var str = hours.substring(hours.length - 2) + ':' + minutes.substring(minutes.length - 2) + ':' + seconds.substring(seconds.length - 2);
$(this.t).html(str);
},
finishCallback: function() { $(this.t).html('tadaaa'); }
});
Cheers

Javascript reset countdown

Hello
I have a problem with countdown by javascript, i wrote a script and not bad.
i need reload countdown after few minute by ajax (json) but after loading new data script does not work properly.
after obtaining a new time counting time pours or not display!
help me pleas
thanks :)
var d = today();
function today(){
now = new Date().getTime();
return Math.round(now/1000);
}
function countdown(time1,id)
{
off = today() - d;
time = time1 - off;
h = Math.floor(time / 3600);
m = Math.floor(time / 60) % 60;
s = time % 60;
t = h + ":";
if(m < 10){ t += "0"; }
t += m + ":";
if (s < 10) { t += "0"; }
t += s;
//done
if(m <= 0 && s <= 0){
$("#"+id).html("00:00:00");
return;
}
$("#"+id).html(t).show();
var sto = window.setTimeout("countdown('"+time1+"','"+id+"')", 1000);
}
$(document).ready(function(){
//clearTimeout(sto);
countdown(1000, 'timer1');
countdown(1200, 'timer2');
//example (instead of json)
setTimeout(function(){
countdown(3000, 'timer1');
countdown(3200, 'timer2');
//alert('after click ok scripts is worked!');
}, 3000)
});

You can reset a timeout by doing window.clearTimeout(sto).
James Khoury suggests removing the var keyword from sto after declaring var sto; in the global namespace.
Below I summarize how to do these kinds of timing things in javascript:
Let's begin with some date and time manipulation functions:
// Time functions
// default unit is the millisecond
var sec = 1000;
var ms = 1;
function formatSeconds(time) {
var seconds = Math.floor(time/1000);
with (Math) {
var sec = seconds % 60;
var min = floor(seconds/60) % 60;
var hr = floor(seconds/3600);
}
return hr+':'+min+':'+sec;
}
function now() {
return (new Date()).getTime();
}
Now the actual interesting code:
// Timeout functions
function callPeriodically(params) {
/*
* PARAMS: {callback=function, callbackInterval=int, cleanupCallback=function}
*
* WHAT THIS FUNCTION DOES:
* Calls [[callback()]] every [[callbackInterval]] milliseconds;
* (The [[callback()]] function should return false if it wishes
* to abort callbacks.)
*
* RETURN VALUE: a function which, when called, will abort the periodic callbacks.
*
* Nomatter how periodic callbacks are aborted, the [[cleanupCallback()]] function
* is always run last thing.
*/
var callback = params['callback'];
var callbackInterval = params['callbackInterval'];
var cleanupCallback = params['cleanup'];
var timeout = window.setTimeout(makeClock());
var timer = function() {
if (callback()) # stop if callback() returns false
timeout = window.setTimeout(timer, callbackInterval);
else if (cleanupCallback)
cleanupCallback();
};
var cancel = function() {
window.clearTimeout(timeout);
cleanupCallback();
}
return cancel;
}
Making a clock callback which uses the above machinery:
function makeClockCallback(duration, htmlId) {
// enclose endTime in a closure:
var startTime = now();
var endTime = startTime + duration;
var countdown = function() {
var timeLeft = endTime - now();
$('#'+htmlId).html(formatSeconds(timeLeft));
return timeLeft>0; # continue as long as timeLeft>0
};
return countdown;
}
Now let's test it:
// Demo
function makeAndRunClock(htmlId) {
return callPeriodically({
callback = makeClockCallback(1000*sec, htmlId),
callbackInterval = 1000*ms,
cleanupCallback = function() {
alert(htmlId+' has been cancelled!');
}
);
}
var abortClock1 = makeAndRunClock(7*sec); // will naturally stop after 7sec
var abortClock2 = makeAndRunClock(10*sec); // will naturally stop after 10sec
window.setTimeout(
function() {
abortClock1(); // force clock1 to stop after 4sec
},
4*sec
);
There are a few syntax errors, but there you go.