How to place an indicator for how much time is left

HTML, Post, Timer, Web Forms, , ,

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.

Leave a Reply