locked
How to show countdown timer RRS feed

  • Question

  • User1674292998 posted
    I am making online examniation. Now i want to show countdown timer to user and after prespecific time one alert message show and then user redirect to another page
    Saturday, May 17, 2014 12:20 PM

Answers

  • User2103319870 posted

    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 to pass before redirecting the use.

    <html>
    <head>
    <title></title>
    <script>
        function startCountdown(timeLeft) {
            var interval = setInterval( countdown, 1000 );
            update();
    
            function countdown() {
                if ( --timeLeft > 0 ) {
                    update();
                } else {
                    clearInterval( interval );
                    update();
                  //Show the alert message , change the message as per your need
                  alert('Time Up!');
                    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() {
              //Change the url here
                window.location = "http://www.asp.net";
            }
        }
    </script>
    </head>
    <body onload="startCountdown(20);">
    Redirect in <span id="time-left"></span>
    </body>
    </html>

    SOURCE URL

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, May 18, 2014 8:52 AM
  • User2103319870 posted

    You can use the WebMethods to call server side function (C#) from ClientSide(Javascript)

    Please try the below implementation

    1) Add a script Manager to your page and set the 'EnablePageMethods' property of script manager to True.

    <asp:ScriptManager ID="ScriptManager2" runat="server" EnablePageMethods="true"/>

    2) Modify your C# Method like given below

            //Please note that the method should be a Static and WebMethod.
            [System.Web.Services.WebMethod]
            public static void YourMethodName()
            {
    
                //Your Logic comes here
    
            }

    3) Modify your javascript code like given below

    function completed() {
                    //Call the Delete Method
                    PageMethods.YourMethodName();
                    //Change the url here
                    window.location = "http://www.asp.net";
                }

    Modified Code :

    <!DOCTYPE html>
    <html>
    <head>
        <script>
            function startCountdown(timeLeft) {
                var interval = setInterval(countdown, 1000);
                update();
    
                function countdown() {
                    if (--timeLeft > 0) {
                        update();
                    } else {
                        clearInterval(interval);
                        update();
                        //Show the alert message , change the message as per your need
                        alert('Time Up!');
                        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() {
                    //Call the Delete Method
                    PageMethods.YourMethodName();
                    //Change the url here
                    window.location = "http://www.asp.net";
                }
            }
        </script>
    </head>
    <body onload="startCountdown(20);">
        <form runat="server">
        <asp:ScriptManager ID="ScriptManager2" runat="server" EnablePageMethods="true" />
        Redirect in <span id="time-left"></span>
        </form>
    </body>
    </html>
    

    C#:

      //Please note that the method should be a Static and WebMethod.
            [System.Web.Services.WebMethod]
            public static void YourMethodName()
            {
    
                //Your Logic comes here
    
            }
    

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, May 18, 2014 11:18 AM

All replies

  • User-760709272 posted

    http://stackoverflow.com/questions/1191865/code-for-a-simple-javascript-countdown-timer

    To make the page redirect use

    window.location.href = 'newpage.aspx';

    Saturday, May 17, 2014 1:00 PM
  • User1674292998 posted
    Not working
    Sunday, May 18, 2014 8:45 AM
  • User2103319870 posted

    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 to pass before redirecting the use.

    <html>
    <head>
    <title></title>
    <script>
        function startCountdown(timeLeft) {
            var interval = setInterval( countdown, 1000 );
            update();
    
            function countdown() {
                if ( --timeLeft > 0 ) {
                    update();
                } else {
                    clearInterval( interval );
                    update();
                  //Show the alert message , change the message as per your need
                  alert('Time Up!');
                    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() {
              //Change the url here
                window.location = "http://www.asp.net";
            }
        }
    </script>
    </head>
    <body onload="startCountdown(20);">
    Redirect in <span id="time-left"></span>
    </body>
    </html>

    SOURCE URL

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, May 18, 2014 8:52 AM
  • User1674292998 posted
    Thanks for your help. it works one simple quesTion more can i call one method which is declare in code behaind (.cs) file when time completed
    Sunday, May 18, 2014 10:28 AM
  • User2103319870 posted

    You can use the WebMethods to call server side function (C#) from ClientSide(Javascript)

    Please try the below implementation

    1) Add a script Manager to your page and set the 'EnablePageMethods' property of script manager to True.

    <asp:ScriptManager ID="ScriptManager2" runat="server" EnablePageMethods="true"/>

    2) Modify your C# Method like given below

            //Please note that the method should be a Static and WebMethod.
            [System.Web.Services.WebMethod]
            public static void YourMethodName()
            {
    
                //Your Logic comes here
    
            }

    3) Modify your javascript code like given below

    function completed() {
                    //Call the Delete Method
                    PageMethods.YourMethodName();
                    //Change the url here
                    window.location = "http://www.asp.net";
                }

    Modified Code :

    <!DOCTYPE html>
    <html>
    <head>
        <script>
            function startCountdown(timeLeft) {
                var interval = setInterval(countdown, 1000);
                update();
    
                function countdown() {
                    if (--timeLeft > 0) {
                        update();
                    } else {
                        clearInterval(interval);
                        update();
                        //Show the alert message , change the message as per your need
                        alert('Time Up!');
                        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() {
                    //Call the Delete Method
                    PageMethods.YourMethodName();
                    //Change the url here
                    window.location = "http://www.asp.net";
                }
            }
        </script>
    </head>
    <body onload="startCountdown(20);">
        <form runat="server">
        <asp:ScriptManager ID="ScriptManager2" runat="server" EnablePageMethods="true" />
        Redirect in <span id="time-left"></span>
        </form>
    </body>
    </html>
    

    C#:

      //Please note that the method should be a Static and WebMethod.
            [System.Web.Services.WebMethod]
            public static void YourMethodName()
            {
    
                //Your Logic comes here
    
            }
    

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, May 18, 2014 11:18 AM
  • User1674292998 posted
    Thank you so much for your help :)
    Sunday, May 18, 2014 2:06 PM
  • User2103319870 posted

    Glad to be of help :)

    Sunday, May 18, 2014 2:16 PM