How to replace "0:00" with "Collect" in timer button

How to replace "0:00" with "Collect" in timer button - javascript

In the last days I had asked a question how to make a button that is disabled for 1 minute and when it is clickable again +25 points are added to a div. The problem is: When the timer is over it says "0:00". Is there a way to replace the "0:00" with "Collect"? I found similar questions on stackoverflow but they didn't help me.
Here is my code:
$('#btn').prop('disabled',true);
startCountDown();
function getCounter(){
return parseInt($('#counter').html());
}
function setCounter(count) {
$('#counter').html(count);
}
$("#btn").click(function() {
setCounter(getCounter()+25);
$('#btn').prop('disabled',true);
startCountDown();
});
function startCountDown() {
var minutes = 0,
seconds = 59;
$("#countdown").html(minutes + ":" + seconds);
var count = setInterval(function() {
if (parseInt(minutes) < 0 || parseInt(seconds) <=0 ) {
$("#countdown").html(minutes + ":" + seconds);
clearInterval(count);
$('#btn').prop('disabled',false);
} else {
$("#countdown").html(minutes + ":" + seconds);
seconds--;
if (seconds < 10) seconds = "0" + seconds;
}
}, 1000);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="counter">0</div>
<button id="btn">
<span id="countdown">0:00</span>
</button>
UPDATE:
I have updated my code as you can see in the second snippet. Unfortunately, I now have the problem that the number 0:01 has been replaced with "Collect". (So: 0:03, 0:02, Collect(disabled), Collect(enabled)). Here is the code:
$('#btn').prop('disabled',true);
startCountDown();
function getCounter(){
return parseInt($('#counter').html());
}
function setCounter(count) {
$('#counter').html(count);
}
$("#btn").click(function() {
setCounter(getCounter()+25);
$('#btn').prop('disabled',true);
startCountDown();
});
function startCountDown() {
var minutes = 0,
seconds = 60;
$("#countdown").html(minutes + ":" + seconds);
var count = setInterval(function() {
if (parseInt(minutes) < 0 || parseInt(seconds) <=0 ) {
$("#countdown").html(minutes + ":" + seconds);
clearInterval(count);
$('#btn').prop('disabled',false);
} else {
$("#countdown").html(minutes + ":" + seconds);
seconds--;
if (seconds < 10) seconds = "0" + seconds;}
if (seconds == 0) {// replacing 0:00 with "Collect" is right here
$('#countdown').html("Collect");
}
}, 1000);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="counter">0</div>
<button id="btn">
<span id="countdown">Collect</span>
</button>

Hello GuciiBananaKing99,
I have found the solution to your problem. You need to add an if statement when seconds is 0. Then change $('#btn').html to "Collect".
Here is the full code:
function startCountDown() {
var minutes = 0,
seconds = 59;
$("#countdown").html(minutes + ":" + seconds);
var count = setInterval(function() {
if (parseInt(minutes) < 0 || parseInt(seconds) <=0 ) {
$("#countdown").html(minutes + ":" + seconds);
clearInterval(count);
$('#btn').prop('enabled',false);
} else {
$("#countdown").html(minutes + ":" + seconds);
seconds--;
if (seconds < 10) {seconds = "0" + seconds;}
if (seconds == 0) { // Check if seconds is 0
$('#btn').html("Collect"); // Change Btn's HTML to Collect
});
}
}, 1000);
}

Related

How to Restart Countdown Timer After Every 90 Hours

$(document).ready(function()
{
var days = 03; var hours = 18; var minutes = 00; var seconds = 00;
function calculate()
{
setTimeout(calculate, 1000); $('#showDate').html(days + ':' + hours + ':' + minutes + ':' + seconds);
seconds--;
if (seconds < 0) { seconds = 59; minutes--;
if (minutes < 0) { hours--; minutes = 59;
if (hours < 0) { days--; hours = 23;
if (days < 0) { days = 0; hours = 0; minutes = 0; seconds = 0;
}}}}
}
calculate();
});
<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<div id='showDate'></div>
Hope so you all will be fine.
Come to the Point, I want to reset the count down that i created using jquery after every 90 hours.
I had written below code yet.
It does not reset after 90 hours means after 3 days and 18 hours.
Kindly Help me.
<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<script type='text/javascript'>
$(document).ready(function()
{
var days = 03; var hours = 18; var minutes = 00; var seconds = 00;
function calculate()
{
setTimeout(calculate, 1000); $('#showDate').html(days + ':' + hours + ':' + minutes + ':' + seconds);
seconds--;
if (seconds < 0) { seconds = 59; minutes--;
if (minutes < 0) { hours--; minutes = 59;
if (hours < 0) { days--; hours = 23;
if (days < 0) { days = 0; hours = 0; minutes = 0; seconds = 0;
}}}}
}
calculate();
});
</script>
<div id='showDate'></div>

You can try something like following :
<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<script type='text/javascript'>
$(document).ready(function()
{
var days = 00; var hours = 00; var minutes = 1; var seconds = 00;
function calculate()
{
setTimeout(calculate, 1000); $('#showDate').html(days + ':' + hours + ':' + minutes + ':' + seconds);
if(days == 0 && hours ==00 && minutes == 0 && seconds == 00)
{
minutes = 1;
}
seconds--;
if (seconds < 0) { seconds = 59; minutes--;
if (minutes < 0) { hours--; minutes = 59;
if (hours < 0) { days--; hours = 23;
if (days < 0) { days = 0; hours = 0; minutes = 0; seconds = 0;
}}}}
}
calculate();
});
</script>
<div id='showDate'></div>

<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<script type='text/javascript'>
$(document).ready(function()
{
var days = 03; var hours = 18; var minutes = 00; var seconds = 00;
function calculate()
{
setTimeout(calculate, 1000); $('#showDate').html(days + ':' + hours + ':' + minutes + ':' + seconds);
seconds--;
if (seconds < 0) { seconds = 59; minutes--;
if (minutes < 0) { hours--; minutes = 59;
if (hours < 0) { days--; hours = 23;
if (days < 0) { days = 0; hours = 0; minutes = 0; seconds = 0;
}}}}
if((seconds == 0) && (minutes == 0) && (hours == 0) && (days == 0))
{
days = 03;
hours = 18;
minutes = 00;
seconds = 20;
}
}
calculate();
});
</script>
<div id='showDate'></div>

Session Timeout doesn't work by using javascript

I have below script. When the time is 60 sec or less the popup is appear(which asks user for whether to log out or continue) and when I click on continue from that button of popup it reloads the page. The issue is sometimes it goes logged out. Not sure whats wrong with below code. Any help is appriciated.
var startTime = new Date();
var endTime = new Date(startTime.getTime() + (#FormsAuthentication.Timeout.TotalMilliseconds));
var i = 0;
function updateTimeoutDuration() {
var diff = Math.floor((new Date() - endTime) / 1000) * -1;
if (diff > 0) {
minutes = Math.floor(diff / 60);
seconds = Math.floor(diff % 60);
$('#timeout-countdown #remaining-time').html(((minutes < 10) ? '0' : '') + minutes + ':' + ((seconds < 10) ? '0' : '') + seconds);
console.log("Timeout - countdown",((minutes < 10) ? '0' : '') + minutes + ':' + ((seconds < 10) ? '0' : '') + seconds);
$('#dialog-timeout-confirm #timeout-countdown-popup #remaining-time-popup').html(((minutes < 10) ? '0' : '') + minutes + ':' + ((seconds < 10) ? '0' : '') + seconds);
// popup message will display when 60 sedconds remaining
if (diff < 60) {
// Autometically logged out when 0 second when timer will reach to 0 second
if (diff < 1) {
$("#logoutfrm").submit();
}
$('#timeout-countdown #remaining-time').addClass('warning');
$('#dialog-timeout-confirm #timeout-countdown-popup #remaining-time-popup').addClass('warning');
//Popup message will open
if (i == 0) {
i = 1;
popupMessage();
}
i = 1;
}
}
else {
window.location.href = '#FormsAuthentication.LoginUrl' + '?redirectUrl=' + encodeURIComponent(window.location.pathname);
}
}
$(function () {
setInterval(updateTimeoutDuration, 1000);
});
function popupMessage()
{
$("#dialog-timeout-confirm").dialog({
resizable: false,
height: 240,
modal: true,
buttons: [
{
text: "Log out",
"class": 'popup_logoutbtn',
click: function() {
var logoutfrm = document.getElementById('logoutForm');
if(logoutfrm != undefined && logoutfrm != null && logoutfrm != ''){
//logoutfrm.submit();
$("#logoutfrm").submit();
}
else{
window.location.href = '#FormsAuthentication.LoginUrl' + '?redirectUrl=' + encodeURIComponent(window.location.pathname);
}
}
},
{
text: "Stay Logged In",
"class": 'popup_staylogoutbtn',
click: function() {
location.reload();
}
}
]
});
}

JavaScript - can't make the timer function to be called when the page is loaded

I'm trying to make my simple timer function to be called when the page is loaded. But it doesn't work. I think I made mistake somewhere in the if else loop, maby here: setTimeout(function(tag, sec), 1000);
How can I fix it?
<script>
document.addEventListener('DOMContentLoaded', function(tag, sec) {
tag = "timerPlace";
sec = 3600;
document.getElementById(tag).innerHTML = "<div id= 'inTime'>" + (sec / 60 >> 0) + 'min ' + sec % 60 + 'sec' + '<br>' + "</div>";
if ((sec / 60 >> 0) != 0 || (sec % 60) != 0) {
setTimeout(function(tag, sec), 1000);
sec -= 1;
} else {
document.getElementById(tag).innerHTML = "Time is over!";
}
}, false);
</script>
<div id="timerPlace"></div>

Try this,
javascript
// Code goes here
function saysomething() {
alert('say something');
}
document.addEventListener('DOMContentLoaded', function(tag, sec) {
tag = "timerPlace";
sec = 3600;
document.getElementById(tag).innerHTML = "<div id= 'inTime'>" + (sec / 60 >> 0) + 'min ' + sec % 60 + 'sec' + '<br>' + "</div>";
if ((sec / 60 >> 0) != 0 || (sec % 60) != 0) {
// setTimeout(function(tag, sec), 1000);
setTimeout(saysomething, 1000);
sec -= 1;
} else {
document.getElementById(tag).innerHTML = "Time is over!";
}
}, false);
HTML
<body>
<div id="timerPlace"></div>
</body>
or
<script>
//Timer function
window.onload = function() {
myFunction();
};
function myFunction(){
timer('timerPlace',3600);
}
function timer(tag, sec) {
document.getElementById(tag).innerHTML = "<div id= 'inTime'>" +
(sec / 60 >> 0) + 'min ' + sec % 60 + 'sec' + '<br>' + "</div>";
if ((sec / 60 >> 0) != 0 || (sec % 60) != 0) {
setTimeout(function() {
timer(tag, sec);
}, 1000);
sec -= 1;
} else {
document.getElementById(tag).innerHTML = "Time is over!";
}
}
</script>
<div id="timerPlace"></div>
<br>
<br>
<br>
<br>
<!-- Write number of seconds here: onclick="timer('str',...here!...) -->
<button class="button" onclick="timer('timerPlace',3600); style.display = 'none'"> <span>Start Test</span>
</button>
<!-- Place this div where you whant timer to be. -->

https://jsfiddle.net/Lk963xa0/
Made an example with Jquery, not sure if this is what you are looking for
JS
$(document).ready(function(){
tag = "timerPlace";
sec = 15;
var timer = function(){
setTimeout(function(){
sec--;
document.getElementById(tag).innerHTML = "<div id= 'inTime'>" + sec + "</div>"
if(sec === 0 ){console.log("time is out"); return}
timer();
}, 1000);
};
timer();
});
HTML
<div id="timerPlace"></div>

I corrected your code. I still don't really know what you are trying to achieve.
setTimeout callback is empty for you to write what it needs to do.
This is the correct way to wait for the DOM to be ready before executing a query looking for an element in it.
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
var tag = "timerPlace";
var sec = 3600;
document.getElementById(tag).innerHTML = "<div id= 'inTime'>" + (sec / 60 >> 0) + 'min ' + sec % 60 + 'sec' + '<br>' + "</div>";
if ((sec / 60 >> 0) != 0 || (sec % 60) != 0) {
setTimeout(function() {
//Do something after 1000
}, 1000);
sec -= 1;
} else {
document.getElementById(tag).innerHTML = "Time is over!";
}
});
jsFiddle
Edit:
To execute after page load, use this:
window.addEventListener('load', function () {
//Code to execute after page load
});

JS Code Works in jsbin and Not in jsfiddle or Chrome/Safari?

I am trying to figure out why this code is working only in jsbin and not in jsfiddle or in any web browser as an html/js file. I have tried debugging but cannot find a conclusion.
I made the mistake of coding directly in jsbin instead of a document. Any input would be appreciated.
http://jsbin.com/tuduxedohe/7/edit
http://jsfiddle.net/2rs1x5pz/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Timer</title>
<script type="text/javascript" src="part2.js"></script>
</head>
<body>
<h1><div id="time">00:00:00</div></h1>
<div id="result"></div>
<button id="start" onclick ="startClock();" >Start</button>
<button id="stop" onclick="stopTimer();">Stop</button>
<button id="clear" onclick="resetTimer();">Reset</button>
</body>
</html>
var currentTime = document.getElementById('time');
var hundreths = 0;
var seconds = 0;
var minutes = 0;
var t;
function startClock() {
function add() {
hundreths++;
if (hundreths > 99) {
hundreths = 0;
seconds++;
if (seconds > 59) {
seconds = 0;
minutes++;
}
if(minutes >= 10) {
seconds= 0;
minutes= 0;
stopTimer();
}
}
if (hundreths > 9 && seconds < 9) {
currentTime.innerHTML = "0" + minutes + ":" + "0" + seconds + ":" + hundreths;
}
else if ((seconds > 9 ) && (hundreths < 9)) {
currentTime.innerHTML = "0" + minutes + ":" + seconds + ":" + "0" + hundreths;
}
else if((seconds > 9) && (hundreths > 9)) {
currentTime.innerHTML = "0" + minutes + ":" + seconds + ":" + hundreths;
}
else if ((minutes > 9) && (seconds < 9) && (hundreths < 9)) {
currentTime.innerHTML = minutes + ":" + "0" + seconds + ":" + "0" + hundreths;
}
else if ((minutes > 9) && (seconds > 9) && (hundreths < 9)) {
currentTime.innerHTML = minutes + ":" + seconds + ":" + "0" + hundreths;
}
else if ((minutes > 9) && (seconds > 9) && (hundreths < 9)) {
currentTime.innerHTML = minutes + ":" + seconds + ":" + hundreths;
}
else {
currentTime.innerHTML = "0" + minutes + ":" + "0" + seconds + ":" + "0" + hundreths;
}
timer();
}
function timer() {
t = setTimeout(add, 1);
}
timer();
} // end function start clock
function stopTimer() {
document.getElementById("result").innerHTML = "<p>" + ("Your time is: " + minutes + " minutes, " + seconds + " seconds, " + "and " + hundreths + " hundreths") + "</p>";
clearTimeout(t);
}
function resetTimer() {
hundreths = 0;
seconds = 0;
minutes = 0;
currentTime.innerHTML = "00:00:00";
}

That is because by default the script is added in a onload handler in jsfiddle, so your methods is available only inside the scope of that closure. So it will be
window.onload=function(){
//your script is here
}
You are trying to access them in global scope when you are trying to call them from on<event>="" attributes which will give an error like Uncaught ReferenceError: startClock is not defined in your console.
Change the second dropdown in the left panel under Frameworks & Extensions to body/head in the left panel of fiddle to add the script without a wrapper function
Demo: Fiddle

How to create a JQuery Clock / Timer

I have a simple quiz application and I want display a nice timer / clock at the top of the page which shows the user how long they've been going for. (If I could somehow show them a timer for Total Quiz Time and also a second one for This Question Time that would be even cooler but I should be able to figure out how to do myself that once I've got one timer working.
My question is:
What's a nice, easy way to show a simple timer / clock using JQuery? (straight JS is also ok) I know how to check time, but how do I get incrementing seconds?
My own searches keep leading me to JQuery plugins (I want to roll my own) and also "event timers" which are not what I'm looking for...

You're looking for the setInterval function, which runs a function every x milliseconds.
For example:
var start = new Date;
setInterval(function() {
$('.Timer').text((new Date - start) / 1000 + " Seconds");
}, 1000);

setInterval as suggested by SLaks was exactly what I needed to make my timer. (Thanks mate!)
Using setInterval and this great blog post I ended up creating the following function to display a timer inside my "box_header" div. I hope this helps anyone else with similar requirements!
function get_elapsed_time_string(total_seconds) {
function pretty_time_string(num) {
return ( num < 10 ? "0" : "" ) + num;
}
var hours = Math.floor(total_seconds / 3600);
total_seconds = total_seconds % 3600;
var minutes = Math.floor(total_seconds / 60);
total_seconds = total_seconds % 60;
var seconds = Math.floor(total_seconds);
// Pad the minutes and seconds with leading zeros, if required
hours = pretty_time_string(hours);
minutes = pretty_time_string(minutes);
seconds = pretty_time_string(seconds);
// Compose the string for display
var currentTimeString = hours + ":" + minutes + ":" + seconds;
return currentTimeString;
}
var elapsed_seconds = 0;
setInterval(function() {
elapsed_seconds = elapsed_seconds + 1;
$('#box_header').text(get_elapsed_time_string(elapsed_seconds));
}, 1000);

################## JQuery (use API) #################
$(document).ready(function(){
function getdate(){
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
if(s<10){
s = "0"+s;
}
if (m < 10) {
m = "0" + m;
}
$("h1").text(h+" : "+m+" : "+s);
setTimeout(function(){getdate()}, 500);
}
$("button").click(getdate);
});
################## HTML ###################
<button>start clock</button>
<h1></h1>

How about the best of both worlds? I combined the answer with the OP's format.
function pretty_time_string(num) {
return ( num < 10 ? "0" : "" ) + num;
}
var start = new Date;
setInterval(function() {
var total_seconds = (new Date - start) / 1000;
var hours = Math.floor(total_seconds / 3600);
total_seconds = total_seconds % 3600;
var minutes = Math.floor(total_seconds / 60);
total_seconds = total_seconds % 60;
var seconds = Math.floor(total_seconds);
hours = pretty_time_string(hours);
minutes = pretty_time_string(minutes);
seconds = pretty_time_string(seconds);
var currentTimeString = hours + ":" + minutes + ":" + seconds;
$('.timer').text(currentTimeString);
}, 1000);

A 24 hour clock:
setInterval(function(){
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
// Add leading zeros
minutes = (minutes < 10 ? "0" : "") + minutes;
seconds = (seconds < 10 ? "0" : "") + seconds;
hours = (hours < 10 ? "0" : "") + hours;
// Compose the string for display
var currentTimeString = hours + ":" + minutes + ":" + seconds;
$(".clock").html(currentTimeString);
},1000);
// 24 hour clock
setInterval(function() {
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
// Add leading zeros
hours = (hours < 10 ? "0" : "") + hours;
minutes = (minutes < 10 ? "0" : "") + minutes;
seconds = (seconds < 10 ? "0" : "") + seconds;
// Compose the string for display
var currentTimeString = hours + ":" + minutes + ":" + seconds;
$(".clock").html(currentTimeString);
}, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clock"></div>

If you can use jQuery with Moment.js (great library), this is the way:
var crClockInit1 = null;
var crClockInterval = null;
function crInitClock() {
crClockInit1 = setInterval(function() {
if (moment().format("SSS") <= 40) {
clearInterval(crClockInit1);
crStartClockNow();
}
}, 30);
}
function crStartClockNow() {
crClockInterval = setInterval(function() {
$('#clock').html(moment().format('D. MMMM YYYY H:mm:ss'));
}, 1000);
}
Start clock initialization with crInitClock(). It's done this way to synchronize seconds. Without synchronization, you would start 1 second timer in half of second and it will be half second late after real time.

var eventdate = new Date("January 01, 2014 00:00:00");
function toSt(n) {
s=""
if(n<10) s+="0"
return s+n.toString();
}
function countdown() {
cl=document.clock;
d=new Date();
count=Math.floor((eventdate.getTime()-d.getTime())/1000);
if(count<=0)
{cl.days.value ="----";
cl.hours.value="--";
cl.mins.value="--";
cl.secs.value="--";
return;
}
cl.secs.value=toSt(count%60);
count=Math.floor(count/60);
cl.mins.value=toSt(count%60);
count=Math.floor(count/60);
cl.hours.value=toSt(count%24);
count=Math.floor(count/24);
cl.days.value=count;
setTimeout("countdown()",500);
}
Hello, I've a similar assignment which involved creating a Javascript Countdown Clock. Here's the code I used. Plug the above code between the < script language="Javascript" >< /script > tags. Keep in mind that just having this javascript won't do much if you don't have the html to display the clock. I'll leave writing the html to you. Design the clock however you wish.

var timeInterval = 5;
var blinkTime = 1;
var open_signal = 'signal1';
var total_signal = 1;
$(document).ready(function () {
for (var i = 1; i <= total_signal; i++) {
var timer = (i == 1) ? timeInterval : (timeInterval * (i - 1));
var str_html = '<div id="signal' + i + '">' +
'<span class="float_left">Signal ' + i + ' : </span>' +
'<div class="red float_left"></div>' +
'<div class="yellow float_left"></div>' +
'<div class="green float_left"></div>' +
'<div class="timer float_left">' + timer + '</div>' +
'<div style="clear: both;"></div>' +
'</div><div class="div_separate"></div>';
$('.div_demo').append(str_html);
}
$('.div_demo .green').eq(0).css('background-color', 'green');
$('.div_demo .red').css('background-color', 'red');
$('.div_demo .red').eq(0).css('background-color', 'white');
setInterval(function () {
manageSignals();
}, 1000);
});
function manageSignals() {
var obj_timer = {};
var temp_i = parseInt(open_signal.substr(6));
if ($('#' + open_signal + ' .timer').html() == '0')
open_signal = (temp_i == total_signal) ? 'signal1' : 'signal' + (temp_i + 1);
for (var i = 1; i <= total_signal; i++) {
var next_signal = (i == total_signal) ? 'signal1' : 'signal' + (i + 1);
obj_timer['signal' + i] = parseInt($('#signal' + i + ' .timer').html()) - 1;
if (obj_timer['signal' + i] == -1 && open_signal == next_signal && total_signal!=1) {
obj_timer['signal' + i] = (timeInterval * (total_signal - 1)) - 1;
$('#signal' + i + ' .red').css('background-color', 'red');
$('#signal' + i + ' .yellow').css('background-color', 'white');
}
else if (obj_timer['signal' + i] == -1 && open_signal == 'signal' + i) {
obj_timer['signal' + i] = (timeInterval - 1);
$('#signal' + i + ' .red').css('background-color', 'white');
$('#signal' + i + ' .yellow').css('background-color', 'white');
$('#signal' + i + ' .green').css('background-color', 'green');
}
else if (obj_timer['signal' + i] == blinkTime && open_signal == 'signal' + i) {
$('#signal' + i + ' .yellow').css('background-color', 'yellow');
$('#signal' + i + ' .green').css('background-color', 'white');
}
$('#signal' + i + ' .timer').html(obj_timer['signal' + i]);
}
}
</script>

Here's #SLaks answer, but in pure ES6 JavaScript.
var start = new Date,
$timer = document.querySelector('.Timer');
setInterval(function(timestamp) {
$timer.innerText = `${timestamp - start) / 1000} Seconds`;
}, 1000);

Just used the #Uday answer code and build a reverse clock of hr:mm
Was just playing, so thought if anyone would might need this, so sharing the fiddle in comments (Dnt know why stackover flow is not allowing me to paste the link here)

var timeInterval = 5;
var blinkTime = 1;
var open_signal = 'top_left';
$(document).ready(function () {
$('#div_top_left .timer').html(timeInterval);
$('#div_top_right .timer').html(timeInterval);
$('#div_bottom_right .timer').html(timeInterval * 2);
$('#div_bottom_left .timer').html(timeInterval * 3);
$('#div_top_left .green').css('background-color', 'green');
$('#div_top_right .red').css('background-color', 'red');
$('#div_bottom_right .red').css('background-color', 'red');
$('#div_bottom_left .red').css('background-color', 'red');
setInterval(function () {
manageSignals();
}, 1000);
});
function manageSignals() {
var top_left_time = parseInt($('#div_top_left .timer').html()) - 1;
var top_right_time = parseInt($('#div_top_right .timer').html()) - 1;
var bottom_left_time = parseInt($('#div_bottom_left .timer').html()) - 1;
var bottom_right_time = parseInt($('#div_bottom_right .timer').html()) - 1;
if (top_left_time == -1 && open_signal == 'top_left') open_signal = 'top_right';
else if (top_right_time == -1 && open_signal == 'top_right') open_signal = 'bottom_right';
else if (bottom_right_time == -1 && open_signal == 'bottom_right') open_signal = 'bottom_left';
else if (bottom_left_time == -1 && open_signal == 'bottom_left') open_signal = 'top_left';
if (top_left_time == -1) {
if (open_signal == 'top_right') {
top_left_time = (timeInterval * 3) - 1;
$('#div_top_left .red').css('background-color', 'red');
$('#div_top_left .yellow').css('background-color', 'white');
$('#div_top_left .green').css('background-color', 'white');
}
else if (open_signal == 'top_left') {
top_left_time = timeInterval - 1;
$('#div_top_left .red').css('background-color', 'white');
$('#div_top_left .yellow').css('background-color', 'white');
$('#div_top_left .green').css('background-color', 'green');
}
}
if (top_right_time == -1) {
if (open_signal == 'bottom_right') {
top_right_time = (timeInterval * 3) - 1;
$('#div_top_right .red').css('background-color', 'red');
$('#div_top_right .yellow').css('background-color', 'white');
$('#div_top_right .green').css('background-color', 'white');
}
else if (open_signal == 'top_right') {
top_right_time = timeInterval - 1;
$('#div_top_right .red').css('background-color', 'white');
$('#div_top_right .yellow').css('background-color', 'white');
$('#div_top_right .green').css('background-color', 'green');
}
}
if (bottom_right_time == -1) {
if (open_signal == 'bottom_left') {
bottom_right_time = (timeInterval * 3) - 1;
$('#div_bottom_right .red').css('background-color', 'red');
$('#div_bottom_right .yellow').css('background-color', 'white');
$('#div_bottom_right .green').css('background-color', 'white');
}
else if (open_signal == 'bottom_right') {
bottom_right_time = timeInterval - 1;
$('#div_bottom_right .red').css('background-color', 'white');
$('#div_bottom_right .yellow').css('background-color', 'white');
$('#div_bottom_right .green').css('background-color', 'green');
}
}
if (bottom_left_time == -1) {
if (open_signal == 'top_left') {
bottom_left_time = (timeInterval * 3) - 1;
$('#div_bottom_left .red').css('background-color', 'red');
$('#div_bottom_left .yellow').css('background-color', 'white');
$('#div_bottom_left .green').css('background-color', 'white');
}
else if (open_signal == 'bottom_left') {
bottom_left_time = timeInterval - 1;
$('#div_bottom_left .red').css('background-color', 'white');
$('#div_bottom_left .yellow').css('background-color', 'white');
$('#div_bottom_left .green').css('background-color', 'green');
}
}
if (top_left_time == blinkTime && open_signal == 'top_left') {
$('#div_top_left .yellow').css('background-color', 'yellow');
$('#div_top_left .green').css('background-color', 'white');
}
if (top_right_time == blinkTime && open_signal == 'top_right') {
$('#div_top_right .yellow').css('background-color', 'yellow');
$('#div_top_right .green').css('background-color', 'white');
}
if (bottom_left_time == blinkTime && open_signal == 'bottom_left') {
$('#div_bottom_left .yellow').css('background-color', 'yellow');
$('#div_bottom_left .green').css('background-color', 'white');
}
if (bottom_right_time == blinkTime && open_signal == 'bottom_right') {
$('#div_bottom_right .yellow').css('background-color', 'yellow');
$('#div_bottom_right .green').css('background-color', 'white');
}
$('#div_top_left .timer').html(top_left_time);
$('#div_top_right .timer').html(top_right_time);
$('#div_bottom_left .timer').html(bottom_left_time);
$('#div_bottom_right .timer').html(bottom_right_time);
}

We Keep Coding

JavaScript is the programming language of the Web.

How to replace "0:00" with "Collect" in timer button - javascript

Related

How to Restart Countdown Timer After Every 90 Hours

Session Timeout doesn't work by using javascript

JavaScript - can't make the timer function to be called when the page is loaded

JS Code Works in jsbin and Not in jsfiddle or Chrome/Safari?

How to create a JQuery Clock / Timer

Categories

Resources