www.freewebsite.0nyx.com
You are here: Home >> JavaScript Clocks >> Lesson 1 www.freewebsite.0nyx.com - Free Website
 
Site guide
 HOME
 SITE MAP
 
Free tutorials
 Free Flash tutor
 Free HTML tutor
 Free JavaScript tutor
 Free DHTML tutor
 
Free Online Tools
 Color Picker
 MouseOver buttons
 Menus : Dropdown
 Page effects
 Scrollbar
 
More stuff
 Free sub-domains
 Make money : Banners
 Increase traffic
 Improve your website


Become a member become a member      Member's Log-in

Clock LESSON 1

Here's a digital clock:
And here's the code for it:
<FORM NAME="form01">
<INPUT NAME="text01" TYPE="TEXT" VALUE="" SIZE=8>
</FORM>

<SCRIPT LANGUAGE="JavaScript"><!--
updateClock();

function updateClock() {
    var time = new Date();
    var hours = time.getHours();
    var minutes = time.getMinutes();
    var seconds = time.getSeconds();
	document.form01.text01.value =
	 ((hours < 10) ? '0' + hours : hours) + 
        ':' + ((minutes < 10) ? '0' + minutes : minutes) +
             ':' + ((seconds < 10) ? '0' + seconds : seconds);
    setTimeout("updateClock()",1000);
}
//--> </SCRIPT>

If you can understand this, you can definitely skip to lesson 3. If you can't, it's no problem.

We'll be starting with basic 2-image clocks.

We'll by using the images of a sun and a moon.

If it is between 6am and 6pm in your computer, the sun will be displayed or else the moon will be displayed.

Any ideas on how to do this. Use the code shown above as a guide.

Don't move on to chapter 2 before trying this exercise.


< < Back     Next > >
Freewebsite: Web design tutorials for the rest of us
Lessons:      Intro 1 2 3 4 5 6 7 8 9 10 11

 
Praise for freewebsite
   "These tutorials are written in such simple language and they're so much fun. They're simply the best." - Mike

   "Just wanted to drop you a line to say thank you. I created my website within a month after reading your tutorials and now I make thousands with it." - Ken