I'm trying to create a chess clock using JavaScript. I've settle almost all of the issues with the clock's functionality except for this one. I'm using setInterval to essentially create the "countdown" effect on each player's clock. However, when it is triggered with the method I'm currently using the clock flickers. From my understanding/research, this is likely because there are overlapping 'intervals' that cause the code to try to display multiple intervals at the same time. Essentially the clock buttons (stopclock and stopclock2) when clicked call the functions on the bottom of my code. Could anyone provide some input on my code (below) and why this might be occurring?
clear1mils = "";
clear2mils = "";
//Clock Functions
function countdownmils2() {
document.getElementById("milsvalue2").innerHTML = --mil2;
if (mil2 == 0) {
mil2 = mil2 + 59;
if (sec2 == 0) {
if (min2 == 0) {
clearInterval(clear2mils);
document.getElementById("milsvalue2").innerHTML = "00";
}else if (min2 !== 0) {
sec2 = 60;
document.getElementById("minutesvalue2").innerHTML = --min2;
document.getElementById("secondsvalue2").innerHTML = --sec2;
}
}else if (sec2 !== 0) {
document.getElementById("secondsvalue2").innerHTML = --sec2;
if (sec2 <= 10) {
document.getElementById("secondsvalue2").innerHTML = "0" + sec2;
}
}
}else if (mil2 <= 10) {
document.getElementById("milsvalue2").innerHTML = "0" + mil2;
}
}
function countdownmils() {
document.getElementById("milsvalue").innerHTML = --mil;
if (mil == 0) {
mil = mil + 59;
if (sec == 0) {
if (min == 0) {
clearInterval(clear1mils);
document.getElementById("milsvalue").innerHTML = "00";
}else if (min !== 0) {
sec = 60;
document.getElementById("minutesvalue").innerHTML = --min;
document.getElementById("secondsvalue").innerHTML = --sec;
}
}else if (sec !== 0) {
document.getElementById("secondsvalue").innerHTML = --sec;
if (sec <= 10) {
document.getElementById("secondsvalue").innerHTML = "0" + sec;
}
}
}else if (mil <= 10) {
document.getElementById("milsvalue").innerHTML = "0" + mil;
}
}
//Clock 1
document.querySelector("#stopclock").addEventListener("click", () => {
clear2mils = setInterval(countdownmils2, 10);
clearInterval(clear1mils);
document.getElementById("stopclock").innerHTML = "DOWN";
document.getElementById("stopclock2").innerHTML = "UP";
document.getElementById("stopclock").setAttribute("disabled", "true");
document.getElementById("stopclock2").removeAttribute("disabled", "true");
});
//Clock 2
document.querySelector("#stopclock2").addEventListener("click", () => {
clear1mils = setInterval(countdownmils, 10);
clearInterval(clear2mils);
document.getElementById("stopclock2").innerHTML = "DOWN";
document.getElementById("stopclock").innerHTML = "UP";
document.getElementById("stopclock2").setAttribute("disabled", "true");
document.getElementById("stopclock").removeAttribute("disabled", "true");
});
Related
I have a timer function, I want to change the value of my variable after the timer reaches 0?
function countdown(minutes) {
var seconds = 60;
var mins = minutes
function tick() {
var counter = document.getElementById("timer");
current_minutes = mins - 1
seconds--;
counter.innerHTML =
current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
if (parseInt(current_minutes) === 0 && parseInt(seconds) === 00) {
sendAgain.show();
finalMin = parseInt(current_minutes);
finalSec = parseInt(seconds);
}
if (seconds > 0) {
timeoutHandle = setTimeout(tick, 1000);
} else {
if (mins > 1) {
// countdown(mins-1); never reach “00″ issue solved:Contributed by Victor Streithorst
setTimeout(function () { countdown(mins - 1); }, 1000);
}
}
}
tick();
}
variables :
let finalMin = null;
var finalSec = null;
I want the variables to be set after the following code is executed?
if (parseInt(current_minutes) === 0 && parseInt(seconds) === 00) {
sendAgain.show();
finalMin = parseInt(current_minutes);
finalSec = parseInt(seconds);
}
countdown(2);
console.log(finalMin); ===== show "0"
I'm trying to make a Timer for a project that record audios and while on the making, I've faced with this problem: setInterval is not stopping, why?
I have the following code:
/** Audio **/
var timerseconds = 0;
$('.audio-recorder-dialog-con').on('click', '#record', function() {
gotrecordval = document.getElementById("record").value;
//Crónometro
var timerseconds = setInterval(function() {
rseconds = parseInt(document.getElementById("r-seconds").value);
if (rseconds == 59) {
document.getElementById("r-seconds").value = "00";
}
rseconds = parseInt(document.getElementById("r-seconds").value);
rseconds += 1;
if (rseconds < 10) {
document.getElementById("r-seconds").value = ("00" + rseconds).substr(-2);
}
if (rseconds >= 10) {
document.getElementById("r-seconds").value = rseconds;
}
}, 1000);
//
if (gotrecordval == "Empezar a Grabar Audio") {
document.getElementById("record").value = "Detener/Subir";
}
if (gotrecordval == "Detener/Subir") {
document.getElementById("record").value = "Empezar a Grabar Audio";
$('.audio-recorder-dialog-con').fadeOut(500);
$(".contenido-dialog-new-d").fadeIn(500);
$("#aviaudio").fadeIn(500);
clearInterval(timerseconds);
}
});
--FIXED--
I've fixed it by adding this inside the setInterval:
//Crónometro
var timerseconds = setInterval(function(){
rseconds = parseInt(document.getElementById("r-seconds").value);
if(rseconds==59){document.getElementById("r-seconds").value = "00";}
rseconds = parseInt(document.getElementById("r-seconds").value);
rseconds+=1;
if(rseconds<10){document.getElementById("r-seconds").value = ("00" + rseconds).substr(-2);}
if(rseconds>=10){document.getElementById("r-seconds").value = rseconds;}
--Code added-
$('html, body').on('click', '.open-audio', function(){
clearInterval(timerseconds);
});
--
}, 1000);
//
".open-audio" is an image that opens the recording dialog for the user, so when you re-open it, the clearInterval works.
The solution you added to your question is not sound: this will create a new event handler at every 'tick' of the setInterval timer. That is not the right way to do it.
Instead, only execute setInterval in the case you need to start it, so put it inside the first if:
if (gotrecordval == "Empezar a Grabar Audio") {
//Crónometro
var timerseconds = setInterval(function() {
rseconds = parseInt(document.getElementById("r-seconds").value);
if (rseconds == 59) {
document.getElementById("r-seconds").value = "00";
}
rseconds = parseInt(document.getElementById("r-seconds").value);
rseconds += 1;
if (rseconds < 10) {
document.getElementById("r-seconds").value = ("00" + rseconds).substr(-2);
}
if (rseconds >= 10) {
document.getElementById("r-seconds").value = rseconds;
}
}, 1000);
//
document.getElementById("record").value = "Detener/Subir";
}
For some reason, my timer does not stop when the time reaches 0. JSFiddle. Here is the constructor for the countdown timer I made:
var Timer = function(opts) {
var self = this;
self.opts = opts || {};
self.element = opts.element || null;
self.minutes = opts.minutes || 0;
self.seconds = opts.seconds || 30;
self.start = function() {
self.interval = setInterval(countDown, 1000);
};
self.stop = function() {
clearInterval(self.interval);
};
function countDown() {
if (self.minutes == 0 && self.seconds == 0) {
self.stop();
}
self.seconds--;
if (self.seconds <= 0) {
self.seconds = 59;
self.minutes--;
}
if (self.seconds <= 9) { self.seconds = '0' + self.seconds; }
self.element.textContent = self.minutes + ' : ' + self.seconds;
}
};
and here is my usage:
HTML:
<div id="timer"></div>
JavaScript:
var myTimer = new Timer({
minutes: 0,
seconds: 10,
element: document.querySelector('#timer')
});
myTimer.start();
Change your countdown function to
function countDown() {
self.seconds--; //Changed Line
if (self.minutes == 0 && self.seconds == 0) {
self.stop();
}
if (self.seconds < 0) { //Changed Condition. Not include 0
self.seconds = 59;
self.minutes--;
}
if (self.seconds <= 9) { self.seconds = '0' + self.seconds; }
self.element.textContent = self.minutes + ' : ' + self.seconds;
}
http://jsfiddle.net/8d5LLeoa/3/
You just need to rearrange your countdown function a bit. It will never be zero when it hits your code that checks for a zero value. The code below works.
function countDown() {
self.seconds--;
self.element.textContent = self.minutes + ' : ' + self.seconds;
if (self.minutes === 0 && self.seconds === 0) {
self.stop();
return;
}
if (self.seconds <= 0) {
self.seconds = 59;
self.minutes--;
}
if (self.seconds <= 9) { self.seconds = '0' + self.seconds; }
}
};
The code changes the new Date() to DayHourMinute
e.g. monday9AM45minutes to 010945
What I use is 010945 and my code specifies
if the var is between >=010921 && <=011010
change the background to green else nothing
But nothing happens and if I use alert(Time) it gives the message 010945.
How can if fix this?
Code:
function one() {
now = new Date();
hour = "" + now.getHours();
if (hour.length == 1) {
hour = "0" + hour;
}
minute = "" + now.getMinutes();
if (minute.length == 1) {
minute = "0" + minute;
}
day = "" + now.getDay();
if (day.length == 1) {
day = "0" + day;
}
var Time = day + '' + hour + '' + minute;
if (Time >= 010835 && Time <= 010920) {
document.getElementById('Man1').style.background = 'green';
} else {
document.getElementById('Man1').style.background = '';
}
if (Time >= 010921 && Time <= 011010) {
document.getElementById('Man2').style.background = 'green';
} else {
document.getElementById('Man2').style.background = '';
}
if (Time >= 011011 && Time <= 011105) {
document.getElementById('Man3').style.background = 'green';
} else {
document.getElementById('Man3').style.background = '';
}
if (Time >= 011106 && Time <= 011155) {
document.getElementById('Man4').style.background = 'green';
} else {
document.getElementById('Man4').style.background = '';
}
if (Time >= 011156 && Time <= 011239) {
document.getElementById('Man5').style.background = 'green';
} else {
document.getElementById('Man5').style.background = '';
}
if (Time >= 011240 && Time <= 011325) {
document.getElementById('Man6').style.background = 'green';
} else {
document.getElementById('Man6').style.background = '';
}
if (Time >= 011326 && Time <= 011415) {
document.getElementById('Man7').style.background = 'green';
} else {
document.getElementById('Man7').style.background = '';
}
if (Time >= 011416 && Time <= 011505) {
document.getElementById('Man8').style.background = 'green';
} else {
document.getElementById('Man8').style.background = '';
}
if (Time >= 011506 && Time <= 011555) {
document.getElementById('Man9').style.background = 'green';
} else {
document.getElementById('Man9').style.background = '';
}
}
setInterval(one, 1000);
Fiddle
Time is a string, and you are comparing to an int. Put the values in quotes:
if ( Time>='020000' && Time<='030000' ){
I want to create multiple divs dynamically. Each one should remove itself after set amount of time. I have functions to create divs and to coutdown time. I don't know how to connect it together. And one more question, how to manage ids of dynamically added elements?
function creatediv(e)
{
ward = document.createElement('div');
ward.className="dynamic";
ward.id = id;
id++;
ward.style.pixelLeft = mouseX(e);
ward.style.pixelTop = mouseY(e);
document.body.appendChild(ward);
}
function timer(ID, time)
{
if(time > 0)
{
--time;
s=time%60;
m=Math.floor((time%3600)/60);
var S = document.getElementById(ID);
S.style.color = "white";
document.getElementById(ID).innerHTML =((m<10)?"0"+m:m)+":"+((s<10)?"0"+s:s);
setTimeout(function () {timer(ID,time)}, 1000);
}
if(time == 0)
{
return true;
}
}
Any hint is very much appreciated.
Thanks
function creatediv(e) {
ward = document.createElement('div');
ward.className = "dynamic";
ward.id = id;
id++;
ward.style.pixelLeft = mouseX(e);
ward.style.pixelTop = mouseY(e);
document.body.appendChild(ward);
timer(ward.id, THE_TIME_YOU_WANT);
}
function timer(ID, time) {
if (time > 0) {
--time;
s = time % 60;
m = Math.floor((time % 3600) / 60);
var S = document.getElementById(ID);
S.style.color = "white";
S.innerHTML = ((m < 10) ? "0" + m : m) + ":" + ((s < 10) ? "0" + s : s);
setTimeout(function () {
timer(ID, time)
}, 1000);
}
else {
// remove the div.
}
}