Friday 22 March 2013

how to crete timer or display clock using javascript in asp.net




Description:-

                     in this example we can create a Timer and redirect to the other page when the time is up.

For Ex:-


           this type of example is very useful in online examination system. when the exam is start the timer is also start and continue display remaining time on right side and when the time is up the page is automatically redirected to another page.


Using timer Event in Javascript there are Four Types
  • setTimeout();
  • clearTimeout();
  • setInterval();
  • clearInterval().



setInterval():-
                        using SetInterval you can Call Function at Specified Interval like for Ex:-
setInterval(codeToExecute, timeIntervalInMilliseconds)
it will call Function Every Specified time means more than once time.

SetTimeout():-
                  
                       using this Function you can call Function at specified Time. it can be called only once like after 2 second or 5 second.
for ex:-setTimeout(Foo, 2000);

How to Stop the Timer:-

            To stop the Time you have to use ClearInterval(timervariable) or ClearTimeout(timervariable) Function. If you use SetTimeout() then you have to use ClearTimeout() and if you use SetInterval() then you have to use ClearInterval() Function.                

Here is some link that is very useful for same programming like :-

to show example of enter on Alphabet Character in TextBox click here Enter only Alphabet Character in TextBox


MVC Registration form with all Validation in MVC client and server side validation in MVC4

Insert,Update,Delete in Gridview without postback CRUD operation without refresh the page

Bind data in Accordion Control from database bind Dynamic data in Accordion Control

inner zoom effect of image bind into gridview from database Display Inner zoom Effect of the image in Gridview



Code:-

<script type="text/javascript">

    var myVar = setInterval(function () { myTimer() }, 1000);
    var d = new Date();
    d.setHours(00, 5, 59, 00);
    function myTimer() {

        if (d.getSeconds() <= 1)
            d.setMinutes(d.getMinutes() - 1, 59, 00);

        var h = d.getHours();
        var m = d.getMinutes();
        var s = d.getSeconds() - 1;


        if (m == 0 && s == 1)
            window.location.href = "showresults.aspx";
        document.getElementById("<%= lblCtime.ClientID %>").innerHTML = h + ":" + m + ":" + s;

        d.setMinutes(m, s);
        //setInterval(myTimer, 1000);
    }
</script>
<body>
<form id="Form1" runat="server">
 time left :<asp:Label ID="lblCtime" runat="server" Font-Bold="True" Font-Names="Verdana"
                    ForeColor="Red"></asp:Label>
</form>
</body>



              

1 comments:

  1. thanks for give me suggestion but my Example is Client side so it will not load on the server and you provide link is a server side so it will load on server.

    ReplyDelete