A Different Clock

Developer
Darryl Huffman
Size
3,613 Kb
Views
8,096
  1. A Different Clock Previews
  2. A Different Clock HTML Codes
  3. A Different Clock CSS Codes
  4. A Different Clock JS Codes

How do I make an a different clock?

Wanted to experiment with a clock design I thought out. I think it's unique, but I could be wrong. I'd love to have a clock that worked like this, but by grooving lines into sand.. What is a a different clock? How do you make a a different clock? This script and codes were developed by Darryl Huffman on 07 January 2023, Saturday.

A Different Clock Previews
IQ Test

A Different Clock - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Different Clock</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="header"></div>
<div class="text">Click to Remove Color</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Different Clock - Script Codes CSS Codes

html, body { width: 100%; height: 100%; padding: 0px; margin: 0px; background-color: #1c1c1c; overflow: hidden;
}
.header { width: 100%; height: 100%; position: relative;
}
.header canvas { left: 50%; top: 50%; position: absolute;
}
.text { border-radius: 4px; position: absolute; font-family: sans-serif; color: #BBB; bottom: 40px; left: calc(50% - 100px); cursor: pointer; pointer-events: none; width: 200px; font-size: 13px; text-align: center; line-height: 40px; background-color: rgba(255, 255, 255, 0.05);
}

A Different Clock - Script Codes JS Codes

window.requestFrame = (function(){	return window.requestAnimationFrame ||	window.webkitRequestAnimationFrame ||	window.mozRequestAnimationFrame ||	function( callback ){	window.setTimeout(callback, 1000 / 60);	};
})();
var inColor = true;
$(document).click(function(){	switch(inColor){	case true:	inColor = false;	break;	case false:	inColor = true;	break;	}
});
function canvasClock(){ var ch = $('.header').height(),	cw = $('.header').width(), offsetT = 0, offsetL = 0; if(cw > ch){ cw = ch; offsetL = cw/2; } else { ch = cw; offsetT = ch/2; }	// Animation Canvas	var canvas = $('<canvas/>').attr({width: cw, height: ch}).appendTo('.header'),	context = canvas.get(0).getContext("2d"); var lineWidth = cw / 80; // Width of clock lines function fixSize(){ ch = $('.header').height();	cw = $('.header').width(); offsetT = 0; offsetL = 0; if(cw > ch){ cw = ch; } else { ch = cw; } lineWidth = cw / 58; // Width of clock lines $('.header canvas').attr({width: cw, height: ch}).css({ 'margin-left': -(cw/2), 'margin-top': -(ch/2) }); }	fixSize(); $(window).resize(function(){ fixSize(); });	// Timing Variables	var startTime = new Date().getTime();	var currentTime = 0;	var d = new Date();	var currHour = d.getHours() % 12;	var currMin = d.getMinutes();	var currSec = d.getMinutes();	// Animation Variables	var Animating = true;	// Hand key init state	var AnimHand;	var hand = function(){	this.color = '#262626';	this.firstTime = true;	this.startSec = d.getSeconds();	this.v = false;	AnimHand = this;	this.draw = function(){	d = new Date();	currHour = d.getHours() % 12;	currMin = d.getMinutes();	for(var i = 0; i < (12+2)*2; i+=2){	var newR = 360*(currentTime%1) + 360*(this.startSec/60);	var removeR = 0;	var thisHand = i/2;	var maxAngle = 360;	if(thisHand < currHour){ // Hours	maxAngle = 360;	this.color = '#007FD4';	} else if(thisHand == currHour){ // Minutes	maxAngle = 360*(currMin/60);	this.color = '#00D471';	} else if(thisHand == 13){ // Seconds	this.color = '#EAF200';	maxAngle = 360;	} else {	maxAngle = 0;	this.color = '#262626';	}	if(currentTime % 2 > 1){	if(newR <= maxAngle){	removeR = maxAngle;	newR += maxAngle;	} else {	removeR = newR;	newR += maxAngle;	}	} else {	if(newR >= maxAngle){	removeR = maxAngle;	newR += maxAngle;	} else {	removeR = newR;	newR += maxAngle;	}	}	if(inColor == false){ this.color = '#262626'; }	context.save();	context.beginPath();	context.strokeStyle = this.color;	context.lineWidth = lineWidth;	context.arc(cw/2, ch/2, (lineWidth*2) + (i*lineWidth), (removeR* Math.PI / 180) - 0.5*Math.PI, (newR* Math.PI / 180)-(removeR* Math.PI / 180) - 0.5*Math.PI);	context.stroke();	context.restore();	}	}	}	// Animation Loop	function update(){	if(Animating == true){	context.clearRect(0, 0, cw, ch);	var now = new Date().getTime();	currentTime = (now - startTime) / 100000;	AnimHand.draw();	requestFrame(update);	}	}	function init(){	hand();	update();	}	init();
}
canvasClock();
A Different Clock - Script Codes
A Different Clock - Script Codes
Home Page Home
Developer Darryl Huffman
Username darrylhuffman
Uploaded January 07, 2023
Rating 4
Size 3,613 Kb
Views 8,096
Do you need developer help for A Different 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!

Darryl Huffman (darrylhuffman) Script Codes
Name
Blackhole
Fur
A Perfect Orbit
Math
Simple SVG Charts
Followers Solar System
Let it snow, let it snow, code the snow.
BLACKHOLE - A Canvas Experiment
Spilled Paint
LightBulb
Create amazing sales emails 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!