Demonstration of using a timer on a webpage

• Download source files - 0.6 Kb

Introduction

ASP is commonly used on Microsoft Servers and other compatible platforms to build dynamic web pages and also to retrieve data from databases. ASP supports various scripting languages like VBScript, JScript, etc. These scripting languages provide the business logic to the web pages while ASP is used to provide dynamic content to the webpage.

Briefing About The Problem

I came across a problem when I was building an Online Examination System for my Institute. The problem was to restrict the student's time, i.e., the student must answer all the questions in the exam in a specific time. For that, I had to attach a timer to the web page. I made use of VBScript inside the ASP page. I assume here that the reader is conversant in VBScript, if not, it is not a problem, just mail me at email@gauravsonline.com if you have any queries related to the subject. I would definitely reply.

Example

Now comes the explanation of how it's done. I am trying to simulate a "count down clock". This is explained as follows with the help of the following ASP example:

'************************************************************* 
'This program makes use of a recursive procedure HandleTime.
'The important aspects of the code are "Status" and "setTimeOut". 
'Status is an attribute of the Window object in VBScript and is used to 
'change the status message of the active window. 
'setTimeOut is a VBScript function that tells after how much time the timer 
'would stop and accordingly it calls a function passed into it to take some 
'action when the time is up.
'This procedure calls its self after every 1 sec (I have taken 1sec = 950ms
' here) and accordingly the variables hr, min and sec are decremented. 
'************************************************************* 
Sub HandleTime 
    if hr=0 and min=0 and sec=0 then 
        EndTime 
        '**When hr, min and sec are all 0, this means that the time is up 
        '**and EndTime procedure is 'called. 
    elseif min>=0 and sec>0 then 
        sec=sec-1 
        status=hr & ":" & min & ":" & sec 
        '**Whenever the second changes the Status of the window has to 
        'be changed. 
        intTimerID=setTimeOut("HandleTime",950, "VBScript") 
        '**setTimeOut function returns a unique timer id that is used to 
        'keep track of the time. 
        '**When the time is up the timer id is destroyed automatically. 
    elseif min>0 and sec=0 then 
        min=min-1 
        sec=59 
        status=hr & ":" & min & ":" & sec 
        intTimerID=setTimeOut("HandleTime",950, "VBScript") 
    elseif hr>=0 and min=0 then 
        hr=hr-1 
        min=59 
        sec=59 
        status=hr & ":" & min & ":" & sec 
        intTimerID=setTimeOut("HandleTime",950, "VBScript") 
    end if 
End Sub 

Sub EndTime 
    clearTimeOut intTimerID 
    '**clearTimeOut is a built in procedure of VBScript which is used to 
    '**clear and destroy the timer id explicitly 
    status = "Your Time Ended" 
    '**When the time ends the status bar displays this message. 
    msgbox "Time Up" 
End Sub

How To Use The Source Code

To run the ASP code, you must have an ASP enabled web server such as Microsoft Personal Web Server or IIS installed on your system and select the publishing directory. This code could also be executed from a simple .htm file without requiring PWS or IIS installed.

When you run the program, you would see that the clock starts from 0:2:0 and ends at 00:00:00. You can use the variables hr, min and sec in the program to change the time. Moreover, you can also connect a form from which you can specify inputs to these variables and hence you can have your own time constraints.

Warning

This code could only be executed inside browsers with VBScript built in. For example: IE 4.0 or higher.

Screenshots of the Program

Here, you can see that the time starts at 0:2:0. The time ends after two minutes and then the message is displayed like this: