Answered by:
How to show countdown timer

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 pageSaturday, 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>
- 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 workingSunday, 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>
- 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 completedSunday, 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