Mouse Clock Cursor

Written by @kerixa 21 August 2012

Using special styles in the website makes them look different from other websites and increases the attractiveness for the audiences. One of these special styles is to include styles on the mouse cursors, such as the following code, in which a clock is placed next to the mouse cursors and follows it with any mouvements. This code sample is useful for websites for which knowing the time is essential, such as appointment websites.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlfreecode.com coded by: Kerixa Inc. -->
<style>
body {
        
    font-family: "arial";
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
    color: #e8e2d6;
}

a {
    color: lightpink;
    text-decoration: none;
}

h1 {
    font-size: 28px;
    color: #e50099;
    text-transform: uppercase
}

h2 {
    font-size: 18px;
    color: cyan;
    text-shadow: 0 0 10px cyan
}

h3 {
    font-size: 11px;
    color: #f5a9e1;
}
</style>
<script>
var second_hand_colour = "#f2f5a9"; // colour of second hand
var minute_hand_colour = "#d0f5a9"; // colour of minute hand
var hour_hand_colour = "#cef6e3"; // colour of hour hand
var facia_colour = "#cecef6"; // colour of facia (i.e. numbers)
var face_colour = "transparent"; // colour of face (can be set to "transparent");
var xoffset = 60; // horizontal distance from centre of clock to cursor
var yoffset = 60; // vertical distance from centre of clock to cursor
var size = 120; // pixels high/wide
var facia = String.fromCharCode(9660) + " 1 2 " + String.fromCharCode(9668) + " 4 5 " + String.fromCharCode(9650) + " 7 8 " + String.fromCharCode(9658) + " 10 11"; // characters to use for face, starting at '12' position
var clok;
var newx = xmo = 400;
var newy = ymo = 300;
window.onload = function () {
    if (document.getElementById) {
    var i, j, k;
    clok = document.createElement("div");
    clok.style.position = "absolute";
    if (face_colour != "transparent") for (i = 0; i < size; i++) {
    j = createDiv(false, face_colour);
    if (document.all) j.style.filter = "Alpha(Opacity=50)";
    else j.style.opacity = 0.5;
    k = size * Math.sqrt(i / size - Math.pow(i / size, 2));
    j.style.left = size / 2 - k + "px";
    j.style.top = i + "px";
    j.style.height = "1px";
    j.style.width = k * 2 + "px";
    clok.appendChild(j);
    }
    for (i = 1; i < size / 4; i++) {
    j = createDiv("sec" + i, second_hand_colour);
    j.style.height = "2px";
    j.style.width = "2px";
    clok.appendChild(j);
    }
    for (i = 1; i < size / 4; i++) {
    j = createDiv("min" + i, minute_hand_colour);
    j.style.height = "3px";
    j.style.width = "3px";
    clok.appendChild(j);
    }
    for (i = 0; i < size / 6; i++) {
    j = createDiv("hour" + i, hour_hand_colour);
    j.style.height = "4px";
    j.style.width = "4px";
    if (!i) j.style.top = j.style.left = size / 2 - 2 + "px";
    clok.appendChild(j);
    }
    facia = facia.split(" ");
    for (i = 0; i < 12; i++) {
    j = createDiv(false, "transparent");
    j.style.color = facia_colour;
    j.style.font = "bold 10pt monospace";
    j.style.overflow = "visible";
    j.appendChild(document.createTextNode(facia[i]));
    j.style.top = size / 2 - 7 - size / 2 * Math.cos(i * Math.PI / 6) + "px";
    j.style.left = size / 2 - 5 + size / 2 * Math.sin(i * Math.PI / 6) + "px";
    clok.appendChild(j);
    }
    document.body.appendChild(clok);
    tick();
    tock();
    }
}


function tick() {
    var i, j;
    var now = new Date();
    var sec = (now.getSeconds() + (now.getMilliseconds() % 1000) / 1000) * Math.PI / 30;
    for (i = 1; i < size / 4; i++) {
    j = document.getElementById("sec" + i).style;
    j.left = size / 2 + 2 * i * Math.sin(sec) - 1 + "px";
    j.top = size / 2 - 2 * i * Math.cos(sec) - 1 + "px";
    }
    xmo += Math.floor((newx - xmo) / 4);
    clok.style.left = xmo + "px";
    ymo += Math.floor((newy - ymo) / 4);
    clok.style.top = ymo + "px";
    setTimeout("tick()", 40);
}

function tock() {
    var i, j;
    var now = new Date();
    var min = (now.getMinutes() + now.getSeconds() / 60) * Math.PI / 30;
    var hrs = (now.getHours() + now.getMinutes() / 60) * Math.PI / 6
    for (i = 1; i < size / 4; i++) {
    j = document.getElementById("min" + i).style;
    j.left = size / 2 + 2 * i * Math.sin(min) - 1.5 + "px";
    j.top = size / 2 - 2 * i * Math.cos(min) - 1.5 + "px";
    }
    for (i = 1; i < size / 6; i++) {
    j = document.getElementById("hour" + i).style;
    j.left = size / 2 + 2 * i * Math.sin(hrs) - 2 + "px";
    j.top = size / 2 - 2 * i * Math.cos(hrs) - 2 + "px";
    }
    setTimeout("tock()", 999);
}
document.onmousemove = mouse;

function mouse(e) {
    newy = yoffset - size / 2 + ((e) ? e.pageY : event.y + scro());
    newx = xoffset - size / 2 + ((e) ? e.pageX : event.x);
}

function scro() {
    var scro = 0;
    if (document.body.scrollTop) scro = document.body.scrollTop;
    else if (document.documentElement && document.documentElement.scrollTop) scro = document.documentElement.scrollTop;
    return (scro);
}

function createDiv(id, bg) {
    var div = document.createElement("div");
    div.style.position = "absolute";
    div.style.overflow = "hidden";
    div.style.backgroundColor = bg;
    if (id) div.setAttribute("id", id);
    return (div);
}
</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!

Comments

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

0 / 300