Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: C# ASP.NET Javascript , +
Hai,
I have to place a countdown timer in my online test website. It should change its time without refreshing the page. Please help me with suitable methods.
Thanks......
Posted 26-Sep-11 0:00am
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Hi,
 
Here I tried some code for countdown in javascript.
 
try this
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script language ="javascript" >
        var tim;
       
        var min = 20;
        var sec = 60;
        var f = new Date();
        function f1() {
            f2();
            document.getElementById("starttime").innerHTML = "Your started your Exam at " + f.getHours() + ":" + f.getMinutes();
             
            document.getElementById("endtime").innerHTML = "Your  time is :"+f.toLocaleTimeString();
        }
        function f2() {
            if (parseInt(sec) > 0) {
                sec = parseInt(sec) - 1;
                document.getElementById("showtime").innerHTML = "Your Left Time  is :"+min+" Minutes ," + sec+" Seconds";
                tim = setTimeout("f2()", 1000);
            }
            else {
                if (parseInt(sec) == 0) {
                    min = parseInt(min) - 1;
                    if (parseInt(min) == 0) {
                        clearTimeout(tim);
                        location.href = "default5.aspx";
                    }
                    else {
                        sec = 60;
                        document.getElementById("showtime").innerHTML = "Your Left Time  is :" + min + " Minutes ," + sec + " Seconds";
                        tim = setTimeout("f2()", 1000);
                    }
                }
               
            }
        }
    </script>
</head>
 
<body onload="f1()">
    <form id="form1" runat="server">
    <div>
      <table width="100%" align="center">
        <tr>
          <td colspan="2">
            <h2>This is head part for showing timer and all other details</h2>
          </td>
        </tr>
        <tr>
          <td>
            <div id="starttime"></div>
 
            <div id="endtime"></div>
 
            <div id="showtime"></div>
          </td>
        </tr>
        <tr>
  </tr>
      </table>
      
 
   
 
    </div>
    </form>
</body>
</html>
</body>
 
I hope this is helpful to you
 
All the Best
  Permalink  
Comments
Neha Thanka at 26-Sep-11 6:33am
   
Thank you for your help... Surely this code helped me a lot....
Thanks again.....
Neha Thanka at 26-Sep-11 7:29am
   
I have a problem with this code. I am using button click to generate next question. On each button click the time is changed, ie the time left is same as the beginning for every question. How to change this code to work it properly?
Muralikrishna8811 at 26-Sep-11 7:56am
   
hi ,you familier with jquery
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

hi,
 
I updated my code for displaying count down time .
 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script language ="javascript">
       
        var str1 = new String();
        var lmin;
        var lsec;
        var leftmin = 20;
        var leftsec = 59;
        $(document).ready(function () {
            str1 = document.getElementById("lefttime").value;
            if (parseInt(document.getElementById("statusid").value)>0) {
                leftmin = str1.substring(0, 2);
                leftsec = str1.substring(3, 5)
                getremainingtim();
            }
            else {
              
            }
        });
        var timleft;
        function getremainingtim() {
        
            if (parseInt(leftsec) > 0) {
                leftsec = parseInt(leftsec) - 1;
                document.getElementById("showlefttime").innerHTML = "Your Left Time  is :" + leftmin + " Minutes ," + leftsec + " Seconds";
             
            }
            else {
                if (parseInt(leftsec) == 0) {
                    leftmin = parseInt(leftmin) - 1;
                    if (parseInt(leftmin) == 0) {
                        document.getElementById("showlefttime").innerHTML = "Your Time is Over";
                        clearTimeout(timleft);
                    }
                    else {
                        leftsec = 59;
                        document.getElementById("showlefttime").innerHTML = "Your Left Time  is :" + leftmin + " Minutes ," + leftsec + " Seconds";
                      
                    }
                }
                document.getElementById("showlefttime").innerHTML = "Your Left Time  is :" + leftmin + " Minutes ," + leftsec + " Seconds";
            }
             timleft = setTimeout("getremainingtim()", 1000);
         }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:button id="Button1" runat="server" text="Start Exam" xmlns:asp="#unknown">
            onclick="Button1_Click" />
Your Examination Started time is :
        <asp:label id="Label1" runat="server" text="Label"></asp:label>
 
        Your Xamination Over Time is :<asp:label id="Label2" runat="server" text="Label"></asp:label>
 
        <input type="hidden" id="lefttime" value ="19:59" runat ="server"  />
        <input type ="hidden" id="statusid" value ="0" runat ="server"  />
      <div id="showlefttime"> </div>
    </asp:button></div>
    </form>
</body>
</html>
 
And the Code behind file contains following code
 
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Session["strttime"].ToString() != "")
        {
            statusid.Value = "3";
            DateTime dtm = new DateTime();
            dtm = ((DateTime)Session["strttime"]).AddMinutes(20);
            lefttime.Value = dtm.Subtract(DateTime.Now).Minutes.ToString() + ":" + dtm.Subtract(DateTime.Now).Seconds.ToString();
        }
        
        if (!IsPostBack)
        {
            
            if (Request.QueryString["action"] != null)
            {
 
            }
        }
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        if (Session["strttime"].ToString() == "")
        {
            Label1.Text = System.DateTime.Now.ToString();
            Session["strttime"] = System.DateTime.Now;
            DateTime dtm = new DateTime();
            dtm = System.DateTime.Now.AddMinutes(20);
        
            Label2.Text = dtm.ToString();
        }
        else
        {
            Label1.Text = ((DateTime)Session["strttime"]).ToString();
            DateTime dtm = new DateTime();
            dtm = ((DateTime)Session["strttime"]).AddMinutes(20);
            Label2.Text = dtm.ToString();
        }
        Button1.Enabled = false;
        statusid.Value = "3";
    }
 
And the global.asax file code is
       
        Session.Add("strttime", "");
 
In this code you've to create one session variable for counting your time on server
 

I hope you understood my coding If any doubts in my code just post
 
I'll explain clearly
In this example you can correct left time on postback events also
 
All the Best
  Permalink  
Comments
Member 3408948 at 8-Apr-12 9:52am
   
Thanks. It's working single page but it doesnt working with master pages
Muralikrishna8811 at 9-Apr-12 4:49am
   
I hope you need to place jquery ready method in master page
Nizar Thamarassery at 11-Aug-12 2:05am
   
It is Nizar very very thanks for your answer
night-love at 27-Oct-12 9:06am
   
Hello , I have a problem with the code which is when the time reach 0 it continues to minus values , thanks a lot
Muralikrishna8811 at 29-Oct-12 15:28pm
   
Hi,
 
sorry for late reply . I'll check my code let you know the changes(If any)
night-love at 30-Oct-12 4:22am
   
Thanks for your reply
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 3

this is aspx_ code
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <asp:Label ID="Label1" runat="server" Text="Current Time"></asp:Label><asp:Label ID="Label2"
            runat="server" Text=""></asp:Label>
        <asp:Timer ID="Timer1" runat="server">
        </asp:Timer>
    </div>
    </form>
</body>
</html>
 

this is .cs code
public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
 
    }
    protected void Timer1_Tick(object sender, EventArgs e)
    {
        Label2.Text = System.DateTime.Now.ToString();
    }
}
 

and set timer interval property to 1000 milisec
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 Gihan Liyanage 332
1 Sergey Alexandrovich Kryukov 330
2 ClimerChinna 222
3 vikinghunter 168
4 OriginalGriff 166
0 Sergey Alexandrovich Kryukov 8,363
1 OriginalGriff 7,112
2 CPallini 2,598
3 Richard MacCutchan 2,025
4 Abhinav S 1,788


Advertise | Privacy | Mobile
Web03 | 2.8.140827.1 | Last Updated 27 Sep 2011
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100