Click here to Skip to main content
15,113,245 members
Please Sign up or sign in to vote.
5.00/5 (1 vote)
See more: , +
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

Hi,

Here I tried some code for countdown in javascript.

try this

HTML
<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><br />
            <div id="endtime"></div><br />
            <div id="showtime"></div>
          </td>
        </tr>
        <tr>
  </tr>
      </table>
      <br />
   

    </div>
    </form>
</body>
</html>
</body>


I hope this is helpful to you

All the Best
   
Comments
Neha Thanka 26-Sep-11 6:33am
   
Thank you for your help... Surely this code helped me a lot....
Thanks again.....
Neha Thanka 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 26-Sep-11 7:56am
   
hi ,you familier with jquery
Vic Sal 14-Apr-16 1:24am
   
Thank you very much my lord really i need this
parkavikkk 15-Mar-19 10:40am
   
I need same code what you answered here. Thank you, but i want to set the time not manually like you set as 20mins 60sec. i want to fetch duration from db and apply here. kindly help me
hi,

I updated my code for displaying count down time .


HTML
<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" /><br />Your Examination Started time is :
        <asp:label id="Label1" runat="server" text="Label"></asp:label><br />
        Your Xamination Over Time is :<asp:label id="Label2" runat="server" text="Label"></asp:label><br />
        <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

C#
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
C#
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
   
Comments
Member 3408948 8-Apr-12 9:52am
   
Thanks. It's working single page but it doesnt working with master pages
Muralikrishna8811 9-Apr-12 4:49am
   
I hope you need to place jquery ready method in master page
Member 12909278 7-Jun-18 3:27am
   
when i refresh my page the timer will start with beginning it will not shown the left time. If i click the button on same page (refresh) it will start new time. pls urgent
Nizar Thamarassery 11-Aug-12 2:05am
   
It is Nizar very very thanks for your answer
alex mansour 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 29-Oct-12 15:28pm
   
Hi,

sorry for late reply . I'll check my code let you know the changes(If any)
alex mansour 30-Oct-12 4:22am
   
Thanks for your reply
this is aspx_ code
XML
<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
C#
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
   

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




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900