JavaScript ~Digital Clock
Version: 34.3
Revision: 132 Build 32
JavaScript ~Digital Clock
Introduction: this little project was designed in my IT college course.
It’s a little “LCD clock”, which was made from JavaScript and CSS stylesheet.
The project was created in my own time (lunch period) and it was a success…
Copyright Notice: You can copy the source code and use it on your own website, blog and forums. However, you must not distribute these source code to other users without my permission! Also, please don’t alter or remove my copyright + author. This is because, this source code are not yours!!
1.] Download notepad++ from the original author or from a mirror and install the software.
——————————-
http://sourceforge.net/projects/notepad-plus/
http://filehippo.com/download_notepad/
——————————-
2.] Copy these code into your notepad and save them into the same folder.
But, please don’t change the name of the files! If you do this, the codes will be broken!
a.] Copy this ‘JavaScript’ source code and save it as “Js_engine.js” [without the quotes].
File Name: Js_engine.js
—Copy Source Code—
/*LCD Clock v2*/
/*http://lair360.co.uk*/
/*Copyrighted By Lair360*/
function show1(){
if (!document.all&&!document.getElementById)
return
thelement=document.getElementById? document.getElementById("digital-clock"): document.all.digital-clock
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
var dn="PM"
if (hours<12)
dn="AM"
if (hours>12)
hours=hours-12
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
var ctime=hours+":"+minutes+":"+seconds+" "+dn
thelement.innerHTML=""+ctime+""
setTimeout("show1()",1000)
}
window.onload=show1
—End Source Code—
Copyright 2001-2008 Lair360
b.] Copy this ‘CSS Stylesheet’ source code and save it as “CSS_File.css” [without the quotes].
Notice: please don’t modify the “min-width” lower than the original “width”.
If you modify this line, the clock will look bad! Also, please keep the width above 95px for a better view…
File Name: CSS_File.css
—Copy Source Code—
#digital-clock.styling {
width: 95px;
min-width: 95px;
color: red;
background-color: black;
text-align: center;
font-size: 12px;
font-weight: normal;
font-family: BankGothic Md BT, Helvetica, Arial, Geneva;
border-width: 2px;
border-style: ridge;
border-color: red;
padding: 2px;
}
—End Source Code—
Copyright 2001-2008 Lair360
c.] Copy this ‘html’ source code and insert it to your index page or another page.
Notes: the “script” and “link” must be in the “head” element and the “span” tag must be in the body element…
File Name: Template.html
—Copy Source Code—
<head> <link rel="stylesheet" type="text/css" href="CSS_File.css"></link> <script type="text/javascript" src="Js_engine.js"></script> </head> <body> <span id="digital-clock" class="styling"></span> </body>
—End Source Code—
Copyright 2001-2008 Lair360
Notes: if you want every parts of the source code in one file, you can use this method which is shown below…
Tips: copy everything; paste it into your notepad and save it as a html file.
File Name: Single_Template.html
—Copy Source Code—
<head>
<script type="text/javascript">
<!--
/*LCD Clock v2*/
/*http://lair360.co.uk*/
/*Copyrighted By Lair360*/
function show1(){
if (!document.all&&!document.getElementById)
return
thelement=document.getElementById? document.getElementById("digital-clock"): document.all.digital-clock
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
var dn="PM"
if (hours<12)
dn="AM"
if (hours>12)
hours=hours-12
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
var ctime=hours+":"+minutes+":"+seconds+" "+dn
thelement.innerHTML=""+ctime+""
setTimeout("show1()",1000)
}
window.onload=show1
//-->
</script>
<style type="text/css">
<!--
#digital-clock.styling {
width: 95px;
min-width: 95px;
color: red;
background-color: black;
text-align: center;
font-size: 12px;
font-weight: normal;
font-family: BankGothic Md BT, Helvetica, Arial, Geneva;
border-width: 2px;
border-style: ridge;
border-color: red;
padding: 2px;
}
-->
</style>
</head>
<body>
<span id="digital-clock" class="styling"></span>
</body>
—End Source Code—
Copyright 2001-2008 Lair360
Important notice: if you know what you’re doing with these codes, then please…don’t hesitate to experiment them! But, you must keep these codes to yourself and never distribute them to others without proper permission!
