Develop Reference

how to prevent a condition when setInterval is running

I've watched many tutorials with alarm clocks and created my own but I'm still learning JS and I can't pause the sound because setInterval in the clock is running. pause() doesn't work because in a second the alarm is still going off. Can anyone help me?
let now;
let hours;
let minutes;
let seconds;
function clock() {
now = new Date();
hours = now.getHours();
minutes = now.getMinutes();
seconds = now.getSeconds();
// add zero for the values lower than 10
if (hours < 10) {
hours = "0" + hours;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
document.querySelector(".hours").innerHTML = hours;
document.querySelector(".minutes").innerHTML = minutes;
document.querySelector(".seconds").innerHTML = seconds;
console.log(`${hours}:${minutes}`);
// ##### this is the part sounds the alarm #####
if (alarmTime == `${hours}:${minutes}`) {
console.log(`Alarm ringing...`);
ringtone.play();
ringtone.loop = true;
}
}
let updateClock = setInterval(clock, 1000);
let alarmTime;
let ringtone;
ringtone = new Audio("./files/alarm.wav");
function setAlarm() {
let time = `${selectMenu[0].value}:${selectMenu[1].value}`;
alarmTime = time;
content.classList.add("disable");
setAlarmBtn.innerText = "alarm is set";
console.log(alarmTime);
}
setAlarmBtn.addEventListener("click", setAlarm);
// ##### This is one of some attempts to stop it
function stop() {
ringtone.pause();
ringtone.loop = false;
}
<button class="alarm-clock-button">set alarm</button>
<button class="alarm-off-button" onclick="stop()">alarm off</button>
I don't want to copy the whole code because it is quite bulky.

If you want to disable the setInterval entirely, use clearInterval(updateClock), if you don't want to disable it then you can put a boolean variable isPaused and check for it when alarmTime is being checked, you can use isPaused = !isPaused in your stop function to toggle it or just use false
Code Example:
let isPaused = false; //declaration
if (alarmTime == `${hours}:${minutes}` && !isPaused) { // this will replace the condition!
console.log(`Alarm ringing...`);
ringtone.play();
ringtone.loop = true;
}
function setAlarm() {
let time = `${selectMenu[0].value}:${selectMenu[1].value}`;
alarmTime = time;
content.classList.add("disable");
setAlarmBtn.innerText = "alarm is set";
console.log(alarmTime);
isPaused = false; // If it's being reset for whatever reason
}
function stop() { // this will replace your stop function
ringtone.pause();
ringtone.loop = false;
isPaused = true;
}

How to make time counter will continue even refresh or leave the page

I implemented a timer count on my examination page. It is just like the edmodo website. But when you're taking an exam in edmodo, even if you refresh it, the timer is still counting. On my site, if you refresh the page, the timer refresh too. What I want is just like the edmodo which still counting even you refresh the page. Please see my code for your reference.
Note:
I'm using Laravel5.1/jQuery
$(document).ready(function() {
// Quiz timer (Start of Quiz)
var quiz_timer = $('.quiz-timer').html();
var exact_time = parseInt($('.timer-value').html() - 1);
var hrs_to_spend = parseInt(exact_time / 60);
var mins_to_spend = parseInt(exact_time % 60);
var secs_to_spend = 60;
var timeIsUp = false;
var secs = 0,
mins = 0,
hrs = 0;
var secs_zero, mins_zero, hrs_zero, h_spend_zero, m_spend_zero, s_spend_zero;
var setters = setInterval(function() {
if ($('.quiz-timer').html() != '00:00:01') {
if (secs_to_spend > 0) {
secs_to_spend--;
}
if (secs_to_spend <= 0) {
mins_to_spend--;
secs_to_spend = 59;
}
if (mins_to_spend < 0) {
hrs_to_spend--;
mins_to_spend = 59;
}
} else {
$('.quiz-timer').html('00:00:00')
clearInterval(setters);
$('.answer-quiz > .panel-info').attr('class', 'panel panel-danger');
swal({
title: "Oops!",
text: "Time is up.",
type: "warning"
});
timeIsUp = true;
setTimeout(function() {
$('#submitAttempt').click();
}, 2000);
return false;
}
h_spend_zero = (hrs_to_spend < 10) ? '0' : '';
m_spend_zero = (mins_to_spend < 10) ? '0' : '';
s_spend_zero = (secs_to_spend < 10) ? '0' : '';
$('.quiz-timer').html(h_spend_zero + hrs_to_spend + ':' + m_spend_zero + mins_to_spend + ':' + s_spend_zero + secs_to_spend);
if (!timeIsUp) {
secs++;
if (secs == 60) {
mins++;
secs = 0;
}
if (mins == 60) {
hrs++;
mins = 0;
}
hrs_zero = (hrs < 10) ? '0' : '';
mins_zero = (mins < 10) ? '0' : '';
secs_zero = (secs < 10) ? '0' : '';
$('#timeTaken').val(hrs_zero + hrs + ':' + mins_zero + mins + ':' + secs_zero + secs);
}
}, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Original Value: <span class="timer-value">110</span><br><br>
Timer: <span class="quiz-timer"></span><br>
Time Spent: <input type="text" name="time_taken" id="timeTaken" value="">

Set time expiration deadline as a date-time. Count remaining time, not spent time.
For example if date-time now is "2017-08-22 08:00:01" (the starting time of the exam), and you want the expiration after 1 hour, set the date-time deadline to "2017-08-22 09:00:01" (this should be returned from the server). Then let the javascript counter recalculate the difference between the time now and the deadline with refresh rate (interval) every second.

use local storage
1) save the last time in localstorage
like
window.onbeforeunload= function(){
localStorage.setItem("lastTime", timevalue);
}
2) upon reload if time exists in localstorage like
savedTime = localStorage.getItem("lastTime");
mytimer.continueFrom(savedTime)
pick it up from that point and continue the timer
have a look here about localstorage
Local Storage

You can't achieve that with Javascript, javascript code has a session life time, if you close the tab it terminates all the resources that the tab used, including javascript.
You can try to overcome that via saving the counter + current time in local storage, and whenever you start your JS code, check if there are those values in the local storage, and init the counter value with them.
let counter = prevSavedCounter + (new Date()).getTime() - savedTime;

Getting a JavaScript value into a variabe

My 14 yr old son is working on a Science Project looking at reaction time and age. He is setting up a little web app to test people - When a page is loaded a timer starts and there is a delay in a STOP button appearing (4 secs for this example). When they click the stop button, the timer stops.
He's done a great job of coding all of that so far. He is using a piece of JavaScript that he found and has modified it to his needs.
His issue - how to pass the stopped time into a variable and then pass that to another page. He is able to successfully do it if the variable is static ie "Hello."
What is wrong with the function stop(); in this example? He currently gets a [object HTMLSpanElement]
var clsStopwatch = function() {
// Private vars
var startAt = 0; // Time of last start / resume. (0 if not running)
var lapTime = 0; // Time on the clock when last stopped in milliseconds
var now = function() {
return (new Date()).getTime();
};
// Public methods
// Start or resume
this.start = function() {
startAt = startAt ? startAt : now();
};
// Stop or pause
this.stop = function() {
// If running, update elapsed time otherwise keep it
lapTime = startAt ? lapTime + now() - startAt : lapTime;
startAt = 0; // Paused
};
// Reset
this.reset = function() {
lapTime = startAt = 0;
};
// Duration
this.time = function() {
return lapTime + (startAt ? now() - startAt : 0);
};
};
var x = new clsStopwatch();
var $time;
var clocktimer;
function pad(num, size) {
var s = "0000" + num;
return s.substr(s.length - size);
}
function formatTime(time) {
var h = m = s = ms = 0;
var newTime = '';
h = Math.floor( time / (60 * 60 * 1000) );
time = time % (60 * 60 * 1000);
m = Math.floor( time / (60 * 1000) );
time = time % (60 * 1000);
s = Math.floor( time / 1000 );
ms = time % 1000;
newTime = pad(h, 2) + ':' + pad(m, 2) + ':' + pad(s, 2) + ':' + pad(ms, 3);
return newTime;
}
function update() {
$time.innerHTML = formatTime(x.time());
}
function start() {
$time = document.getElementById('time');
update();
clocktimer = setInterval("update()", 1);
x.start();
$(document).ready(function() { $('#mybutton').delay(4000).fadeIn(0);});
}
function stop() {
x.stop();
//var varTime = "Hello";
var varTime = document.getElementById('time');
window.location.href = "somephpfile.php?etime=" + varTime;
}

The var varTime = document.getElementById('time') is assigning the element to the varible, which is fine and not a bad option however I believe your son only needs the HTML text of that element.
There are two options. The first option keeps the time element in the function for possible expansion later.
function stop() {
x.stop();
var varTime = document.getElementById('time');
if (varTime) {
window.location.href = "somephpfile.php?etime=" + varTime.innerHTML;
}
}
Or just extract the required text and send it - even if it is empty.
function stop() {
x.stop();
if (document.getElementById('time')) {
window.location.href = "somephpfile.php?etime=" + document.getElementById('time').innerHTML;
}
}

You need to read the innerHTML of the element instead if just reading element itself. This can be accomplished by :
function stop() {
x.stop();
//var varTime = "Hello";
var varTime = document.getElementById('time').innerHTML;
window.location.href = "somephpfile.php?etime=" +
}

Change JavaScript interval time when current time is between two times

I’m looking for a way to tweak a current script of mine that loads a page into a div every minute. I want it to wait 5 minutes at a specific time, then go back to executing every minute. Here’s what I have so far.
var starttime = 10‎:‎30:‎00‎ ‎PM;
var endtime = 10‎:‎35:‎00‎ ‎PM;
var myVar = setInterval(function(){ myTimer() }, 1000);
function myTimer() {
var d = new Date();
document.getElementById("currenttime").innerHTML = d.toLocaleTimeString();
if ( d.toLocaleTimeString() > ‎starttime &&
d.toLocaleTimeString() < ‎endtime ) {
setInterval(function() {
}, 300000);
$("#ticketload").load("loadlasttenminutesmodified.php");
} else {
setInterval(function() {
}, 60000);
$("#ticketload").load("loadlasttenminutesmodified.php");
}
};
Any help is appreciated, thanks.

var starttime = '10‎:‎30:‎00‎ ‎PM',
endtime = '10‎:‎35:‎00‎ ‎PM';
var myVar = setInterval(myTimer, 1000);
// Use this function instead of toLocaleTimeString,
// since inconsistencies may arise with that one, depending on country.
function getTimeFormatted(date) {
var hours = date.getHours(),
minutes = date.getMinutes(),
seconds = date.getSeconds(),
ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12;
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
return hours + ':' + minutes + ':' + seconds + ' ' + ampm;
}
function myTimer() {
var d = getTimeFormatted(new Date());
document.getElementById("currenttime").innerHTML = d;
// Simply return (exit) the function when current time is
// between both of those dates.
// Your function will not go further than this.
// And it will effectively do nothing other than update the innerHTML
// for about five minutes.
if (d > ‎starttime && d < ‎endtime) return;
// Do the stuff that is supposed to run every minute.
// I assume this is, but place whatever else you want in here.
$("#ticketload").load("loadlasttenminutesmodified.php");
}
You can just exit out of the interval with return when the time criteria is met, before executing the rest of the code that is supposed to run every minute.
I made some changes to your code:
You missed quotes in your starttime and endtime variables
Replaced toLocaleTimeString with a new function. Thanks to #SpiderPig for pointing out why toLocaleTimeString isn't reliable.
You can specify the function directly in the myVar interval, instead of executing the myTimer function inside of an anonymous function.
Format the current day into AM/PM once, since that's all that is needed.
return when the time criteria is met and before executing the rest of the code inside of the interval.
I don't know what those empty setIntervals were in there for, so I removed them. I guess this is just example code, judging from the variable names you gave.

Try
var startTime = "22:30:00",
endTime = "22:35:00",
currentTime = $("#currenttime"),
ticketLoad = $("#ticketload"),
delay = 60000,
extendedDelay = delay * 5,
timeout = null,
timer = function timer(delay) {
var cycle = function cycle(delay, reset) {
// clear `queue` if within `startTime` , `endTime` range,
// `reset` set to `true`
if (reset) {
this.queue("timer", []);
};
// `cycle` delay `60000`
this.html("currenttime called at:" + new Date().toLocaleString())
// set `cycle` delay to `300000`
// if within `startTime` , `endTime` range,
// `reset` set to `true`
var _delay = !reset ? delay : extendedDelay;
.delay(_delay, "timer")
.queue("timer", function() {
console.log(new Date().toLocaleString());
// continue cycle
timer.call($(this), _delay);
}).dequeue("timer");
// do ajax stuff
ticketLoad.load("loadlasttenminutesmodified.php")
.fail(function(jqxhr, textStatus, errorThrown) {
console.log(errorThrown);
// clear `queue` on `error`
currentTime.queue("timer", [])
});
};
// if within `startTime` , `endTime` range
// clear `queue` , set `cycle` delay to `300000`
if (String(new Date()).split(" ")[4] > startTime
&& String(new Date()).split(" ")[4] < endTime) {
cycle.call(this, delay, true);
timeout = setInterval(function() {
if (String(new Date()).split(" ")[4] >= endTime) {
clearInterval(timeout);
timeout = null;
this.queue("timer", []);
cycle.call(this, delay)
}
}.bind(this), 7500)
} else {
if (String(new Date()).split(" ")[4] >= endTime) {
this.queue("timer", []);
cycle.call($(this), delay)
} else {
cycle.call($(this), delay)
}
};
};
timer.call(currentTime, delay);
$(function() {
var startTime = "22:30:00",
endTime = "22:35:00",
currentTime = $("#currenttime"),
ticketLoad = $("#ticketload"),
delay = 60000,
extendedDelay = delay * 5,
timeout = null,
timer = function timer(delay, reset) {
var cycle = function cycle(delay, reset) {
if (reset) {
this.queue("timer", [])
};
var _delay = !reset ? delay : extendedDelay;
this.html("currenttime called at:" + new Date().toLocaleString())
.delay(_delay, "timer")
.queue("timer", function() {
console.log(new Date().toLocaleString());
timer.call($(this), _delay)
}).dequeue("timer");
$.when(ticketLoad)
.always(function(data) {
this.html("ticketLoad called at:" + new Date().toLocaleString())
})
};
if (String(new Date()).split(" ")[4] > startTime
&& String(new Date()).split(" ")[4] < endTime) {
cycle.call(this, delay, true);
timeout = setInterval(function() {
if (String(new Date()).split(" ")[4] >= endTime) {
clearInterval(timeout);
timeout = null;
this.queue("timer", []);
cycle.call(this, delay)
}
// check if beyond `endTime` ,
// reset `cycle`
// adjust interval duration here
// for greater, less frequency of checks
}.bind(this), 7500)
} else {
if (String(new Date()).split(" ")[4] >= endTime) {
this.queue("timer", []);
cycle.call($(this), delay)
} else {
cycle.call($(this), delay)
}
};
};
timer.call(currentTime, delay)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="currenttime"></div>
<div id="ticketload"></div>

Date.prototype.setMyTime = function (time) {
arrTime = time.split(":");
this.setHours(arrTime[0],arrTime[1],arrTime[2]);
return this;
}
var d = new Date();
var starttime = d.setMyTime('22:30:00');
var endtime = d.setMyTime('22:35:00');
var intervalId, loading = false;
var myVar = setInterval(function(){ myTimer() }, 1000);
function myTimer() {
var d = new Date();
document.getElementById("currenttime").innerHTML = d.toLocaleTimeString();
if(d.getTime() > starttime.getTime() && d.getTime() < endtime.getTime()) {
clearInterval(intervalId);
loading = false;
} else {
if (loading === false) {
intervalId = setInterval(function(){ $("#ticketload").load("loadlasttenminutesmodified.php"); }, 60000);
loading = true;
}
}
}

I decided to take a different approach. Set the interval to one minute and have and if statement inside that. Also, I needed to convert the time format into the same format as my variables.
<script type="text/javascript">
starttime = '10:30:00 PM';
endtime = '10:35:00 PM';
var myVar = setInterval(function(){ myTimer() }, 60000);
function myTimer() {
var timenow = new Date();
timeconvert = timenow.toLocaleTimeString()
if (timeconvert > starttime && timeconvert < endtime)
{
//alert("Time is 5 minutes");
}
else
{
//alert("Time is 60 seconds");
$("#ticketload").load("loadlasttenminutesmodified.php");
}
};
</script>
This has been working great all week.

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>