It's free and you have access to premium codes!
Welcome back! Please login to your account.
Don't worry, we'll send you a message to help you to recover your acount.
Please check your email for instructions to activate your account.
Written by 21 August 2012
Websites usually use special styles to increase the beauty of the websites and increase the attention of site visitors which hopefully leads to increased website ranking due to a better user interface in search engines. One of these styles is giving the clock to the mouse, which is shown in the following code. In addition to the fact that you can choose the colors you like for different items of this clock, there is also the date of the day around the clock, and it animates when the mouse moves. You can turn off the clock but the button provided at top.
<!-- this script is provided by https://www.htmlfreecode.com coded by: Kerixa Inc. -->
<style>
body {
background-color: #111;
font-family: sans-serif;
font-size: 13px;
color: #111;
}
.css1 {
position: absolute;
top: 0px;
left: 0px;
width: 16px;
height: 16px;
font-family: Arial,sans-serif;
font-size: 16px;
text-align: center;
font-weight: bold;
}
.css2 {
position: absolute;
top: 0px;
left: 0px;
width: 10px;
height: 10px;
font-family: Arial,sans-serif;
font-size: 10px;
text-align: center;
}
</style>
<p>Java Script Magic Just Mouse Move</p>
<script>
if (document.getElementById && !document.layers) {
document.write('<input type="button" id="control" value="Clock Off" onClick="this.blur();onoff()">');
}
if (document.getElementById && !document.layers) {
//Clock colours
dCol = '#00ff00';//date colour.
fCol = '#ffffff';//face colour.
sCol = '#ffffff';//seconds colour.
mCol = '#00ff00';//minutes colour.
hCol = '#00ff00';//hours colour.
//Controls
del = 0.6; //Follow mouse speed.
ref = 40; //Run speed (timeout).
//Alter nothing below! Alignments will be lost!
var ieType = (typeof window.innerWidth != 'number');
var docComp = (document.compatMode);
var docMod = (docComp && docComp.indexOf("CSS") != -1);
var ieRef = (ieType && docMod)
? document.documentElement : document.body;
theDays = new Array("SUNDAY", "MONDAY", "TUESDAY", "WEDNESDAY", "THURSDAY", "FRIDAY", "SATURDAY");
theMonths = new Array("JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER");
date = new Date();
day = date.getDate();
year = date.getYear();
if (year < 2000) year = year + 1900;
tmpdate = " " + theDays[date.getDay()] + " " + day + " " + theMonths[date.getMonth()] + " " + year;
D = tmpdate.split("");
N = '3 4 5 6 7 8 9 10 11 12 1 2';
N = N.split(" ");
F = N.length;
H = '...';
H = H.split("");
M = '....';
M = M.split("");
S = '.....';
S = S.split("");
siz = 40;
eqf = 360 / F;
eqd = 360 / D.length;
han = siz / 5.5;
ofy = -7;
ofx = -3;
ofst = 70;
tmr = null;
vis = true;
mouseY = 0;
mouseX = 0;
dy = new Array();
dx = new Array();
zy = new Array();
zx = new Array();
tmps = new Array();
tmpm = new Array();
tmph = new Array();
tmpf = new Array();
tmpd = new Array();
var sum = parseInt(D.length + F + H.length + M.length + S.length) + 1;
for (i = 0; i < sum; i++) {
dy[i] = 0;
dx[i] = 0;
zy[i] = 0;
zx[i] = 0;
}
algn = new Array();
for (i = 0; i < D.length; i++) {
algn[i] = (parseInt(D[i]) || D[i] == 0) ? 10 : 9;
document.write('<div id="_date' + i + '" class="css2" style="font-size:' + algn[i] + 'px;color:' + dCol + '">' + D[i] + '<\/div>');
tmpd[i] = document.getElementById("_date" + i).style;
}
for (i = 0; i < F; i++) {
document.write('<div id="_face' + i + '" class="css2" style="color:' + fCol + '">' + N[i] + '<\/div>');
tmpf[i] = document.getElementById("_face" + i).style;
}
for (i = 0; i < H.length; i++) {
document.write('<div id="_hours' + i + '" class="css1" style="color:' + hCol + '">' + H[i] + '<\/div>');
tmph[i] = document.getElementById("_hours" + i).style;
}
for (i = 0; i < M.length; i++) {
document.write('<div id="_minutes' + i + '" class="css1" style="color:' + mCol + '">' + M[i] + '<\/div>');
tmpm[i] = document.getElementById("_minutes" + i).style;
}
for (i = 0; i < S.length; i++) {
document.write('<div id="_seconds' + i + '" class="css1" style="color:' + sCol + '">' + S[i] + '<\/div>');
tmps[i] = document.getElementById("_seconds" + i).style;
}
function onoff() {
if (vis) {
vis = false;
document.getElementById("control").value = "Clock On";
}
else {
vis = true;
document.getElementById("control").value = "Clock Off";
Delay();
}
kill();
}
function kill() {
if (vis)
document.onmousemove = mouse;
else
document.onmousemove = null;
}
function mouse(e) {
var msy = (!ieType) ? window.pageYOffset : 0;
if (!e) e = window.event;
if (typeof e.pageY == 'number') {
mouseY = e.pageY + ofst - msy;
mouseX = e.pageX + ofst;
}
else {
mouseY = e.clientY + ofst - msy;
mouseX = e.clientX + ofst;
}
if (!vis) kill();
}
document.onmousemove = mouse;
function winDims() {
winH = (ieType) ? ieRef.clientHeight : window.innerHeight;
winW = (ieType) ? ieRef.clientWidth : window.innerWidth;
}
winDims();
window.onresize = new Function("winDims()");
function ClockAndAssign() {
time = new Date();
secs = time.getSeconds();
sec = Math.PI * (secs - 15) / 30;
mins = time.getMinutes();
min = Math.PI * (mins - 15) / 30;
hrs = time.getHours();
hr = Math.PI * (hrs - 3) / 6 + Math.PI * parseInt(time.getMinutes()) / 360;
for (i = 0; i < S.length; i++) {
tmps[i].top = dy[D.length + F + H.length + M.length + i] + ofy + (i * han) * Math.sin(sec) + scrollY + "px";
tmps[i].left = dx[D.length + F + H.length + M.length + i] + ofx + (i * han) * Math.cos(sec) + "px";
}
for (i = 0; i < M.length; i++) {
tmpm[i].top = dy[D.length + F + H.length + i] + ofy + (i * han) * Math.sin(min) + scrollY + "px";
tmpm[i].left = dx[D.length + F + H.length + i] + ofx + (i * han) * Math.cos(min) + "px";
}
for (i = 0; i < H.length; i++) {
tmph[i].top = dy[D.length + F + i] + ofy + (i * han) * Math.sin(hr) + scrollY + "px";
tmph[i].left = dx[D.length + F + i] + ofx + (i * han) * Math.cos(hr) + "px";
}
for (i = 0; i < F; i++) {
tmpf[i].top = dy[D.length + i] + siz * Math.sin(i * eqf * Math.PI / 180) + scrollY + "px";
tmpf[i].left = dx[D.length + i] + siz * Math.cos(i * eqf * Math.PI / 180) + "px";
}
for (i = 0; i < D.length; i++) {
tmpd[i].top = dy[i] + siz * 1.5 * Math.sin(-sec + i * eqd * Math.PI / 180) + scrollY + "px";
tmpd[i].left = dx[i] + siz * 1.5 * Math.cos(-sec + i * eqd * Math.PI / 180) + "px";
}
if (!vis) clearTimeout(tmr);
}
buffW = (ieType) ? 80 : 90;
function Delay() {
scrollY = (ieType) ? ieRef.scrollTop : window.pageYOffset;
if (!vis) {
dy[0] = -100;
dx[0] = -100;
}
else {
zy[0] = Math.round(dy[0] += ((mouseY) - dy[0]) * del);
zx[0] = Math.round(dx[0] += ((mouseX) - dx[0]) * del);
}
for (i = 1; i < sum; i++) {
if (!vis) {
dy[i] = -100;
dx[i] = -100;
}
else {
zy[i] = Math.round(dy[i] += (zy[i - 1] - dy[i]) * del);
zx[i] = Math.round(dx[i] += (zx[i - 1] - dx[i]) * del);
}
if (dy[i - 1] >= winH - 80) dy[i - 1] = winH - 80;
if (dx[i - 1] >= winW - buffW) dx[i - 1] = winW - buffW;
}
tmr = setTimeout('Delay()', ref);
ClockAndAssign();
}
window.onload = Delay;
}
</script><a target='_blank' href='https://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!