Super Clock

Developer
Size
6,256 Kb
Views
18,216

How do I make an super clock?

An SVG clock displaying progress through the current minute, hour, day, week, month and year.. What is a super clock? How do you make a super clock? This script and codes were developed by Aurer on 30 November 2022, Wednesday.

Super Clock Previews

Super Clock - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Super Clock</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg class="clock" viewbox="0 0 1000 1000">	<circle class="year" cx="500" cy="500" r="480" />	<text x="500" y="45">Year</text>	<circle class="month" cx="500" cy="500" r="425" />	<text x="500" y="100">Month</text>	<circle class="week" cx="500" cy="500" r="370" />	<text x="500" y="155">Week</text>	<circle class="day" cx="500" cy="500" r="315" />	<text x="500" y="210">Day</text>	<circle class="hour" cx="500" cy="500" r="260" />	<text x="500" y="265">Hour</text>	<circle class="minute" cx="500" cy="500" r="205" />	<text x="500" y="320">Minute</text>	<circle class="second" cx="500" cy="500" r="150" />	</svg> <script src="js/index.js"></script>
</body>
</html>

Super Clock - Script Codes CSS Codes

* { box-sizing: border-box;
}
html,
body { height: 100%;
}
body { background-color: #1c2528; padding: 1em; margin: 0;
}
svg { display: block; margin: auto; max-width: 100%;
}
svg circle { fill: none; stroke: #2b3437; stroke-width: 20; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: center; transform-origin: center; -webkit-transition-duration: .5s; transition-duration: .5s; -webkit-transition-timing-function: linear; transition-timing-function: linear;
}
svg circle[data-ending] { -webkit-transition-duration: 0s; transition-duration: 0s;
}
svg circle.segments { stroke: rgba(0, 0, 0, 0.5); opacity: 1; -webkit-transition: opacity 1s; transition: opacity 1s;
}
svg text { fill: #91afb6; font-family: sans-serif; font-size: .7em; opacity: 1; -webkit-transition: opacity 1s; transition: opacity 1s;
}
svg.hide-details text,
svg.hide-details .segments { opacity: 0;
}
.year.progress { stroke: #395E66;
}
.year + text { fill: #889ea3;
}
.month.progress { stroke: #387D7A;
}
.month + text { fill: #88b1af;
}
.week.progress { stroke: #32936F;
}
.week + text { fill: #84bea9;
}
.day.progress { stroke: #26A96C;
}
.day + text { fill: #7dcba7;
}
.hour.progress { stroke: #12c777;
}
.hour + text { fill: #71ddad;
}
.minute.progress { stroke: #0be886;
}
.minute + text { fill: #6df1b6;
}
@-webkit-keyframes second { to { -webkit-transform: rotate(270deg); transform: rotate(270deg); }
}
@keyframes second { to { -webkit-transform: rotate(270deg); transform: rotate(270deg); }
}
.second { stroke-width: 20;
}
.second.progress { stroke: #29ffa0; stroke-dasharray: 1 942; stroke-linecap: round;
}
.second.progress.is-animated { -webkit-animation: second 1s linear infinite; animation: second 1s linear infinite;
}
.second + text { fill: #7fffc6;
}

Super Clock - Script Codes JS Codes

'use strict';
var App = {	progressElements: [],	segmentElements: [],	init: function init() {	this.svg = document.querySelector('svg.clock');	this.setSize();	this.addProps();	this.setupCircles();	this.setupSegments();	this.setTimouts();	this.enableDisplayOptions();	this.updateMinute();	this.updateHour();	this.updateDay();	this.updateWeek();	this.updateMonth();	this.updateYear();	},	addProps: function addProps() {	SVGElement.prototype.circumference = function () {	return this.getAttribute('r') * 2 * Math.PI;	};	},	setupCircles: function setupCircles() {	var circles = App.svg.querySelectorAll('circle');	for (var i = 0; i < circles.length; i++) {	var circle = circles[i];	var className = circle.getAttribute('class');	// Add progress circle	var progress = circle.cloneNode(true);	progress.setAttribute('stroke-dasharray', circle.circumference());	progress.setAttribute('stroke-dashoffset', circle.circumference());	progress.setAttribute('class', className + ' progress');	App.progressElements[className] = App.svg.appendChild(progress);	// Add segments circle	var segment = circle.cloneNode(true);	segment.setAttribute('class', className + ' segments');	App.segmentElements[className] = App.svg.appendChild(segment);	};	},	setupSegments: function setupSegments() {	function calculateSegments(element) {	var circle = App.segmentElements[element];	var date = new Date();	var segmentCounts = {	second: 1,	minute: 60,	hour: 60,	day: 24,	week: 7,	month: new Date(date.getFullYear(), date.getMonth(), 0).getDate(),	year: 12	};	return circle.getAttribute('r') * 2 * Math.PI / segmentCounts[element] - 1;	}	App.segmentElements.second.setAttribute('stroke-dasharray', '1 ' + calculateSegments('second'));	App.segmentElements.minute.setAttribute('stroke-dasharray', '1 ' + calculateSegments('minute'));	App.segmentElements.hour.setAttribute('stroke-dasharray', '1 ' + calculateSegments('hour'));	App.segmentElements.day.setAttribute('stroke-dasharray', '1 ' + calculateSegments('day'));	App.segmentElements.week.setAttribute('stroke-dasharray', '1 ' + calculateSegments('week'));	App.segmentElements.month.setAttribute('stroke-dasharray', '1 ' + calculateSegments('month'));	App.segmentElements.year.setAttribute('stroke-dasharray', '1 ' + calculateSegments('year'));	},	setSize: function setSize() {	var y = window.innerHeight;	var x = window.innerwidth;	var max = x > y ? x : y;	App.svg.setAttribute('height', max - 20);	App.svg.setAttribute('width', max - 20);	},	enableDisplayOptions: function enableDisplayOptions() {	var toggleDetails = function toggleDetails() {	App.svg.classList.toggle('hide-details');	};	setTimeout(toggleDetails, 2000);	document.body.onclick = toggleDetails;	document.body.ontouchend = toggleDetails;	},	updateMinute: function updateMinute() {	var circle = App.progressElements.minute;	var second = new Date().getSeconds();	var pos = second / 60 * 100;	var offset = circle.circumference() - circle.circumference() / 100 * pos;	circle.setAttribute('stroke-dashoffset', offset);	if (pos == 0) {	circle.setAttribute('data-ending', true);	} else {	circle.removeAttribute('data-ending');	}	},	updateHour: function updateHour() {	var hour = App.progressElements.hour;	var now = new Date();	var minutesInHour = 60;	var minute = now.getMinutes();	var second = now.getSeconds();	minute += second / 60;	var pos = minute / minutesInHour * 100;	hour.setAttribute('stroke-dasharray', hour.circumference());	hour.setAttribute('stroke-dashoffset', hour.circumference() - hour.circumference() / 100 * pos);	},	updateDay: function updateDay() {	var circle = App.progressElements.day;	var minutesInDay = 60 * 24;	var hour = new Date().getHours();	var minute = 60 * hour + new Date().getMinutes();	var pos = minute / minutesInDay * 100;	circle.setAttribute('stroke-dasharray', circle.circumference());	circle.setAttribute('stroke-dashoffset', circle.circumference() - circle.circumference() / 100 * pos);	},	updateWeek: function updateWeek() {	var circle = App.progressElements.week;	var date = new Date();	var dayOfWeek = new Date().getDay();	var hours = date.getHours();	var minutes = new Date().getMinutes() / 60;	var hourInWeek = (hours + minutes) / (7 * 24) * 100;	var pos = dayOfWeek / 7 * 100 + hourInWeek;	circle.setAttribute('stroke-dasharray', circle.circumference());	circle.setAttribute('stroke-dashoffset', circle.circumference() - circle.circumference() / 100 * pos);	},	updateMonth: function updateMonth() {	var circle = App.progressElements.month;	var date = new Date();	var today = date.getDate();	var daysInMonth = new Date(date.getYear(), date.getMonth(), 0).getDate();	var hours = date.getHours();	var hoursInDay = hours / 24;	var pos = (today + hoursInDay) / daysInMonth * 100;	circle.setAttribute('stroke-dasharray', circle.circumference());	circle.setAttribute('stroke-dashoffset', circle.circumference() - circle.circumference() / 100 * pos);	},	updateYear: function updateYear() {	var circle = App.progressElements.year;	var today = new Date();	var first = new Date(today.getFullYear(), 0, 1);	var dayOfTheYear = Math.round((today - first) / 1000 / 60 / 60 / 24 + .5, 0);	var pos = 100 / 365 * dayOfTheYear;	circle.setAttribute('stroke-dasharray', circle.circumference());	circle.setAttribute('stroke-dashoffset', circle.circumference() - circle.circumference() / 100 * pos);	},	setTimouts: function setTimouts() {	var date = new Date();	var seconds = date.getSeconds();	var milliseconds = date.getMilliseconds();	var millisecondsUntilNextSecond = 1000 - milliseconds - 1000;	var secondsUntilNextMinute = (60 - seconds) * 1000 - millisecondsUntilNextSecond;	setTimeout(function () {	App.progressElements.second.classList.add('is-animated');	// Update every second	setInterval(App.updateMinute.bind(this), 1000);	setInterval(App.updateHour.bind(this), 1000);	}, millisecondsUntilNextSecond);	// Update every minute	setTimeout(function () {	setInterval(function () {	App.updateDay();	App.updateWeek();	App.updateMonth();	App.updateYear();	}, 60000);	App.updateDay();	App.updateWeek();	App.updateMonth();	App.updateYear();	}, secondsUntilNextMinute);	}
};
App.init();
Super Clock - Script Codes
Super Clock - Script Codes
Home Page Home
Developer Aurer
Username aurer
Uploaded November 30, 2022
Rating 3
Size 6,256 Kb
Views 18,216
Do you need developer help for Super Clock?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Aurer (aurer) Script Codes
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!