Hello,
I have a web page with a displayed google map and every several seconds the values are updated automatically on the map. Can anybody tell me please how to place an indicator that will show how much time is left for the next update?
For the timer I have this in the java script
var tim=<%= Session["21"] %>*1000;
setInterval(function(){ initialize();}, tim);
Thanks
You can try with the below code
Change the number passed to the function "startCountdown’ found in the body tag to the amount of seconds you want.
<html> <head> <title></title> <script> function startCountdown(timeLeft) { var interval = setInterval( countdown, 1000 ); update(); function countdown() { if ( --timeLeft > 0 ) { update(); } else { clearInterval( interval ); update(); completed(); } } function update() { hours = Math.floor( timeLeft / 3600 ); minutes = Math.floor( ( timeLeft % 3600 ) / 60 ); seconds = timeLeft % 60; document.getElementById('time-left').innerHTML = '' + hours + ':' + minutes + ':' + seconds; } function completed() { alert('Time Up!'); //Your Logic here } } </script> </head> <body onload="startCountdown(20);"> Time Left <span id="time-left"></span> </body> </html>
Hi A2H,
I tailored your code to mine but it doesn’t update anything, not only the time left but neither the infoboxes that were updated before. Here is my code now:
function startCountdown(timeLeft) { var interval = setInterval( countdown, tim*1000 ); update(); function countdown() { if ( --timeLeft > 0 ) { update(); } else { clearInterval( interval ); update(); completed(); } } function update() { hours = Math.floor( timeLeft / 3600 ); minutes = Math.floor( ( timeLeft % 3600 ) / 60 ); seconds = timeLeft % 60; setInterval(function(){ initialize();}, tim*1000); document.getElementById('time-left').innerHTML = '' + hours + ':' + minutes + ':' + seconds; } function completed() { alert('Time Up!'); //Your Logic here //setInterval(function(){ initialize();}, tim*1000); } } ... .. <body onload="initialize()"; "startCountdown(20)"; style="padding: 1em"> ... ... Time Left <span id="time-left"></span>
nat06
<body onload="initialize()"; "startCountdown(20)"; style="padding: 1em">
Hi nat06,
Thanks for your post.
I see some syntax error in your code, please correct it and try again
<body onload="initialize(); startCountdown(20)" style="padding: 1em">
Hope this helps, thanks.
Best Regards!
Thanks Fuxiang, I tried like that as well, but again the time is not showing, I see only
Time Left as if <span id="time-left"></span> didn’t exist
The problem is you are using a variable called "tim" and you didn’t declare that variable anywhere in the code. You need to declare that variable and assign a value to it.
Please use the below updated code
<html> <head> <title></title> <script> function startCountdown(timeLeft) { //Declare the variable and provide a time var tim =10; var interval = setInterval( countdown, tim*1000 ); update(); function countdown() { if ( --timeLeft > 0 ) { update(); } else { clearInterval( interval ); update(); completed(); } } function update() { hours = Math.floor( timeLeft / 3600 ); minutes = Math.floor( ( timeLeft % 3600 ) / 60 ); seconds = timeLeft % 60; setInterval(function(){ initialize();}, tim*1000); document.getElementById('time-left').innerHTML = '' + hours + ':' + minutes + ':' + seconds; } function completed() { alert('Time Up!'); //Your Logic here //setInterval(function(){ initialize();}, tim*1000); } } function initialize() {} </script> </head> <body onload="initialize(); startCountdown(20);"> Time Left <span id="time-left"></span> </body> </html>
No, I have already declared it but I didn’t post it with the code. But thanks anyway.