How to do a regressive counter with javascript?

Question

How to do a regressive counter with javascript?

Navigation

#1 by (1 votes)
#2 by (1 votes)

11

Hello folks I do not understand pretty much anything from Javascript, so for weeks I was trying to make a script that would do the following:

                                  00:00:00

1st started a countdown of 20 minutes after clicking on a link.

2nd And at the same time redirect to a website.

3º on passing the 20 minutes the clock would be at zero so 00:00:00 so that the user clicked and started counting again and redirected to the post-click site.

(Remember that redirects after clicking and not after finishing the count!)

4th And I had cookies to continue counting even after refreshing the page!

I could not do this, but I found a script that does almost everything listed above. The only problem with the script is that it does not have the link to click and start counting and does not even have the cookie code to continue even after refreshing the page! See the code below and if you know what I can do to put the link to be clicked and the code of cookies

<html><head>	<script language="javaScript">	
	var min, seg;		min = 20;		seg = 1		
	function relogio(){			
		if((min > 0) || (seg > 0)){				
			if(seg == 0){					
				seg = 59;					
				min = min - 1	
			}				
			else{					
				seg = seg - 1;				
			}				
			if(min.toString().length == 1){					
				min = "0" + min;				
			}				
			if(seg.toString().length == 1){					
				seg = "0" + seg;				
			}				
			document.getElementById('spanRelogio').innerHTML = min + ":" + seg;				
			setTimeout('relogio()', 1000);			
		}			
		else{				
			document.getElementById('spanRelogio').innerHTML = "00:00";			
		}		
	}	
</script></head><body style="font-family:verdana;font-size:10px;" onLoad="relogio()">	<span id="spanRelogio"></span></body></html>

People I gave a change in the script and can put the link, but it happens that after the count is finished it gets stuck at 00:00 and clicking again does not start the count again (I changed it to 1 minute to be faster) ↓

		<script language="javaScript">	
			var min, seg;		min = 1;		seg = 1		
			function relogio(){			
				if((min > 0) || (seg > 0)){				
					if(seg == 0){					
						seg = 59;					
						min = min - 1	
					}				
					else{					
						seg = seg - 1;				
					}				
					if(min.toString().length == 1){					
						min = "0" + min;				
					}				
					if(seg.toString().length == 1){					
						seg = "0" + seg;				
					}				
					document.getElementById('spanRelogio').innerHTML = min + ":" + seg;				
					setTimeout('relogio()', 1000);			
				}			
				else{				
					document.getElementById('spanRelogio').innerHTML = "00:00";			
				}		
			}	
		</script>	
	<a href="http://pt.stackoverflow.com/" onClick="relogio(event)" target="_blank">Clique Aqui</a>
	
	<span id="spanRelogio"></span>

javascript cookies onclick countdown

asked by anonymous 17.05.2016 / 18:59

2 answers

Radio Stream with Phonegap Why does PHP allow you to create identifier names with special characters?

score 1 · Answer 1

I've made some changes to your code. Take a look:

Note: To test the code. save it and test it on your local server. If not the cookie will not work!

<script language="javaScript">	
'use strict'
			var min = 1,
				seg = 1;

			function start() {

				if((min == 1) && (seg == 1)){
					relogio()
				}
			}

			function relogio(){		

				if((min > 0) || (seg > 0)){				
					if(seg == 0){					
						seg = 59;					
						min = min - 1	
					}				
					else{					
						seg = seg - 1;				
					}				
					if(min.toString().length == 1){					
						min = "0" + min;				
					}				
					if(seg.toString().length == 1){					
						seg = "0" + seg;				
					}				
					document.getElementById('spanRelogio').innerHTML = min + ":" + seg;				
					setTimeout('relogio()', 1000);		
					setCookie('tempo',min + ":" + seg,30)
				}			
				else{				
					document.getElementById('spanRelogio').innerHTML = "00:00";		
					min = 1;
					seg = 1;	
				}		
			}	

			function setCookie(cname,cvalue,exdays) {
			    var d = new Date();
			    d.setTime(d.getTime() + (exdays*24*60*60*1000));
			    var expires = "expires=" + d.toGMTString();
			    document.cookie = cname+"="+cvalue+"; "+expires;
			}

			function getCookie(cname) {
			    var name = cname + "=";
			    var ca = document.cookie.split(';');
			    for(var i=0; i<ca.length; i++) {
			        var c = ca[i];
			        while (c.charAt(0)==' ') {
			            c = c.substring(1);
			        }
			        if (c.indexOf(name) == 0) {
			            return c.substring(name.length, c.length);
			        }
			    }
			    return "";
			}

			function checkCookie() {

			    var cookie = getCookie("tempo");

			    if ( cookie != "" ) {

					var tempo = getCookie('tempo').split(':');
					min = tempo[0];
					seg = tempo[1];

					relogio();
			    } 

			}
		</script>	

		<body onload="checkCookie()">
	<a href="http://pt.stackoverflow.com/" onClick="start()" target="_blank">Clique Aqui</a>
	
	<span id="spanRelogio"></span>

	<body>

Explanation:

Fixed your problem of always calling the clock function (). I created a function called start () that checks whether the clock function () has already been called.

For the use of the cookie, I followed the documentation for: w3schools

Take a look at the code and any questions feel free to ask! ;)

score 1 · Answer 2

   ***** ON Pure javascript *****

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);
}

window.onload = function () {
    var fiveMinutes = 60 * 5,
        display = document.querySelector('#time');
    startTimer(fiveMinutes, display);
};




***** On JQUERY *****


function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.text(minutes + ":" + seconds);

        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);
}

jQuery(function ($) {
    var fiveMinutes = 60 * 5,
        display = $('#time');
    startTimer(fiveMinutes, display);
});