Color mouse clock

Written by @kerixa 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.

Code Snippet:

                                                
                                                <!-- 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>                                                
                                            

Example:


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K

Comments


Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: carfaoui, Ali7hry, alexnicola, Adam20, Prashanthcs11
advertisement 2