Implementation of the Countdown Timer

This article explains about the implementation of the Countdown Timer. We can use this timer for online interview and something like that.

These are the steps...

Start visual studio and create a new web application. Open the HTML design of your web page and add the following JavaScript functions before closing the head tag.

  <script type="text/javascript">
        var mins
        var secs;
        function cd() {
            mins = 1 * m("1");
            secs = 0 + s(":01");
            redo();
        }
        function m(obj) {
            for (var i = 0; i < obj.length; i++) {
                if (obj.substring(i, i + 1) == ":")
                    break;
            }
            return (obj.substring(0, i));
        }
        function s(obj) {
            for (var i = 0; i < obj.length; i++) {
                if (obj.substring(i, i + 1) == ":")
                    break;
            }
            return (obj.substring(i + 1, obj.length));
        }
        function dis(mins, secs) {
            var disp;
            if (mins <= 9) {
                disp = " 0";
            } else {
                disp = " ";
            }
            disp += mins + ":";
            if (secs <= 9) {
                disp += "0" + secs;
            } else {
                disp += secs;
            }
            return (disp);
        }
        function redo() {
            secs--;
            if (secs == -1) {
                secs = 59;
                mins--;
            }
            document.cd.disp.value = dis(mins, secs);
            if ((mins == 0) && (secs == 0)) {
                window.alert("Time is up. Press OK to continue.");
            } else {
                cd = setTimeout("redo()", 1000);
            }
        }
        function init() {
            cd();
        }
        window.onload = init;  </script
>

Now add the following style tag.

   <style>
        #txt
        {
            border: none;
            font-family: verdana;
            font-size: 16pt;
            font-weight: bold;
            border-right-color: #FFFFFF;
        }
    </style
>


Add the following HTML code to design the layout of your web page and call the above JavaScript functions.

<body ms_positioning="GridLayout">
    <form name="cd">
    <center
>

                <div style="margin-left: 190px">
                <input id="txt" readonly="true" type="text" value="10:00" border="0" name="disp"></div>
    </center>
    </form
>
</body>

Now run your application.
 


Similar Articles