• MICROSOFT
• COMPTIA +
• CISCO
• ORACLE
• SUN
• LINUX
• APPLE
• CITRIX

• HTML
• CSS
• JavaScript
• Vb Script
• ASP
• PHP
• Perl
• Visual Basic
• SEO

           

 

JavaScript

          Index         

 

Date, Time & Timer related

 

Timer funcitons in JavaScript: Reminder Script

Timers are used in web pages and we will discuss how to setup one and how to use one with an example. The function setTimeout() in function is used and here is its general syntax.

mytime = setTimeout(expression, msec);

mytime is the identifier used to identify the current timeout function.

expression is the statement that is to be executed after the specified time has ticked off.

msec is the duration of time in milliseconds after which the expression will be executed.
 

You can see by using setTimeout function we can execute any function or object after a set of time. For example if msec is set 5000 then the expression will be executed after 5 seconds or 5000 milliseconds.

We will try one example where we will have four period buttons and each button will set a different time for another function to execute and display a alert button. We will call it as a reminder script and we will get one alert box based on the period button we clicked. Note that we will be using onclick event of period button for this. Here is the demo and you will get alert message boxe based on the radio button you clicked.

Now here is the code to be used inside your head tags
 

<script type="text/javascript">
function remind(msg1) {
var msg = "This is a reminder after " + msg1 +" Secs";
alert(msg);
}
</script>
 

This is the code we used for displaying the period buttons

<input type=radio name=rm value=no checked>No reminder
<input type=radio name=rm value=5000 OnClick="mytime=setTimeout('remind(2)',2000)">After 2 Secs
<input type=radio name=rm value=5000 OnClick="mytime=setTimeout('remind(5)',5000)">After 5 Secs
<input type=radio name=rm value=5000 OnClick="mytime=setTimeout('remind(10)',10000)">After 10 Secs
 

Resetting the timer funcitons in JavaScript

Here we will learn how to reset the timer function we have studied in part 1 of this tutorial. We can reset or clear the timer before the time out of the timer by using the function clearTimeout(). Here is the general syntax

clearTimeout(mytime)

mytime is the timer id we defined while activating the timer( please see the part 1 of this tutorial). It must be exactly same as one used in setTimeout function as it identify the timer with this.

setTimeout function sets the timer and executes it after the set time, before that if we want to cancel or reset the timer then we must use the clearTimeout function with timer id.

Now we will use the same domo ( in Timer Set of part 1 ) with the additional reset button for the timer. Here is the demo.
 

Now here is the code to be used inside your head tags

<script type="text/javascript">
function remind(msg1) {
var msg = "This is a reminder after " + msg1 +" Secs";
alert(msg);
}
</script>
This is the code we used for displaying the period buttons
 

<input type=radio name=rm value=no checked>No reminder
<input type=radio name=rm value=5000 OnClick="mytime=setTimeout('remind(2)',2000)">After 2 Secs
<input type=radio name=rm value=5000 OnClick="mytime=setTimeout('remind(5)',5000)">After 5 Secs
<input type=radio name=rm value=5000 OnClick="mytime=setTimeout('remind(10)',10000)">After 10 Secs
<input type=button value='Reset Timer' OnClick="clearTimeout(mytime)">

Date object to display current date and time in alert window

We can display current date and time using JavaScript alert window by linking it to a button click event. We can place this button any where inside a page and display time and date once it is clicked by user. This is a simple script and we will try to develop better applications by learning such small examples.

We will be using built in Date object. We can create instances of this object and use in our script like this

var my_time = new Date()

Now this instance we can display by using JavaScript alert window.
 

Now this alert we will trigger when a button is clicked by a user. Here is onclick event of a button click.
 

<input type=button value="Show Time" onclick="show_now();">

Here is the complete code for the page with Show Time button.
 

Getmonth function using date object

We can use Date object in JavaScript to collect the current month by using getMonth function. We will try to print the present month name by using this getMonth function. Note that getMonth function returns number of month from 0 to 11. That is, it will return 0 if the month is January and will return 1 if the month is February and so on. It will return 11 for the month December.

To display the month name in full, we will write one array with all the month names inside it. Then based on the value returned by getMonth function we will display the corresponding element from this month array.
 

<html>
<head>
<title>(Type a title for your page here)</title>
<script type=\"text/javascript\">
function show_now(){
var my_month=new Date()
//var dt = new Date(\"Aug 16, 2005 05:55:00\");
var month_name=new Array(12);
month_name[0]="January"
month_name[1]="February"
month_name[2]="March"
month_name[3]="April"
month_name[4]="May"
month_name[5]="June"
month_name[6]="July"
month_name[7]="August"
month_name[8]="September"
month_name[9]="October"
month_name[10]="November"
month_name[11]="December"