|
↑
Date & Time >>>
Analog style clock that remains in the corner of the browser window, even when scrolling.
Add the below code to the <body> section of your page:
<script
language="javascript"
type="text/javascript">
fCol
=
'#000000';
sCol
=
'#ff0000';
mCol
=
'#000000';
hCol
=
'#000000';
H
=
'....';
H
=
H.split('');
M
=
'.....';
M
=
M.split('');
S
=
'......';
S
=
S.split('');
Ypos
=
0;
Xpos
=
0;
Ybase
=
8;
Xbase
=
8;
dots
=
12;
ns
=
(!document.all)?1:0;
document.write('<div
style="position:absolute;top:0px;left:0px"><div
style="position:relative">');
for
(i
=
1;
i <
dots+1;
i++)
{
document.write('<div
id="ieDigits'+i+'"
style="position:absolute;top:0px;left:0px;width:30px;height:30px;font-family:Arial,Verdana;font-size:10px;color:'+fCol+';text-align:center;padding-top:10px">'+i+'</div>');
}
document.write('</div></div>')
document.write('<div
style="position:absolute;top:0px;left:0px"><div
style="position:relative">');
for
(i
=
0;
i <
M.length;
i++)
{
document.write('<div
id="y'+i+'"
style="position:absolute;width:2px;height:2px;font-size:2px;background:'+mCol+'"></div>');
}
document.write('</div></div>')
document.write('</div></div>')
document.write('<div
style="position:absolute;top:0px;left:0px"><div
style="position:relative">');
for
(i
=
0;
i <
H.length;
i++)
{
document.write('<div
id="z'+i+'"
style="position:absolute;width:2px;height:2px;font-size:2px;background:'+hCol+'"></div>');
}
document.write('</div></div>')
document.write('<div
style="position:absolute;top:0px;left:0px"><div
style="position:relative">');
for
(i
=
0;
i <
S.length;
i++)
{
document.write('<div
id="x'+i+'"
style="position:absolute;width:2px;height:2px;font-size:2px;background:'+sCol+'"></div>');
}
document.write('</div></div>')
function
clock()
{
time
=
new
Date
();
secs
=
time.getSeconds();
sec
=
-1.57
+
Math.PI
*
secs/30;
mins
=
time.getMinutes();
min
=
-1.57
+
Math.PI
*
mins/30;
hr
=
time.getHours()+1;
hrs
=
-1.57
+
Math.PI
*
hr/6
+
Math.PI*parseInt(time.getMinutes())/360;
if
(ns)
{
Ypos
=
window.pageYOffset+window.innerHeight-80;
Xpos
=
window.pageXOffset+window.innerWidth-80;
}
else
{
Ypos
=
document.body.scrollTop
+
window.document.body.clientHeight
-
80;
Xpos
=
document.body.scrollLeft
+
window.document.body.clientWidth
-
60;
}
if
(ns)
{
for
(i
=
1;
i <
dots+1;
++i){
Id='ieDigits'+i;
document.getElementById(Id).style.top
=
Ypos -
5
+
40
*
Math.sin(-0.49+dots+i/1.9);
document.getElementById(Id).style.left
=
Xpos -
15
+
40
*
Math.cos(-0.49+dots+i/1.9);
}
for
(i
=
0;
i <
S.length;
i++){
Id='x'+i;
document.getElementById(Id).style.top
=
Ypos +
i *
Ybase *
Math.sin(sec);
document.getElementById(Id).style.left
=
Xpos +
i *
Xbase *
Math.cos(sec);
}
for
(i
=
0;
i <
M.length;
i++){
Id='y'+i;
document.getElementById(Id).style.top
=
Ypos +
i *
Ybase *
Math.sin(min);
document.getElementById(Id).style.left
=
Xpos +
i *
Xbase *
Math.cos(min);
}
for
(i
=
0;
i <
H.length;
i++){
Id='z'+i;
document.getElementById(Id).style.top
=
Ypos +
i *
Ybase *
Math.sin(hrs);
document.getElementById(Id).style.left
=
Xpos +
i *
Xbase *
Math.cos(hrs);
}
}
else{
for
(i=1;
i <
dots+1;
++i){
Id='ieDigits'+i;
document.getElementById(Id).style.pixelTop
=
Ypos -
15
+
40
*
Math.sin(-0.49+dots+i/1.9);
document.getElementById(Id).style.pixelLeft
=
Xpos -
14
+
40
*
Math.cos(-0.49+dots+i/1.9);
}
for
(i=0;
i <
S.length;
i++){
Id='x'+i;
document.getElementById(Id).style.pixelTop
=
Ypos +
i *
Ybase *
Math.sin(sec);
document.getElementById(Id).style.pixelLeft
=
Xpos +
i *
Xbase *
Math.cos(sec);
}
for
(i=0;
i <
M.length;
i++){
Id='y'+i;
document.getElementById(Id).style.pixelTop
=
Ypos +
i *
Ybase *
Math.sin(min);
document.getElementById(Id).style.pixelLeft
=
Xpos +
i *
Xbase *
Math.cos(min);
}
for
(i=0;
i <
H.length;
i++){
Id='z'+i;
document.getElementById(Id).style.pixelTop
=
Ypos +
i *
Ybase*Math.sin(hrs);
document.getElementById(Id).style.pixelLeft
=
Xpos +
i *
Xbase*Math.cos(hrs);
}
}
setTimeout('clock()',
50);
}
window.onload
=
clock;
</script>
|
→
|
