Javascript-implemented clock effect following the mouse movement (displayed on Chinese and English dates) _ page background

A lot of code on the internet is incorrect because of the clock effect implemented by js that follows the mouse movement. Here we will try to make it useful. Chinese date limit

<Script language = "JavaScript"> <! -- DCol = 'red'; // defines the calendar color fCol = '# ff0000'; // defines the color sCol =' # 00ff00' for the 12 numbers from 1 to 12 '; // define the second-hand color mCol = '# 0000ff'; // define the minute-hand color hCol = '# ff0000'; // define the hour-hand color ClockHeight = 40; // define the clock height ClockWidth = 40; // define the clock width ClockFromMouseY = 0; // define the relative vertical distance between the center of the clock and the mouse ClockFromMouseX = 100; // define the relative horizontal distance between the clock center and the mouse. // You must modify the color based on the background color on your page! Do not use the same background color. D = new Array ("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday "); m = new Array ", "September", "October", "November", "December"); // The value range of the given week and month is date = new Date (); day = date. getDate (); // obtain the current date command year = date. getYear (); // obtain the current year command if (year <2000) year = year + 1900; TodaysDate = "year" + m [date. getMonth ()] + "" + day + "day" + d [date. getDay ()] + "" + year; D = TodaysDate. split (''); // display" A Month/day of a year "H = '... '; H = H. split (''); M = '.... '; M = M. split (''); S = '..... '; S = S. split (''); // returns the second, minute, and hour-hour reverse positions Face = '1 2 3 4 5 6 7 8 9 10 11 12 '; font = 'arial'; size = 1; // defines the, and size of the second, minute, hour, and 1-12 characters (it is best to modify the) speed = 0.8; // define the speed at which all the relevant characters follow to the relative position of the previous mouse when the mouse position changes. You can see the path of each character, the value can be changed between 0.1 and 1.0 (the smallest value is 0.1, the slowest speed to follow, the fastest to follow when the value is 1.0 and the trajectory is displayed) ns = (document. layers); ie = (document. all ); // description applicable to both NS and IE browsers // The following large statement defines how the NS and IE browsers control and complete the time and rotate the calendar following the mouse to Face = face. split (''); N = Face. length; a = size * 10; ymouse = 0; xmouse = 0; scrll = 0; props = ""; props2 = ""; Split = 360/n; dspenders = 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 (); dx = new Array (); DY = new Array (); DX = 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] + '</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] + '</center> </layer> '); for (I = 0; I <S. length; I ++) document. write ('<Layer name = nsSeconds' + I + 'top = 0 left = 0 width = 15 height = 15> <center> <B>' + S [I] + '< /B> </center> </layer> '); for (I = 0; I <M. length; I ++) document. write ('<layer name = nsMinutes' + I + 'top = 0 left = 0 width = 15 height = 15> <center> <B>' + M [I] +' </B> </center> </layer> '); for (I = 0; I <H. length; I ++) document. write ('<layer name = nsHours' + I + 'top = 0 left = 0 width = 15 height = 15> <center> <B>' + H [I] +' </B> </center> </layer> ');} If (ie) {document. write ('<p id = "Od" style = "position: absolute; top: 0px; left: 0px"> <p style = "position: relative"> '); for (I = 0; I <D. length; I ++) document. write ('<p id = "ieDate" style = "position: absolute; top: 0px; left: 0; height:' + a + '; width: '+ a +'; text-align: center "> '+ props2 + D [I] +' </p> '); document. write ('</p>'); document. write ('<p id = "Of" style = "position: absolute; top: 0px; left: 0px"> <p style = "position: rel Ative "> '); for (I = 0; I <n; I ++) document. write ('<p id = "ieFace" style = "position: absolute; top: 0px; left: 0; height:' + a + '; width: '+ a +'; text-align: center "> '+ props + Face [I] +' </p> '); document. write ('</p>'); document. write ('<p id = "Oh" style = "position: absolute; top: 0px; left: 0px"> <p style = "position: relative"> '); for (I = 0; I <H. length; I ++) document. write ('<p 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] +' </p> '); document. write ('</p>'); document. write ('<p id = "Om" style = "position: absolute; top: 0px; left: 0px"> <p style = "position: relative"> '); for (I = 0; I <M. length; I ++) document. write ('<p id = "ieMinutes" style = "position: absolute; width: 16px; height: 16px; font-family: Arial; font-size: 16px; color: '+ mC Ol + '; text-align: center; font-weight: bold ">' + M [I] + '</p>'); document. write ('</p>') document. write ('<p id = "OS" style = "position: absolute; top: 0px; left: 0px"> <p style = "position: relative"> '); for (I = 0; I <S. length; I ++) document. write ('<p 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] +' </p> '); d Ocument. write ('</p>')} (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.topreferencedoc ument. body. scrollTop; of.style.top=w.w.doc ument. body. SC RollTop; oh.style.top=w.w.doc ument. body. scrollTop; maid Doc ument. body. scrollTop; OS .style.top=w.w.doc ument. 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
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

English date display:

<SCRIPT language = JavaScript> dCol = '000000'; // date color. fCol = '000000'; // face color. sCol = 'ff000000'; // seconds color. mCol = '000000'; // minutes color. hCol = '000000'; // hours color. clockHeight = 40; ClockWidth = 40; ClockFromMouseY = 0; ClockFromMouseX = 100; // Alter nothing below! Alignments will be lost! D = new Array ("SUNDAY", "MONDAY", "TUESDAY", "WEDNESDAY", "THURSDAY", "FRIDAY", "SATURDAY "); m = new Array ("JANUARY", "FEBRUARY", "MARCH", "l", "MAY", "JUNE", "JULY", "AUGUST ", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER"); date = new Date (); day = date. getDate (); year = date. getYear (); if (year <2000) year = year + 1900; TodaysDate = "" + d [date. getDay ()] + "" + day + "" + m [date. getMonth ()] + "" + year; D = TodaysDate. split (''); H ='... '; H = H. split (''); M = '.... '; M = M. split (''); S = '..... '; S = S. split (''); Face = '1 2 3 4 5 6 7 8 9 10 11 12'; // font = 'arial'; font = 'verdana '; size = 1; speed= 0.6; ns = (document. layers); ie = (document. all); Face = Face. split (''); n = Face. length; a = size * 10; ymouse = 0; xmouse = 0; scrll = 0; props = "<B>"; props2 = "<B> "; split = 360/n; dsp.pdf = 360/D. length; HandHeight = ClockHeight/4.5 HandWidth = ClockWidth/4.5 HandY =-7; H AndX =-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 (); Dx = new Array (); DY = new Array (); DX = 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] +' </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] + '</center> </layer> '); for (I = 0; I <S. length; I ++) document. write ('<layer name = nsSeconds' + I + 'top = 0 left = 0 width = 15 height = 15> <center> <B>' + S [I] +' </B> </center> </layer> '); for (I = 0; I <M. length; I ++) document. write ('<layer name = nsMinutes' + I + 'top = 0 left = 0 width = 15 height = 15> <center> <B> '+ M [I] +' </B> </center> </ layer> '); for (I = 0; I <H. length; I ++) document. write ('<layer name = nsHours' + I + 'top = 0 left = 0 width = 15 height = 15> <center> <B>' + H [I] +' </B> </center> </layer> ');} if (ie) {document. write ('<p id = "Od" style = "position: absolute; top: 0px; left: 0px"> <p style = "position: relative"> '); for (I = 0; I <D. length; I ++) document. write ('<p id = "ieDate" Style = "position: absolute; top: 0px; left: 0; height: '+ a +'; width: '+ a +'; text-align: center "> '+ props2 + D [I] +' </B> </p> '); document. write ('</p>'); document. write ('<p id = "Of" style = "position: absolute; top: 0px; left: 0px"> <p style = "position: relative"> '); for (I = 0; I <n; I ++) document. write ('<p id = "ieFace" style = "position: absolute; top: 0px; left: 0; height:' + a + '; width: '+ a +'; text-align: center "> '+ props + Face [I] +' </B> </P> '); document. write ('</p>'); document. write ('<p id = "Oh" style = "position: absolute; top: 0px; left: 0px"> <p style = "position: relative"> '); for (I = 0; I <H. length; I ++) document. write ('<p 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] +' </p> '); document. write ('</p>'); document. write ('<p id = "O M "style =" position: absolute; top: 0px; left: 0px "> <p style =" position: relative "> '); for (I = 0; I <M. length; I ++) document. write ('<p 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] +' </p> '); document. write ('</p>') document. write ('<p id = "OS" style = "position: absolute; top: 0px; left: 0px"> <p style = "pos Ition: relative "> '); for (I = 0; I <S. length; I ++) document. write ('<p 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] +' </p> '); document. write ('</p>')} (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.topreferencedoc ument. body. scrollTop; of.style.top=w.w.doc ument. body. SC RollTop; oh.style.top=w.w.doc ument. body. scrollTop; maid Doc ument. body. scrollTop; OS .style.top=w.w.doc ument. 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 () ', 10 );} if (ns | ie) window. onload = Delay; SCRIPT
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]