We Keep Coding

Need for modification of the javascript countdown code

Please i have a JavaScript countdown timer code that i got from stackoverflow that is a solution to my countdown timer project. this existing code counts down time from 30minutes down to 1 and start over again. and it gives the same count result to every user at the same time. But my challenge with the code is that i was not able to modify it in other to be able to regulate the count duration, because i want it to countdown from 2minutes to 0 and start over again continually,but not exceeding 2minutes. Please i need someone that will copy this code and run it a see if you can regulate the duration and help me with the solution. thanks in anticipation.
The code is as follows:
setInterval(function() {
function addZero(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
var x = document.getElementById("timer");
var d = new Date();
var s = (d.getSeconds());
var m = (d.getMinutes());
var a = addZero(30 - m);
var b = addZero(60 - m);
var c = (60 - s);
var z = "<span style='color:red;font-size:50px;'>" + "Break" + "</span>";
var v = "<span style='color:black;font-size:24px;'>" + "Break" + "</span>";
if (m > 30) {
y = b;
}
else if (m < 30) {
y = a;
}
if (y < 2 && c < 15) {
q = z;
}
else {
q = v;
}
var t = y + (":" + addZero(c) + " Till Station " + (q));
x.innerHTML = t;
}, 250);
<div align="center" id="timer" style='color:black;font-size:24px;' ></div>

The code you presented deserves a few remarks:
Variable names should be descriptive, not one-letter a, b, c...
Variables should be defined explicitly, not implicitly global, like now happens for y and q
When m is 30, then y does not get a value... this cannot be right.
If that last point would be corrected, then the logic for setting z would pose a new problem.
Styling should be done as much as possible via CSS classes, not via style attribute settings.
Here is how you could do it. You can set the first two constants to your liking:
// Maximum number of seconds for the timer (e.g. 120 = 2 minutes)
const MAX_SECS = 120;
// Number of seconds below which text gets highlighted
const WARN_SECS = 15;
// DOM
const spanMinutes = document.getElementById("min");
const spanSeconds = document.getElementById("sec");
const spanWarning = document.getElementById("break");
// For formatting numbers with 2 digits
const twoDigits = i => i.toString().padStart(2, 0);
setInterval(() => {
let seconds = MAX_SECS - Math.floor(Date.now() / 1000) % MAX_SECS;
spanMinutes.textContent = twoDigits(Math.floor(seconds / 60))
spanSeconds.textContent = twoDigits(seconds % 60);
spanWarning.classList.toggle("warn", seconds < WARN_SECS);
}, 250);
#timer {
text-align: center;
font-size: 24px;
}
.warn {
color: red;
}
<div id="timer"><span id="min">00</span>:<span id="sec">00</span>
till station <span id="break">breaks down</break>
</div>

Trying to figure out where the variable "now" in this requestAnimationFrame function comes from, or how to obtain its value dynamically

Basically i been trying to create a game using multiple slot machine rollers. I have tried many versions to obtain my goals, and all work perfectly on pc, but as soon as i put them on a mobile device, they are laggy. this is mainly because i was manipulating dom elements, as i found out.
I found a function on the net, i have replicated it and run it in an app and it works perfectly.
Now im trying to write this function into my actual app, with my own variables.
My problem is this:
There is a variable called "NOW", that is passed to the function animate(); I am trying to figure out where it comes from and or how to dynamically create it myself. There is a requestAnimationFrame request in this function and after hours and hours of research, i still cant find anything.
here is a fiddle where the code is located:
https://codepen.io/indamix/pen/lLxcG
var sm = (function(undefined){
var tMax = 3000,
height = 210,
speeds = [],
r = [],
reels = [
['coffee maker', 'teapot', 'espresso machine'],
['coffee filter', 'tea strainer', 'espresso tamper'],
['coffee grounds', 'loose tea', 'ground espresso beans']
],
$reels,
$msg,
start;
function init(){
$reels = $('.reel').each(function(i, el){
el.innerHTML = '<div><p>' + reels[i].join('</p><p>') + '</p></div><div><p>' + reels[i].join('</p><p>') + '</p></div>'
});
$msg = $('.msg');
$('button').click(action);
}
function action(){
if (start !== undefined)
return;
for (var i = 0; i < 3; ++i) {
speeds[i] = Math.random() + .5;
r[i] = (Math.random() * 3 | 0) * height / 3;
}
$msg.html('Spinning...');
animate();
}
function animate(now){
if (!start) start = now;
var t = now - start || 0;
for (var i = 0; i < 3; ++i)
$reels[i].scrollTop = (speeds[i] / tMax / 2 * (tMax - t) * (tMax - t) + r[i]) % height | 0;
if (t < tMax)
requestAnimationFrame(animate);
else {
start = undefined;
check();
}
}
function check(){
$msg.html(
r[0] === r[1] && r[1] === r[2] ?
'You won! Enjoy your ' + reels[1][ (r[0] / 70 + 1) % 3 | 0 ].split(' ')[0] : 'Try again');}
return {init: init}
})();$(sm.init);
I've been at this for a while now, like days. I figured out that the Now variable has something to do with the requestAnimationFrame function to determine where the animation frame ends up,But this is only speculation for me.. I can't see it.

You can use performance.now() as an argument value to your own animate function call

Calculate unique time given multiple start and end dates

If you have an array of appointments with start and end dates how do you calculate the unique time for all of the appointments?
Example:
var appointments = {
0:{"start":"2015-01-20 09:00:00","end":"2015-01-20 09:30:00"},
1:{"start":"2015-01-20 09:15:00","end":"2015-01-20 09:42:22"},
2:{"start":"2015-01-20 10:00:00","end":"2015-01-20 10:25:00"},
3:{"start":"2015-01-20 10:10:00","end":"2015-01-20 10:53:00"}
}
So in this example I would want to get a unique time (activity) value of 1H 35M 22S.
Anyone know any formulas for this?
So far I have this, seems to work but I think dates have to be sorted by start time. Is this the most efficient way to calculate this?:
var totalElapsedAppointmentSeconds = 0;
var lastActiveTimestamp;
for (i in appointments) {
if (totalElapsedAppointmentSeconds == 0) {
totalElapsedAppointmentSeconds = new Date(appointments[i].end) - new Date(appointments[i].start);
lastActiveTimestamp = new Date(appointments[i].end);
} else {
if (new Date(appointments[i].start) < lastActiveTimestamp) {
if (new Date(appointments[i].end) > lastActiveTimestamp) {
totalElapsedAppointmentSeconds += new Date(appointments[i].end) - lastActiveTimestamp;
lastActiveTimestamp = new Date(appointments[i].end);
} else {
//nothing, already completely accounted for
}
} else {
totalElapsedAppointmentSeconds += new Date(appointments[i].end) - new Date(appointments[i].start);
lastActiveTimestamp = new Date(appointments[i].end);
}
}
}
totalElapsedAppointmentSeconds = totalElapsedAppointmentSeconds/1000;
var totalElapsedTime = Math.floor(totalElapsedAppointmentSeconds / 3600) + "H " + Math.floor((totalElapsedAppointmentSeconds % 3600)/60) + "M " + (totalElapsedAppointmentSeconds % 3600) % 60 + "S";
console.log("totalElapsedTime",totalElapsedTime);

unclear what you are asking but this demonstrates calculating a time difference
EDIT whoops javascript says these are invalid dates, where did they come from?
moment.js is a good option to parse them if you must use these as inputs
var data = {
"appointments": {
0:{"start":"2015-01-20 09:00:00","end":"2015-01-20 09:30:00"},
1:{"start":"20-01-2015 09:15:00","end":"20-01-2015 09:42:22"},
2:{"start":"20-01-2015 10:00:00","end":"20-01-2015 10:25:00"},
3:{"start":"20-01-2015 10:10:00","end":"20-01-2015 10:53:00"},
}
}
function secondsDifference(ts1, ts2){
startMs = new Date(ts1).valueOf();
endMs = new Date(ts2).valueOf();
deltaMs = endMs - startMs;
deltaS = deltaMs /1000;
deltaS = Math.floor(deltaS);
return deltaS;
}
var a = data.appointments[0];
var result = secondsDifference(a.start, a.end);
console.log('first appointment length seconds:', result)

Using timer behind multiple alerts and prompts

I have a game that I am making using only pure javascript. Instead of a GUI, It is more like the old command line games and uses a prompt for input.
One of the main components of it is the Clock, which is expressed in hours, and can be checked with the commmand "time" and tells them the value of the variable "time". Here is the code:
var timestrt = 1;
var timer = setInterval(function(){timestrt++;return timestrt;}, 86000); var time = timestrt;
After testing it, I realized that the clock was not changing. So I set it to 10 seconds instead of 86 to be sure that I was waiting long enough, and it still did not want to work
I know that it is probably caused by the prompt and constant alerts, but I am not sure even where to start for a workaround.
Any ideas?
Edit: is it possible to either
1. retrieve the timer from an external page
2. comparing it to an actual clock in real time or 3. Using a animated gif clock in the background and calculating the location of certain pixels as time?

Don't use the native prompts and dialogs, since they stop the script execution time. Instead use simulated ones, for example jQuery IU has prompts and dialog boxes that do not stop execution. Here is an example of that:
$(function() {
$( "#dialog" ).dialog();
var timestrt = 1;
var timer = setInterval(function(){
timestrt++;
var time = timestrt;
$("#time").text(time);
}, 1000);
});

Here is my workaround:
This code is called before the prompt is started:
function initTime() {
var now = new Date();
stS = now.getSeconds();
stM = now.getMinutes();
stH = now.getHours();
}
This is called after the prompt is done:
function computeTime() {
var now = new Date();
var reS = now.getSeconds();
var reM = now.getMinutes();
var reH = now.getHours();
var elapS = reS - stS;
var elapM = reM - stM;
var elapH = reH - stH;
if (elapM < 0) {
reM = reM + 60;
elapM = reM - stM;
}
if (elapS < 0) {
reS = reS + 60;
elapS = reS - stS;
}
Then I convert it to seconds to make it easier to check against:
var finalH = elapH * 3600;
var finalM = elapM * 60;
var finalS = finalM + elapS + finalH;
And check/change the time variable based on how many sets of 86 seconds has passed:
if (finalS > 86 && finalS < 172) {
time = 1;
}
if (finalS > 172 && finalS < 258) {
time = 2;
}
if (finalS > 258 && finalS < 344) {
time = 3;
}
if (finalS > 344 && finalS < 430) {
time = 4;
}
if (finalS > 430 && finalS < 516) {
time = 5;
}
if (finalS > 516) {
time = 6;
alert('5 A.M.');
alert('A clock is chiming...');
alert('6 A.M.');
playing = false;
alert('Thanks for playing! Goodbye!');
}
And that is my alternative to using a setinterval/timer behind multiple prompts and alerts. The last part probably wasn't needed, but since it answered my original question I included it.

jQuery setInterval giving Invalid argument

Good morning, I created a function that gets all the USA timezone times and returns them to me highlighting which timezone you are in. The issue is I want it to run every minute. When I use the setInterval function I keep getting a javascript error saying 'invalid argument'. Here is my code in jsFiddle http://jsfiddle.net/Qg2eL/
// Timezone
var arrTime = new Array();
var arrZone = new Array("ET","CT","MT","PT");
var getTimeZones = setInterval(timeZone(),60000);
function timeZone(){
var location = 0;
var current_date = new Date();
var offset = parseInt(-current_date.getTimezoneOffset() / 60);
switch(offset){
case -5:
location = 0;
break;
case -6:
location = 1;
break;
case -7:
location = 2;
break;
case -8:
location = 3;
break;
}
arrTime.length = 0;
for(var x=5; x<9; x++){
var current_date = new Date();
var utc_hour = current_date.getUTCHours() - x;
var utc_minutes = current_date.getUTCMinutes().toString();
var dd = "AM";
if(utc_hour >= 12){
utc_hour = utc_hour - 12;
dd = "PM";
}
if(utc_hour == 0){ utc_hour = 12; }
utc_minutes = utc_minutes<10?"0"+utc_minutes:utc_minutes;
var formattedTime = utc_hour+":"+utc_minutes+" "+dd;
arrTime.push(formattedTime);
}
var strHTML = "";
strHTML += "<ul>";
for(var x=0; x<arrTime.length; x++){
strHTML += "<li>"+arrZone[x]+": "+arrTime[x]+"</li>";
}
strHTML += "</ul>";
$('.timezoneHolder').html(strHTML);
$('.timezoneHolder ul li:nth-child('+(location+1)+')').css({
"color":"lime",
"font-weight":"bold"
});
}

Very common mistake is that you're not passing the function to be executed but actually calling it in this line:
var getTimeZones = setInterval(timeZone(),60000);
Rather:
var getTimeZones = setInterval(timeZone,60000);
PS. tested in Chrome and IE. and no invalid argument popped up.
Edit: The reason you're not seeing it pop up after making your change is because it will only be executed after 60 seconds, so you should just call the function after your setInterval and will be executed every 60 seconds afterwards.
var getTimeZones = setInterval(timeZone,60000);
timeZone();

The setInterval function runs its own "callback" you could say. The syntax is just a little off. Try this:
var getTimeZones = setInterval(function() {
timeZone();
},60000);
This syntax basically says, every 60000 milliseconds (or 60 seconds) perform the function inside of the interval. In this case the setInterval function calls your function.
Hope this helps.

var getTimeZones = setInterval(timeZone,60000);
remove the brackets! :)