Time-dependent
Scripts
JavaScript already has a built in object that gets
the date and time. To use this date object, you need to first create an
instance of it. What we have to do is tell JavaScript to activate this
object. To activate a Date Object so you can use it, do this:
var mydate= new Date()
Whenever you want to create an instance of the date
object, use this important word: new
followed by the object name().
Let we write out today's date:
<HTML>
<HEAD>
<TITLE>time_example</TITLE>
</HEAD>
<BODY>
<P>output:
<SCRIPT>
<!--
var today_date= new Date()
var myyear=today_date.getYear()
var mymonth=today_date.getMonth()+1
var mytoday=today_date.getDate()
document.write(myyear+"/"+mymonth+"/"+mytoday)
//-->
</SCRIPT>
</BODY>
</HTML>
var myyear=today_date.getYear() means "get the year
and put it in variable myyear." We added "1" to the month, since in JavaScript,
it counts months starting from "0", not "1"!
Output:
-
Dynamically
writing out html codes
With the above knowledge, and a little HTML,
you can display different images according to the date/time. Here is a
common example: Displaying a different image depending on whether it is
mourning or night.
Lets first get two images: (One for mourning, one for night.)
Varna_day.jpg
Varna_night.jpg
________
<SCRIPT>
<!--
var current= new Date()
var day_night=current.getHours()
if (day_night<=20)
document.write("img src='Varna_day.jpg.'>")
else
document.write("img src='Varna_night.jpg'>")
//-->
</SCRIPT>
(You can Cory/Paste this script in your page, too.)
The result of it is:
Output:
It is a method of the window object,
basically delays the execution of a function or statement until
the specified time has passed. The basic syntax of this function is:
setTimeout("expression", delaytime)
"expression" - the function/statement
you want delayed
delaytime -
the delay time, in milliseconds.
For example, this will output
"Two seconds have gone!"
after 2 seconds:
document.name_form.test_date.value=""
//simply clears the text
box
function name_function()
{
setTimeout("document.
name_form.test_date.value='Two seconds have
gone!'",2000)
}
<form name="name_form">
<input
type="text" size="28">
<input
type="button" value="Start" onClick="name_function()">
</form>
Copy/Paste this code in your page:
<FORM name="three">
<INPUT type="text" size="28" name="hi"><INPUT type="button" name="B1"
value="Start" onclick="document.three.hi.value=' ';talk()">
<SCRIPT>
<!--
document.three.hi.value=""
function talk()
{
setTimeout("document.three.hi.value='Two seconds have gone!'",2000)
}
//-->
</SCRIPT>
</FORM>
Let's do an example that, by placing the setTimeout
in a special position, continuously writes to a box, incrementally itself
every second.
var
c=0
document.go.timer.value=""
function count()
{
document.go.timer.value=c
c=c+1
setTimeout("count()",1000)
}
<form name="go">
<input type="text" name="timer" size="12">
<input type="button" value="Start" onClick="count()">
</form>
You can Copy/Paste this code:
<FORM name="see">
<INPUT type="text" size="12" name="timer">
<INPUT type="button" name="B1" value="Start"onclick="count()">
<SCRIPT>
<!--
var c=0
document.see.timer.value=""
function count()
{
document.see.timer.value=c
c=c+1
setTimeout("count()",1000)
}
//-->
</SCRIPT>
</FORM>
To get "1" second, we used "1000". (1 millisecond*1000)
equals 1 second.
-
Adding
a live clock with the help of a form
Adding a live clock using forms is quite simple...the
basic concept is to continuously write to the form every 1 second, using
the updated time from your own computer.
If you want to add this clock somewhere on your
web page
Copy/Paste this code:
<form name="Tick">
<input type="text" size="12" name="Clock">
</form>
<script>
function show()
{
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
var dn="AM"
if (hours>12)
{
dn="PM"
hours=hours-12
//this is so the hours written out is
//in 12-hour format, instead of the default
//24-hour format.
}
if (hours==0)
hours=12
//this is so the hours written out
//when hours=0 (meaning 12a.m) is 12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
document.Tick.Clock.value=
hours+":"+minutes+":"+seconds+" "+dn
setTimeout("show()",1000)
}
show()
</script>
|