We Keep Coding

How can i get the seconds to reset to 0 when they reach 60

Hi there I have a stopwatch embedded in my website, however I have a problem. When the seconds reach 60 therefore 1 minute they should reset to 00. However in this case while the minute will increase every 60 seconds the seconds will not reset to zero. Here is my code
<div id="output">00:00:00</div>
<button id="startPause" onclick="startPause()">Start</button>
<button onclick="reset()">Reset</button>
<script type="text/javascript">
var time = 0;
var running = 0;
function startPause() {
if (running == 0) {
running = 1;
increment();
document.getElementById('startPause').innerHTML = 'Pause';
} else {
running = 0;
document.getElementById('startPause').innerHTML = 'Resume';
}
}
function reset() {
running = 0;
time = 0;
document.getElementById('output').innerHTML = '00:00:00';
document.getElementById('startPause').innerHTML = 'Start';
}
function increment() {
if (running == 1) {
setTimeout(function() {
time++;
var mins = Math.floor(time / 10 / 60);
if (mins <= 9) {
mins = '0' + mins;
}
var secs = Math.floor(time / 10);
if (secs <= 9) {
secs = '0' + secs;
}
var tenths = Math.floor(time % 10);
if (tenths <= 9) {
tenths = '0' + tenths;
}
document.getElementById('output').innerHTML =
mins + ':' + secs + ':' + tenths;
increment();
}, 100);
}
}
</script>
Any help much appreciated

You can use that code
<div id="output">00:00:00</div>
<button id="startPause" onclick="startPause()">Start</button>
<button onclick="reset()">Reset</button>
<script type="text/javascript">
var time = 0;
var running = 0;
function startPause() {
if (running == 0) {
running = 1;
increment();
document.getElementById('startPause').innerHTML = 'Pause';
} else {
running = 0;
document.getElementById('startPause').innerHTML = 'Resume';
}
}
function reset() {
running = 0;
time = 0;
document.getElementById('output').innerHTML = '00:00:00';
document.getElementById('startPause').innerHTML = 'Start';
}
function increment() {
if (running == 1) {
setTimeout(function() {
time++;
var mins = Math.floor(time / 10 / 60);
if (mins <= 9) {
mins = '0' + mins;
}
var secs = Math.floor(time / 10);
if(secs >= 60)
{
secs = secs - ( mins * 60 );
}
if ((secs).toString().length === 1) {
secs = '0' + secs;
}
var tenths = Math.floor(time % 10);
if ((tenths).toString().length === 1) {
tenths = '0' + tenths;
}
document.getElementById('output').innerHTML =
mins + ':' + secs + ':' + tenths;
increment();
}, 100);
}
}
</script>

Just include a modulo by 60 to line number 36 to properly reset seconds to 0 (line commented to highlight):
<div id="output">00:00:00</div>
<button id="startPause" onclick="startPause()">Start</button>
<button onclick="reset()">Reset</button>
<script type="text/javascript">
var time = 0;
var running = 0;
function startPause() {
if (running == 0) {
running = 1;
increment();
document.getElementById('startPause').innerHTML = 'Pause';
} else {
running = 0;
document.getElementById('startPause').innerHTML = 'Resume';
}
}
function reset() {
running = 0;
time = 0;
document.getElementById('output').innerHTML = '00:00:00';
document.getElementById('startPause').innerHTML = 'Start';
}
function increment() {
if (running == 1) {
setTimeout(function() {
time++;
var mins = Math.floor(time / 10 / 60);
if (mins <= 9) {
mins = '0' + mins;
}
var secs = Math.floor(time / 10) % 60; // <-- see here for change
if (secs <= 9) {
secs = '0' + secs;
}
var tenths = Math.floor(time % 10);
if (tenths <= 9) {
tenths = '0' + tenths;
}
document.getElementById('output').innerHTML =
mins + ':' + secs + ':' + tenths;
increment();
}, 100);
}
}
</script>

Javascript play sound after delay

I have made a stopwatch in javascript which accepts start time from get parameters. Everything is working but I would like to play a sound 3 seconds before end. SO far I have this:
HTML:
<form action="timer.php" method="get">
<select name="hours">
<?php for($i = 0; $i <= 24; $i++): ?>
<option value="<?php echo $i; ?>"><?php echo $i; ?></option>
<?php endfor; ?>
</select>
<select name="minutes">
<?php for($i = 0; $i <= 59; $i++): ?>
<option value="<?php echo $i; ?>"><?php echo $i; ?></option>
<?php endfor; ?>
</select>
<select name="seconds">
<?php for($i = 0; $i <= 59; $i++): ?>
<option value="<?php echo $i; ?>"><?php echo $i; ?></option>
<?php endfor; ?>
</select>
<input type="submit" name="submit" value="submit">
</form>
<div class="stopwatch">
Start stopwatch<br>
Stop stopwatch<br>
<span class="hours"></span>:<span class="minutes"></span>:<span class="seconds"></span>
</div>
Javasciprt:
// GetParams class to parse $_GET[]
var GetParams = {
getSearchParameters: function() {
var prmstr = window.location.search.substr(1);
return prmstr != null && prmstr != "" ? this.transformToAssocArray(prmstr) : {};
},
transformToAssocArray: function( prmstr ) {
var params = {};
var prmarr = prmstr.split("&");
for ( var i = 0; i < prmarr.length; i++) {
var tmparr = prmarr[i].split("=");
params[tmparr[0]] = tmparr[1];
}
return params;
}
};
var stopWatch = {
TimerID : null,
startHours : parseInt(GetParams.getSearchParameters().hours),
startMinutes : parseInt(GetParams.getSearchParameters().minutes),
startSeconds : parseInt(GetParams.getSearchParameters().seconds),
totalSeconds : parseInt(GetParams.getSearchParameters().seconds) + parseInt(GetParams.getSearchParameters().minutes) * 60 + parseInt(GetParams.getSearchParameters().hours) * 3600,
changeTimer: function () {
this.TimerID = setInterval(() => this.timerTick(), 1000);
$('.start-stopwatch').hide();
},
timerTick: function ()
{
this.totalSeconds--;
var hours = Math.floor(this.totalSeconds / 3600);
var minutes = Math.floor(this.totalSeconds / 60) - (hours * 60);
var seconds = this.totalSeconds - (minutes * 60) - (hours * 3600);
if (hours < 10)
hours = "0" + hours;
if (minutes < 10)
minutes = "0" + minutes;
if (seconds < 10)
seconds = "0" + seconds;
$('.stopwatch .hours').text(hours);
$('.stopwatch .minutes').text(minutes);
$('.stopwatch .seconds').text(seconds);
if (this.totalSeconds === 0)
{
clearInterval(this.TimerID);
new Audio("/sources/sounds/interval.mp3").play();
}
},
isActive: function () {
return (this.totalSeconds > 0);
},
prePopulate: function () {
var hours = this.startHours;
var minutes = this.startMinutes;
var seconds = this.startSeconds;
if (hours < 10)
hours = "0" + hours;
if (minutes < 10)
minutes = "0" + minutes;
if (seconds < 10)
seconds = "0" + seconds;
$('.stopwatch .hours').text(hours);
$('.stopwatch .minutes').text(minutes);
$('.stopwatch .seconds').text(seconds);
},
stopTimer: function () {
$('.start-stopwatch').show();
clearInterval(this.TimerID);
}
};
With this code I am getting :
Unhandled Promise Rejection: NotAllowedError (DOM Exception 35): The
request is not allowed by the user agent or the platform in the
current context, possibly because the user denied permission.
I was reading and found out that sounds must be associated with user interaction such as click. User has to click on Start Stopwatch first and then the countdown starts.
I also found this: https://www.sitepoint.com/community/t/count-down-and-make-sound-play-on-click/30270/2
But dont know how should I implement it in my code.

I know that you can automatically click something using the click() function.
So say you have an html
<button id="mybtn"></button>
You can click that w/ JS by doing this:
var mybtn = document.getElementById('mybtn');
mybtn.click();
Hopefully that helps!!

Check out the function playAudio()
$(document).ready(function() {
var stopWatch = {
TimerID: null,
startHours: 0,
startMinutes: 0,
startSeconds: 3,
totalSeconds: 5,
changeTimer: function() {
this.TimerID = setInterval(() => this.timerTick(), 1000);
$('.start-stopwatch').hide();
},
timerTick: function() {
this.totalSeconds--;
var hours = Math.floor(this.totalSeconds / 3600);
var minutes = Math.floor(this.totalSeconds / 60) - (hours * 60);
var seconds = this.totalSeconds - (minutes * 60) - (hours * 3600);
if (hours < 10)
hours = "0" + hours;
if (minutes < 10)
minutes = "0" + minutes;
if (seconds < 10)
seconds = "0" + seconds;
$('.stopwatch .hours').text(hours);
$('.stopwatch .minutes').text(minutes);
$('.stopwatch .seconds').text(seconds);
//I PUT 3 FOR TESTING PURPOSE
if (this.totalSeconds === 3) {
clearInterval(this.TimerID);
this.playAudio();
}
},
playAudio: function () {
//here you can set START,STOP,FILE
var startSecond = 20,
stopSecond = 30,
src ="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3" ;
/* you can use createElement() if you need to append
a new tag audio at runtime
var audioElement = document.createElement('audio'); */
var audioElement = document.querySelector('audio');
audioElement.setAttribute('src', src + '#t=' + startSecond+','+stopSecond);
audioElement.play();
},
isActive: function() {
return (this.totalSeconds > 0);
},
prePopulate: function() {
var hours = this.startHours;
var minutes = this.startMinutes;
var seconds = this.startSeconds;
if (hours < 10)
hours = "0" + hours;
if (minutes < 10)
minutes = "0" + minutes;
if (seconds < 10)
seconds = "0" + seconds;
$('.stopwatch .hours').text(hours);
$('.stopwatch .minutes').text(minutes);
$('.stopwatch .seconds').text(seconds);
},
stopTimer: function() {
$('.start-stopwatch').show();
clearInterval(this.TimerID);
}
};
$(".start-stopwatch").click(()=> stopWatch.changeTimer());
$(".stop-stopwatch").click(()=> stopWatch.stopTimer());
//uncomment if you want to play on load of the page
//stopWatch.playAudio();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<form action="timer.php" method="get">
........
<audio src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3"></audio>
</form>
<div class="stopwatch">
Start stopwatch <br>
Stop stopwatch<br>
<span class="hours"></span>:
<span class="minutes"></span>:
<span class="seconds"></span>
</div>

I got it working :)
var stopWatch = {
TimerID : null,
startHours : parseInt(GetParams.getSearchParameters().hours),
startMinutes : parseInt(GetParams.getSearchParameters().minutes),
startSeconds : parseInt(GetParams.getSearchParameters().seconds),
totalSeconds : parseInt(GetParams.getSearchParameters().seconds) + parseInt(GetParams.getSearchParameters().minutes) * 60 + parseInt(GetParams.getSearchParameters().hours) * 3600,
sound : new Audio("/sources/sounds/interval.mp3"),
changeTimer: function () {
this.sound.play();
this.sound.pause();
this.TimerID = setInterval(() => this.timerTick(), 1000);
$('.start-stopwatch').hide();
},
timerTick: function ()
{
this.totalSeconds--;
var hours = Math.floor(this.totalSeconds / 3600);
var minutes = Math.floor(this.totalSeconds / 60) - (hours * 60);
var seconds = this.totalSeconds - (minutes * 60) - (hours * 3600);
if (hours < 10)
hours = "0" + hours;
if (minutes < 10)
minutes = "0" + minutes;
if (seconds < 10)
seconds = "0" + seconds;
$('.stopwatch .hours').text(hours);
$('.stopwatch .minutes').text(minutes);
$('.stopwatch .seconds').text(seconds);
if (this.totalSeconds === 0)
{
this.sound.play();
clearInterval(this.TimerID);
}
},
isActive: function () {
return (this.totalSeconds > 0);
},
prePopulate: function () {
var hours = this.startHours;
var minutes = this.startMinutes;
var seconds = this.startSeconds;
if (hours < 10)
hours = "0" + hours;
if (minutes < 10)
minutes = "0" + minutes;
if (seconds < 10)
seconds = "0" + seconds;
$('.stopwatch .hours').text(hours);
$('.stopwatch .minutes').text(minutes);
$('.stopwatch .seconds').text(seconds);
},
stopTimer: function () {
$('.start-stopwatch').show();
clearInterval(this.TimerID);
}
};

How to Run the time that the timezone is Denmark Copenhagen

I found the code which is can run my stopwatch. but iwant to follow denmark country timezone to run my code. how to d
<script type="text/javascript">
ElapsedTimeLogger = function(dateElementId, elapsedElementId, hiden, interval) {
var container = $(elapsedElementId);
var time = parseDate($(dateElementId).val());
var interval = interval;
var timer;
function parseDate(dateString) {
var date = new Date(dateString);
return date.getTime();
}
function update() {
var systemTime = new Date().getTime();
elapsedTime = systemTime - time;
container.html(prettyPrintTime(Math.floor(elapsedTime / 1000)));
$(hiden).val(prettyPrintTime(Math.floor(elapsedTime / 1000)));
}
function prettyPrintTime(numSeconds) {
var hours = Math.floor(numSeconds / 3600);
var minutes = Math.floor((numSeconds - (hours * 3600)) / 60);
var seconds = numSeconds - (hours * 3600) - (minutes * 60);
if (hours < 10) hours = "0" + hours;
if (minutes < 10) minutes = "0" + minutes;
if (seconds < 10) seconds = "0" + seconds;
var time = hours + ":" + minutes + ":" + seconds;
return time;
}
this.start = function() {
timer = setInterval(function() {update()}, interval * 1000);
}
this.stop = function() {
clearTimeout(timer);
}
}
$(document).ready(function () {
var timeLogger = new ElapsedTimeLogger("#date", "#elapsed","#stoppedid", 1);
timeLogger.start();
$("#confirm").click(function() { //Stop timer upon clicking the Confirm Button
timeLogger.stop();
});
});
</script>
Thank you in advance.
I cant post another question thats why i need to edit may other questions

remove disabled property of input[name=stwa] and add readonly property for there
Use navigator.cookie to save time on javascript

Here is your solutions
if(localStorage.getItem("sec"))
{
var sec = localStorage.getItem("sec");
var min = localStorage.getItem("min");
var hour = localStorage.getItem("hour");
stopwatch("Start");
}else{
var sec = 0;
var min = 0;
var hour = 0;
}
function stopwatch(text) {
sec++;
if (sec == 60) {
sec = 0;
min = min + 1; }
else {
min = min; }
if (min == 60) {
min = 0;
hour += 1; }
localStorage.setItem("sec", sec);
localStorage.setItem("min", min);
localStorage.setItem("hour", hour);
if (sec<=9) { sec = "0" + sec; }
document.clock.stwa.value = ((hour<=9) ? "0"+hour : hour) + " : " + ((min<=9) ? "0" + min : min) + " : " + sec;
if (text == "Start") { document.clock.theButton.value = "Start "; }
if (text == "Stop ") { document.clock.theButton.value = "Stop"; }
if (document.clock.theButton.value == "Start") {
window.clearTimeout(SD);
return true; }
SD=window.setTimeout("stopwatch();", 1000);
}
function stop() {
x.stop();
document.getElementById('counter').value = formatTime(x.time());
clearInterval(clocktimer);
localStorage.clear();
}
<form name="clock" action="save_time_log.php" method="post">
<div class="form-group">
<input type="text" class="form-control time_tracker" disabled name="stwa" placeholder="00:00:00">
</div>
<input type="button" name="theButton" onClick="stopwatch(this.value);" class="btn btn-block btn-default btn-flat" value="Start" />
<input type="submit" name="stops" value="Stop" onClick="stop();" class="btn btn-block btn-default btn-flat"/>
</form>

Timer pause/resume not working

I have a timer where it has a pause/resume button, but whenever I hit the pause button, it kills the script and I can't resume the time.
Also is there a way I can get it to say a response once the time has expired? I have another timer count for when the time runs out and it shows how long it is past, but is there way I can have another text field so that I can locate it in a different place on the page?
html..
<script type="text/javascript">
timer = new Countdown();
timer.init();
</script>
<select id="period" onchange="start()">
<option value="0">Select time required</option>
<option value="30">30 Seconds</option>
<option value="60">1 Minute</option>
<option value="120">2 Minutes</option>
<option value="300">5 Minutes</option>
<option value="900">15 minutes</option>
<option value="1800">30 minutes</option>
<option value="2700">45 minutes</option>
<option value="3600">60 minutes</option>
</select> <span id="countdown" style="font-weight: bold;"></span>
<br>
<br>
<input type="button" value="Pause" onclick="stopwatch(this);" />
Javascript
<script>
var timeInSecs;
var ticker;
var start_time;
function Countdown(start) {
this.start_time = start === undefined ? "1:00" : start ;
this.target_id = "#timer";
this.name = "timer";
start_time = this.start_time;
}
Countdown.prototype.init = function () {
this.reset();
ticker = setInterval(this.name + '.tick()', 1000);
}
Countdown.prototype.reset = function () {
time = this.start_time.split(":");
this.minutes = parseInt(time[0]);
this.seconds = parseInt(time[1]);
this.update_target();
}
Countdown.prototype.tick = function () {
if (this.seconds > 0 || this.minutes > 0) {
if (this.seconds == 0) {
this.minutes = this.minutes - 1;
this.seconds = 59
} else {
this.seconds = this.seconds - 1;
}
}
this.update_target()
}
Countdown.prototype.update_target = function () {
seconds = this.seconds;
if (seconds < 10) seconds = "0" + seconds;
$(this.target_id).val(this.minutes + ":" + seconds)
}
var timer = new Countdown();
timer.init();
function start() {
var s = document.getElementById("period").value;
document.getElementById("period").disabled = true;
startTimer(s);
}
function startTimer(secs) {
timeInSecs = parseInt(secs);
document.getElementById("countdown").style.color = "black";
clearInterval(ticker);
ticker = setInterval("tick()", 1000);
tick(); // to start counter display right away
}
function tick() {
var secs = timeInSecs;
if (secs > 0) {
timeInSecs--;
showTime(secs);
} else {
timeInSecs--;
document.getElementById("countdown").style.color = "red";
document.getElementById("countdown").innerHTML = "You have exceeded your time by " + (hhmmss(Math.abs(timeInSecs)));
document.getElementById("period").disabled = false;
}
}
function showTime(secs) {
var hours = Math.floor(secs / 3600);
secs %= 3600;
var mins = Math.floor(secs / 60);
secs %= 60;
var result = ((hours < 10) ? "0" : "") + hours + ":" + ((mins < 10) ? "0" : "") + mins + ":" + ((secs < 10) ? "0" : "") + secs;
document.getElementById("countdown").innerHTML = result;
}
function stopwatch(btn) {
if (btn.value == "Pause") {
clearInterval(ticker);
btn.value = "Resume";
} else {
btn.value = "Pause"
var timer = new Countdown($('#timer').val());
timer.init();
}
}
function hhmmss(secs) {
var hrs = Math.floor(secs / 3600);
var mns = Math.floor(secs / 60) % 60;
secs = secs % 60;
if (hrs < 10) hrs = "0" + hrs;
if (mns < 10) mns = "0" + mns;
if (secs < 10) secs = "0" + secs;
return mns + " minutes " + secs + " seconds";
}
</script>

How do I control the timer using javascript

Currently I am trying to create a minutes:second timer by requesting the user to type how long they want in minutes into the textbox which is textbox2 but when I tried to do get.ElementbyID.value for the variable mins,it does not work and gave error(NULL error) as I try global variable which also does not work.
I required the user to be able to type into the textbox in minutes and when pressing the start button will start the time the user requested.
var mins = 1;
var secs = mins * 60;
var currentSeconds = 0;
var currentMinutes = 0;
function start2() {
start();
}
function start() {
setTimeout(Decrement, 1000)
}
function Decrement() {
currentMinutes = Math.floor(secs / 60);
currentSeconds = secs % 60;
if (currentSeconds <= 9) currentSeconds = "0" + currentSeconds;
secs--;
document.getElementById("timer").innerHTML = currentMinutes + ":" + currentSeconds; //Set the element id you need the time put into.
if (secs !== -1) {
setTimeout('Decrement()', 1000);
}
if (secs == -1) {
alert("hi");
}
}
<input type="text" id="textbox2" value="0"></input>
<br/>
<button onclick="start2();">Start Timer</button>
<br/>
<p id="timer"></p>

I think your problem was you were trying to set the mins variable on page load. Instead, load the value in your start function.
You also need to calculate your seconds after determining the minutes.
var mins = 1;
var secs = mins * 60;
var currentSeconds = 0;
var currentMinutes = 0;
function start2() {
start();
}
function start() {
mins = document.getElementById('textbox2').value;
// set a default of 1 minute if it is less than one or not a number..
mins = isNaN(mins) || mins < 1 ? 1 : mins;
// calculate seconds down here, as well.
secs = mins * 60;
setTimeout(Decrement, 1000);
}
function Decrement() {
currentMinutes = Math.floor(secs / 60);
currentSeconds = secs % 60;
if (currentSeconds <= 9) currentSeconds = "0" + currentSeconds;
secs--;
document.getElementById("timer").innerHTML = currentMinutes + ":" + currentSeconds; //Set the element id you need the time put into.
if (secs !== -1) {
setTimeout('Decrement()', 1000);
}
if (secs == -1) {
alert("hi");
}
}
<input type="text" id="textbox2" value="0"></input>
<br/>
<button onclick="start2();">Start Timer</button>
<br/>
<p id="timer"></p>

var secs = 0;
function start(s) {
secs = s;
schedule();
}
function schedule() {
setTimeout(Decrement, 1000)
}
function Decrement() {
var currentMinutes = Math.floor(secs / 60);
var currentSeconds = secs % 60;
if (currentSeconds <= 9) currentSeconds = "0" + currentSeconds;
document.getElementById("timer").innerHTML = currentMinutes + ":" + currentSeconds;
if (secs-- > 0 )
schedule()
else
alert("hi");
}
<input type="text" id="textbox2" value="0"></input>
<br/>
<button onclick="start( parseInt( document.getElementById('textbox2').value ) );">Start Timer</button>
<br/>
<p id="timer"></p>