Javascript Code: Date and time following mouse

Using a specific style for the mouse will make your website more beautiful. In the following code date and time follows the mouse pointer in the form of a clock. In the center of this clock, date and time is located and around it, instead of hands, 3 strips are used around the clock which move forward in harmony with time. One is the second counter, the other is the minute counter and the last is the hour counter. This code actually combines digital and analog clocks and puts it with the date of the day in a beautiful manner.
<!-- this script got from www.javascriptfreecode.com - Coded by: Krishna Eydat -->

<style>
/*oscar*/
body {
    margin: 0;
    background: green;
    height: 300px;
}

#oscar {
    width: 30px;
}
/*oscar*/
*, *:before, *:after {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

html, body {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #10191f;
    font-family: "Courgette", Monaco, Consolas, monospace;
    font-size: 30px;
    font-weight: normal;
    color: #20292f;
}

body:before {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url("https://www.javascriptfreecode.com/files//abstract_wireframe.jpg");
    background-position: center bottom;
    background-size: cover;
    content: "";
    z-index: 1;
    opacity: 0.1;
}

.clock-wrap {
    position: relative;
    font-size: 2vw;
    height: 20vw;
    width: 20vw;
    z-index: 100;
}

@media only screen and (min-width: 420px) {
.clock-wrap {
    font-size: 2.5vh;
    height: 25vh;
    width: 25vh;
}
}

.clock-wrap .clock-day,
.clock-wrap .clock-date,
.clock-wrap .clock-time {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: absolute;
    white-space: nowrap;
}

.clock-wrap .clock-day {
    left: 50%;
    top: 30%;
    transform: translateX(-50%);
    letter-spacing: 0;
    font-size: 80%;
    color: #b3b3b3;
}

.clock-wrap .clock-date {
    left: 50%;
    bottom: 30%;
    transform: translateX(-50%);
    letter-spacing: 0;
    font-size: 70%;
    color: gray;
}

.clock-wrap .clock-time {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #35434d;
}

.clock-wrap .clock-time > span {
    padding: 0 0.05em;
}

.clock-wrap .clock-time .hours {
    color: OliveDrab;
}

.clock-wrap .clock-time .minutes {
    color: DeepPink;
}

.clock-wrap .clock-time .seconds {
    color: SteelBlue;
}

.clock-wrap svg {
    display: block;
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.2));
}

.clock-wrap svg circle {
    position: relative;
    fill: none;
    stroke-linecap: round;
    transform-origin: center center;
    transform: rotate(-90deg);
}

.clock-wrap svg .track {
    z-index: 1;
    stroke-width: 16;
    stroke: #20292f;
}

.clock-wrap svg .path {
    z-index: 2;
    stroke-width: 16;
    transition: stroke-dashoffset 500ms ease-out;
}

.clock-wrap .clock-seconds .path {
    stroke: rgba(70, 130, 180, 0.8);
}

.clock-wrap .clock-minutes .path {
    stroke: rgba(255, 20, 147, 0.8);
}

.clock-wrap .clock-hours .path {
    stroke: rgba(107, 142, 35, 0.8);
}

.clock-wrap .clock-markers .dots {
    stroke-width: 16;
    stroke: #313e47;
}
</style>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Courgette'>
<div id="wrapper">
<svg xmlns="http://www.w3.org/2000/svg" id="oscar" viewBox="0 0 391.837 391.837">

	<div class="clock-wrap">

		<div class="clock-day">
			<span class="day">...</span>
		</div>

		<div class="clock-date">
			<span class="date">...</span>
		</div>

		<div class="clock-time">
			<span class="hours">00</span>
			<span class="dots">:</span>
			<span class="minutes">00</span>
			<span class="dots">:</span>
			<span class="seconds">00</span>
			<span class="ampm">AM</span>
		</div>

		<svg width="100%" height="100%" viewBox="0 0 600 600">
			<g class="clock-seconds">
				<circle class="track" cx="300" cy="300" r="280" />
				<circle class="path" cx="300" cy="300" r="280" />
			</g>
			<g class="clock-minutes">
				<circle class="track" cx="300" cy="300" r="260" />
				<circle class="path" cx="300" cy="300" r="260" />
			</g>
			<g class="clock-hours">
				<circle class="track" cx="300" cy="300" r="240" />
				<circle class="path" cx="300" cy="300" r="240" />
			</g>
			<g class="clock-markers">
				<circle class="dots" cx="300" cy="300" r="210" />
			</g>
		</svg>

	</div>

  
</svg>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js'></script>
<script>

(function () {
    const txtDay = document.querySelector('.clock-wrap .clock-day .day');
    const txtDate = document.querySelector('.clock-wrap .clock-date .date');
    const timeHours = document.querySelector('.clock-wrap .clock-time .hours');
    const timeMins = document.querySelector('.clock-wrap .clock-time .minutes');
    const timeSecs = document.querySelector('.clock-wrap .clock-time .seconds');
    const timeAmPm = document.querySelector('.clock-wrap .clock-time .ampm');
    const pathSecs = document.querySelector('.clock-wrap .clock-seconds .path');
    const pathMins = document.querySelector('.clock-wrap .clock-minutes .path');
    const pathHours = document.querySelector('.clock-wrap .clock-hours .path');
    const markDots = document.querySelector('.clock-wrap .clock-markers .dots');

    // add zero on left
    const pad = (num) => {
        return (num < 10) ? '0' + num : '' + num;
    };

    // calculate dash offset for a path
    const updatePath = (path, cur, max) => {
        const len = Math.floor(path.getTotalLength());
        const offset = Math.floor(len - (cur * len / max));
        path.style.strokeDasharray = len + ' ' + len;
        path.style.strokeDashoffset = offset;
    };

    // update clock text display
    const updateClock = (elm, num) => {
        elm.textContent = pad(num);
    };

    // update day of the week
    const updateDay = (date) => {
        let days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
        txtDay.textContent = days[date.getDay()];
    };

    // update full date
    const updateDate = (date) => {
        let month = pad(date.getMonth() + 1);
        let day = pad(date.getDate());
        let year = pad(date.getFullYear());
        txtDate.textContent = [month, day, year].join('/');
    };

    // add clock marks
    const addMarks = () => {
        const len = Math.floor(markDots.getTotalLength());
        markDots.style.strokeDasharray = 1 + ' ' + Math.floor(len / 12);
    };

    // get time and update stuff
    const updateTime = () => {
        let date = new Date();
        let secs = date.getSeconds();
        let mins = date.getMinutes();
        let fhours = date.getHours();
        let hours = (fhours >= 12) ? (fhours - 12) : fhours;

        updatePath(pathSecs, secs, 60);
        updatePath(pathMins, mins, 60);
        updatePath(pathHours, hours, 12);
        updateClock(timeHours, hours ? hours : 12);
        updateClock(timeMins, mins);
        updateClock(timeSecs, secs);
        updateClock(timeAmPm, (fhours < 12) ? 'am' : 'pm');
        updateDate(date);
        updateDay(date);
    };

    // update time on interval
    setInterval(updateTime, 1000);
    updateTime();
    addMarks();
})();
//oscar
console.clear();

var oscar = document.getElementById("wrapper");
document.addEventListener("mousemove", getMouse);


oscar.style.position = "absolute";
var oscarpos = { x: 0, y: 0 };

setInterval(followMouse, 50);

var mouse = { x: 0, y: 0 };
var dir = "right";

function getMouse(e) {
    mouse.x = e.pageX;
    mouse.y = e.pageY;

    if (mouse.x > oscarpos.x) {
        dir = "right";
    } else {
        dir = "left";
    }
}

function followMouse() {
    var distX = mouse.x - oscarpos.x - 15;
    var distY = mouse.y - oscarpos.y - 10;
    //Easing motion
    //Progressive reduction of distance 
    oscarpos.x += distX / 5;
    oscarpos.y += distY / 2;

    oscar.style.left = oscarpos.x + "px";
    oscar.style.top = oscarpos.y + "px";


    //Apply css class 
    if (dir == "right") {
        oscar.setAttribute("class", "right");
    } else {
        oscar.setAttribute("class", "left");
    }

}

TweenMax.set('#wrapper', { perspective: 800, force3D: true, transformStyle: "preserve-3d" });
//oscar
</script><a target="_blank" href="https://www.javascriptfreecode.com/" style="font-size: 8pt; text-decoration: none;font-family:Tahoma">Javascript Free Code</a>
If you don't know how to use this code or need more information Click here!
Compatible browsers:
Tags: effect, moving, move, automatic
Javascript Best Codes

Javascript Code: Date and time following mouse

Links
