The Chinese version uses JavaScript to implement the cool "Web Clock"

Source: Internet
Author: User
Tags date define array html page implement sin split version
Javascript| Website | chinese

Just insert the following JavaScript code into the

<script language=javascript>
<!--
Dcol= ' Yellow '; Define Calendar Colors
Fcol= ' #ff0000 '; Defines the color of 1-12 of these 12 numbers
Scol= ' #00ff00 '; Define the seconds color
Mcol= ' #0000ff '; Define the minute hand color
Hcol= ' #ff0000 '; Define the clockwise color
clockheight=40; Define the height of the clock
clockwidth=40; Define the width of the clock
clockfrommousey=0; Defines the relative vertical distance of the center of the clock from the mouse
clockfrommousex=100; Defines the relative horizontal distance of the clock center from the mouse
The above color value you want to according to your page background color to make the change! Pay attention to the background color of your page is consistent oh.
D=new Array ("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
M=new Array ("January", "February", "March", "April", "May", "June", "July", "August", "September",
"October", "November", "December"); These are the range of values for a given week and month
Date=new Date ();
Day=date.getdate (); Get the current date command
Year=date.getyear (); Get Current year command
if (year <) year=year+1900;
Todaysdate= "Year" +m[date.getmonth ()]+ "" +day+ "Day" +d[date.getday ()]+ "" +year;
D=todaysdate.split ("); Show "Day of the Year"
H= ' ... ';
H=h.split (");
M= ' ... ';
M=m.split (");
S= ' ... ';
S=s.split ("); Reverse the position of seconds, minutes, and hour
Face= ' 1 2 3 4 5 6 7 8 9 10 11-12 ';
' Arial ';
size=1; Define the size of the second, minute, hour, and 1-12 characters of the song body (the best way to change OH)
speed=0.8; Defines the speed at which all related characters follow the relative position of the mouse specified earlier when the mouse position changes.
Can see the trajectory of each character, the value can be changed between 0.1-1.0 (the minimum value of 0.1 when the slowest followed, the value of 1.0 followed the fastest and the trajectory shown)
Ns= (document.layers);
Ie= (document.all); Description is available in both NS and IE two different browsers

The following large segment defines how the NS and IE browsers individually control and complete the time and rotation of the calendar following the mouse
Face=face.split (");
N=face.length;
a=size*10;
ymouse=0;
xmouse=0;
scrll=0;
props= "<font face=" +font+ "size=" +size+ "color=" +fcol+ ">";
props2= "<font face=" +font+ "size=" +size+ "color=" +dcol+ ">";
split=360/n;
Dsplit=360/d.length;
handheight=clockheight/4.5
handwidth=clockwidth/4.5
handy=-7;
handx=-2.5;
scrll=0;
step=0.06;
Currstep=0;
Y=new Array (); x=new Array (); Y=new Array (); X=new Array ();
for (i=0 i < n; i++) {y[i]=0;x[i]=0; y[i]=0; X[i]=0}
Dy=new Array ();D x=new Array ();D y=new Array ();D x=new Array ();
for (i=0 i < d.length; i++) {dy[i]=0;dx[i]=0;dy[i]=0;dx[i]=0}

if (NS) {
for (i=0 i < d.length; i++)
document.write (' <layer name= ' nsdate ' +i+ ' top=0 left=0 height= ' +a+ ' width= ' +a+ ' ><center> ' +props2+d[i]+ ') </font></center></layer> ');
for (i=0 i < n; i++)
document.write (' <layer name= ' nsface ' +i+ ' top=0 left=0 height= ' +a+ ' width= ' +a+ ' ><center> ' +props+face[i ') + ' </font></center></layer> ');
for (i=0 i < s.length; i++)
document.write (' <layer name=nsseconds ' +i+ ' top=0 left=0
Height=15><font face=arial size=3 color= ' +scol+ ' ><center><b> ' +s[i]+ ' </b></center ></font></layer> ');
for (i=0 i < m.length; i++)
document.write (' <layer name=nsminutes ' +i+ ' top=0 left=0
Height=15><font face=arial size=3 color= ' +mcol+ ' ><center><b> ' +m[i]+ ' </b></center ></font></layer> ');
for (i=0 i < h.length; i++)
document.write (' <layer name=nshours ' +i+ ' top=0 left=0
Height=15><font face=arial size=3 color= ' +hcol+ ' ><center><b> ' +h[i]+ ' </b></center ></font></layer> ');
}

if (IE) {
document.write (' <div id= "Od" style= "position:absolute;top:0px;left:0px" ><div style= "Position:relative" > ');
for (i=0 i < d.length; i++)
document.write (' <div id= "iedate" style= "position:absolute;top:0px;left:0;height: ' +a+ '; width: ' +a+ '; Text-align: Center "> ' +props2+d[i]+ ' </font></div>");
document.write (' </div></div> ');
document.write (' <div id= ' of "style=" position:absolute;top:0px;left:0px "><div style=" Position:relative " > ');
for (i=0 i < n; i++)
document.write (' <div id= "Ieface" style= "position:absolute;top:0px;left:0;height: ' +a+ '; width: ' +a+ '; Text-align: Center "> ' +props+face[i]+ ' </font></div>");
document.write (' </div></div> ');
document.write (' <div id= "Oh" style= "position:absolute;top:0px;left:0px" ><div style= "Position:relative" > ');
for (i=0 i < h.length; i++)
document.write (' <div id= ' iehours "style=" POSITION:ABSOLUTE;WIDTH:16PX;
Height:16px;font-family:arial;font-size:16px;color: ' +hcol+ '; Text-align:center;font-weight:bold ' > ' +H[i]+ ' </div> ');
document.write (' </div></div> ');
document.write (' <div id= "Om" style= "position:absolute;top:0px;left:0px" ><div style= "Position:relative" > ');
for (i=0 i < m.length; i++)
document.write (' <div id= ' ieminutes "style=" POSITION:ABSOLUTE;WIDTH:16PX;
Height:16px;font-family:arial;font-size:16px;color: ' +mcol+ '; Text-align:center;font-weight:bold ' > ' +M[i]+ ' </div> ');
document.write (' </div></div> ')
document.write (' <div id= "Os" style= "position:absolute;top:0px;left:0px" ><div style= "Position:relative" > ');
for (i=0 i < s.length; i++)
document.write (' <div id= ' ieseconds "style=" POSITION:ABSOLUTE;WIDTH:16PX;
Height:16px;font-family:arial;font-size:16px;color: ' +scol+ '; Text-align:center;font-weight:bold ' > ' +S[i]+ ' </div> ');
document.write (' </div></div> ')
}
(NS) window.captureevents (Event.mousemove): 0;
function Mouse (evnt) {
Ymouse = (ns)? evnt.pagey+clockfrommousey-(Window.pageyoffset):
Event.y+clockfrommousey;
Xmouse = (ns)? Evnt.pagex+clockfrommousex:event.x+clockfrommousex;
}
(NS) Window.onmousemove=mouse:document.onmousemove=mouse;
function Clockandassign () {
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 ();
hrs = -1.575 + Math.PI * Hr/6+math.pi*parseint (Time.getminutes ())/360;
if (IE) {
Od.style.top=window.document.body.scrolltop;
Of.style.top=window.document.body.scrolltop;
Oh.style.top=window.document.body.scrolltop;
Om.style.top=window.document.body.scrolltop;
Os.style.top=window.document.body.scrolltop;
}
for (i=0 i < n; i++) {
var f= (NS) document.layers[' Nsface ' +i]:ieface[i].style;
F.top=y[i] + clockheight*math.sin ( -1.0471 + i*split*math.pi/180) +scrll;
F.left=x[i] + clockwidth*math.cos ( -1.0471 + i*split*math.pi/180);
}
for (i=0 i < h.length; i++) {
var hl= (NS) document.layers[' nshours ' +i]:iehours[i].style;
hl.top=y[i]+handy+ (I*handheight) *math.sin (hrs) +scrll;
hl.left=x[i]+handx+ (I*handwidth) *math.cos (hrs);
}
for (i=0 i < m.length; i++) {
var ml= (NS) document.layers[' nsminutes ' +i]:ieminutes[i].style;
ml.top=y[i]+handy+ (i*handheight) *math.sin (min) +scrll;
ml.left=x[i]+handx+ (i*handwidth) *math.cos (min);
}
for (i=0 i < s.length; i++) {
var sl= (NS) document.layers[' nsseconds ' +i]:ieseconds[i].style;
sl.top=y[i]+handy+ (i*handheight) *math.sin (sec) +scrll;
sl.left=x[i]+handx+ (i*handwidth) *math.cos (sec);
}
for (i=0 i < d.length; i++) {
var dl= (NS) document.layers[' nsdate ' +i]:iedate[i].style;
Dl.top=dy[i] + clockheight*1.5*math.sin (currstep+i*dsplit*math.pi/180) +scrll;
Dl.left=dx[i] + clockwidth*1.5*math.cos (currstep+i*dsplit*math.pi/180);
}
Currstep-=step;
}
function Delay () {
Scrll= (NS)? window.pageyoffset:0;
Dy[0]=math.round (dy[0]+= (ymouse)-dy[0]) *speed);
Dx[0]=math.round (dx[0]+= (xmouse)-dx[0]) *speed);
for (I=1 i < d.length; i++) {
Dy[i]=math.round (dy[i]+= (Dy[i-1]-dy[i]) *speed);
Dx[i]=math.round (dx[i]+= (Dx[i-1]-dx[i]) *speed);
}
Y[0]=math.round (y[0]+= (ymouse)-y[0]) *speed);
X[0]=math.round (x[0]+= (xmouse)-x[0]) *speed);
for (I=1 i < n; i++) {
Y[i]=math.round (y[i]+= (Y[i-1]-y[i]) *speed);
X[i]=math.round (x[i]+= (X[i-1]-x[i]) *speed);
}
Clockandassign ();
SetTimeout (' Delay () ', 20);
}
if (ns| | IE) Window.onload=delay;
-->
</SCRIPT>



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.