Analog Clock

Developer
António Capelo
Size
2,896 Kb
Views
8,096
  1. Analog Clock Previews
  2. Analog Clock HTML Codes
  3. Analog Clock CSS Codes
  4. Analog Clock JS Codes

How do I make an analog clock?

Simple example of an analog clock using mainly HTML, CSS and JScript :). What is a analog clock? How do you make a analog clock? This script and codes were developed by António Capelo on 15 December 2022, Thursday.

Analog Clock Previews
IQ Test

Analog Clock - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Analog Clock</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!DOCTYPE html>
<html lang="en">
<head> <meta charset="utf-8"> <title>INSERT TITLE</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="INSERT DESCRIPTION"> <meta name="author" content="INSERT AUTHOR"> <meta name="keywords" content="INSERT KEYWORDS"> <!-- CSS's -->
<!-- <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap-responsive.min.css" rel="stylesheet"> --> <link href="css/style.css" rel="stylesheet"> <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> <!-- Fav and touch icons --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-57-precomposed.png"> <link rel="shortcut icon" href="img/favicon.png"> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script> <script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="content"> <div id="aclock"> <img src="https://github.com/antoniocapelo/quickies/blob/master/analog-clock/images/secondHand.png?raw=true" id="secondhand"> <img src="https://github.com/antoniocapelo/quickies/blob/master/analog-clock/images/minuteHand.png?raw=true" id="minutehand"> <img src="https://github.com/antoniocapelo/quickies/blob/master/analog-clock/images/hourHand.png?raw=true" id="hourhand"> </div>
</div>
</body>
</html> <script src="js/index.js"></script>
</body>
</html>

Analog Clock - Script Codes CSS Codes

/*-------------------------	Simple reset
--------------------------*/
*{	margin:0;	padding:0;
}
body { background: #E3E7E8;
}
/*-------------------------	General Styles
--------------------------*/
html{	overflow:hidden;
}
body {	font-size: 46px;	font-family: courier;
}
#aclock {	position: relative;	width: 378px;	height: 378px;	background-image: url('https://github.com/antoniocapelo/quickies/blob/master/analog-clock/images/clockFace.png?raw=true');	left: 50%;	text-align: center;	margin: 40px 0 0 -189px;
}
#secondhand {	position: absolute;	top:58px;	left: 181px;	/* Transform Origin */	-webkit-transform-origin: 50% 95%;	-moz-transform-origin: 50% 95%;	transform-origin: 50% 95%;	z-index: 1000;
}
#minutehand, #hourhand {	position: absolute;	/* Transform Origin */	-webkit-transform-origin: 50% 100%;	-moz-transform-origin: 50% 100%;	transform-origin: 50% 100%;	z-index: 0;
}
#minutehand {	/*top:50px;*/	top: 74px;	left: 187px;
}
#hourhand {	top:90px; left:187px;
}

Analog Clock - Script Codes JS Codes

$(function(){	updateTime();
});
function updateTime() {	// Get time from moment.js with specified format	var now = moment().format("hhmmssdA");	// Move the clock hands	rotateHands(now[4]+now[5],now[2] + now[3],now[0] + now[1]);	setTimeout(updateTime, 1000);
}
function rotateHands(sec,min,hour) { var degSec = 360/60*sec;	var degMin = 360/60*min;	var degHour = 360/12*hour;	var sHand = $('#secondhand');	sHand.css({ "-webkit-transform": "rotate(" + degSec + "deg)", "-moz-transform": "rotate(" + degSec + "deg)", "transform": "rotate(" + degSec + "deg)" });	var mHand = $('#minutehand');	mHand.css({ "-webkit-transform": "rotate(" + degMin + "deg)", "-moz-transform": "rotate(" + degMin + "deg)", "transform": "rotate(" + degMin + "deg)" });	var hHand = $('#hourhand');	hHand.css({ "-webkit-transform": "rotate(" + degHour + "deg)", "-moz-transform": "rotate(" + degHour + "deg)", "transform": "rotate(" + degHour + "deg)" });
}
Analog Clock - Script Codes
Analog Clock - Script Codes
Home Page Home
Developer António Capelo
Username capelo
Uploaded December 15, 2022
Rating 3
Size 2,896 Kb
Views 8,096
Do you need developer help for Analog 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!

António Capelo (capelo) Script Codes
Name
8-Bit Avatar
AngularJS Modal Factory
Gif as page background
Clock loading
Full-width slider.
Donut Chart example - MorrisJS
Menu with following underline
Camera click
React Boilerplate
ToDo
Create amazing marketing copy 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!