Create an Account

It's free and you have access to premium codes!

Password must be a minimum length of 8, with at least one uppercase, one lowercase, one number, and one special character.

Login

Welcome back! Please login to your account.

Recover Account

Don't worry, we'll send you a message to help you to recover your acount.

Message Received!

We will get back to you as soon as possible.

All
Hello
Popular Sites
JavaScript Best Codes
Html Free Codes
Html5 Free Codes
Php Best Codes
Developer Codes
Free Frontend
Social Media
Twitter Page
Youtube Channel
Support
Contact Us
About Html Best Codes
Not a member? Sign Up

Analogue Clock

Written by @kerixa 22 February 2014

A nice analogue clock written by html, css3 and jquery. Without any image or external object. Useful for whose want to have a light, nice and customizable clock in their websites.

Code Snippet:

                                                
                                                <!-- this script is provided by www.htmlbestcodes.com coded by: Kerixa Inc. -->
<!-- this script got from www.htmlbestcodes.com-Coded by: Krishna Eydat -->
<!DOCTYPE html>
<html lang=en>
<head>
<style type="text/css">
@charset "utf-8";
/* CSS Document */
body {
}

#wrapper {
	width: 455px;
margin: 30px auto;
text-align: center;
}

.button {
	font-family:"Myriad Pro", Arial, sans-serif;
	font-size: 24px;
	font-weight:bold;
	color:#333;
	text-decoration:none;
	letter-spacing:-1px;
}

#shadow {
	height:50px;
background: -moz-radial-gradient(center, ellipse cover,  #c6c6c6 18%, #ffffff 76%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(18%,#c6c6c6), color-stop(76%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  #c6c6c6 18%,#ffffff 76%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  #c6c6c6 18%,#ffffff 76%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  #c6c6c6 18%,#ffffff 76%); /* IE10+ */
background: radial-gradient(center, ellipse cover,  #c6c6c6 18%,#ffffff 76%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c6c6c6', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.clock {
display: block;
width: 405px;
height: 405px;
border:3px solid #3F1B05;
background: #8c4f39; /* Old browsers */
background: -moz-linear-gradient(top,  #8c4f39 0%, #541f06 51%, #8c4f39 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8c4f39), color-stop(51%,#541f06), color-stop(100%,#8c4f39)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #8c4f39 0%,#541f06 51%,#8c4f39 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #8c4f39 0%,#541f06 51%,#8c4f39 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #8c4f39 0%,#541f06 51%,#8c4f39 100%); /* IE10+ */
background: linear-gradient(top,  #8c4f39 0%,#541f06 51%,#8c4f39 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8c4f39', endColorstr='#8c4f39',GradientType=0 ); /* IE6-9 */
-moz-border-radius: 223px;
-webkit-border-radius: 223px;
border-radius: 223px;
padding: 20px;
position:relative;
}

#centerPoint{
	width: 24px;
	height: 24px;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
	background-color: black;
	position: absolute;
	left: 210px;
	top: 208px;
}

.clockhighlight1 {
display: block;
width: 363px;
height: 363px;
background: #541f06; /* Old browsers */
background: -moz-linear-gradient(top,  #541f06 0%, #6b2c08 50%, #541f06 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#541f06), color-stop(50%,#6b2c08), color-stop(100%,#541f06)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #541f06 0%,#6b2c08 50%,#541f06 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #541f06 0%,#6b2c08 50%,#541f06 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #541f06 0%,#6b2c08 50%,#541f06 100%); /* IE10+ */
background: linear-gradient(top,  #541f06 0%,#6b2c08 50%,#541f06 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#541f06', endColorstr='#541f06',GradientType=0 ); /* IE6-9 */
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
border:6px solid #8c4f39;
padding: 16px;
}

.clockface {
display: block;
width: 340px;
height: 340px;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #efefef 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efefef)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#efefef 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#efefef 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#efefef 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%,#efefef 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efefef',GradientType=0 ); /* IE6-9 */
-webkit-border-radius: 180px;
-moz-border-radius: 180px;
border-radius: 180px;
border:10px solid #8e8e8e;
}

.numbers {
		position: absolute;
		display:block;
		font-family: Georgia, "Times New Roman", Times, serif;
		font-size:32px;
}

#numberone {
	top: 85px;
right: 150px;
}

#numbertwo {
	top: 135px;
	right: 100px;
}


#numberthree {
	top: 200px;
	right: 85px;
}

#numberfour {
	top: 265px;
right: 100px;
}

#numberfive {
	top: 310px;
right: 150px;
}

#numbersix {
top: 330px;
right: 215px;
}

#numbereleven {
	top: 85px;
left: 150px;
}

#numberten {
	top: 135px;
left: 100px;
}

#numbereight {
	top: 265px;
left: 100px;
}

#numberseven {
	top: 310px;
left: 150px;
}

#numbernine {
	top: 200px;
	left: 85px;
}

#numbertwelve {
	top: 70px;
	right: 208px;
}

.minutes {
		position: absolute;
		width: 3px;
		height: 15px;
		top: 53px;
		left: 220px;
		background: #8e8e8e;
		-webkit-transform-origin: 50% 170px;
		-moz-transform-origin: 50% 170px;
}

.fiveminutes {
		position: absolute;
		width: 3px;
		height: 25px;
		top: 53px;
		left: 220px;
		background: #000;
		-webkit-transform-origin: 50% 170px;
		-moz-transform-origin: 50% 170px;
}

#one {
	-webkit-transform: rotate(6deg);
	-moz-transform: rotate(6deg);
}
#two {
	-webkit-transform: rotate(12deg);
	-moz-transform: rotate(12deg);
}
#three {
	-webkit-transform: rotate(18deg);
	-moz-transform: rotate(18deg);
}
#four {
	-webkit-transform: rotate(24deg);
	-moz-transform: rotate(24deg);
}

#five {
	-webkit-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
}

#six {
	-webkit-transform: rotate(36deg);
	-moz-transform: rotate(36deg);
}
#seven {
	-webkit-transform: rotate(42deg);
	-moz-transform: rotate(42deg);
}
#eight {
	-webkit-transform: rotate(48deg);
	-moz-transform: rotate(48deg);
}
#nine {
	-webkit-transform: rotate(54deg);
	-moz-transform: rotate(54deg);
}

#ten {
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
}

#eleven {
	-webkit-transform: rotate(66deg);
	-moz-transform: rotate(66deg);
}
#twelve {
	-webkit-transform: rotate(72deg);
	-moz-transform: rotate(72deg);
}
#thirteen {
	-webkit-transform: rotate(78deg);
	-moz-transform: rotate(78deg);
}
#fourteen {
	-webkit-transform: rotate(84deg);
	-moz-transform: rotate(84deg);
}

#fifteen {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
}

#sixteen {
	-webkit-transform: rotate(96deg);
	-moz-transform: rotate(96deg);
}
#seventeen {
	-webkit-transform: rotate(102deg);
	-moz-transform: rotate(102deg);
}
#eighteen {
	-webkit-transform: rotate(108deg);
	-moz-transform: rotate(108deg);
}
#nineteen {
	-webkit-transform: rotate(114deg);
	-moz-transform: rotate(114deg);
}

#twenty {
	-webkit-transform: rotate(120deg);
	-moz-transform: rotate(120deg);
}

#twentyone {
	-webkit-transform: rotate(126deg);
	-moz-transform: rotate(126deg);
}
#twentytwo {
	-webkit-transform: rotate(132deg);
	-moz-transform: rotate(132deg);
}
#twentythree {
	-webkit-transform: rotate(138deg);
	-moz-transform: rotate(138deg);
}
#twentyfour {
	-webkit-transform: rotate(144deg);
	-moz-transform: rotate(144deg);
}

#twentyfive {
	-webkit-transform: rotate(150deg);
	-moz-transform: rotate(150deg);
}

#twentysix {
	-webkit-transform: rotate(156deg);
	-moz-transform: rotate(156deg);
}
#twentyseven {
	-webkit-transform: rotate(162deg);
	-moz-transform: rotate(162deg);
}
#twentyeight {
	-webkit-transform: rotate(168deg);
	-moz-transform: rotate(168deg);
}
#twentynine {
	-webkit-transform: rotate(174deg);
	-moz-transform: rotate(174deg);
}

#thirty {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
}

#thirtyone {
	-webkit-transform: rotate(186deg);
	-moz-transform: rotate(186deg);
}
#thirtytwo {
	-webkit-transform: rotate(192deg);
	-moz-transform: rotate(192deg);
}
#thirtythree {
	-webkit-transform: rotate(198deg);
	-moz-transform: rotate(198deg);
}

#thirtyfour {
	-webkit-transform: rotate(204deg);
	-moz-transform: rotate(204deg);
}

#thirtyfive {
	-webkit-transform: rotate(210deg);
	-moz-transform: rotate(210deg);
}
#thirtysix {
	-webkit-transform: rotate(216deg);
	-moz-transform: rotate(216deg);
}
#thirtyseven {
	-webkit-transform: rotate(222deg);
	-moz-transform: rotate(222deg);
}
#thirtyeight {
	-webkit-transform: rotate(228deg);
	-moz-transform: rotate(228deg);
}
#thirtynine {
	-webkit-transform: rotate(234deg);
	-moz-transform: rotate(234deg);
}
#fourty {
	-webkit-transform: rotate(240deg);
	-moz-transform: rotate(240deg);
}

#fourtyone {
	-webkit-transform: rotate(246deg);
	-moz-transform: rotate(246deg);
}

#fourtytwo {
	-webkit-transform: rotate(252deg);
	-moz-transform: rotate(252deg);
}
#fourtythree {
	-webkit-transform: rotate(258deg);
	-moz-transform: rotate(258deg);
}

#fourtyfour {
	-webkit-transform: rotate(264deg);
	-moz-transform: rotate(264deg);
}

#fourtyfive {
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
}

#fourtysix {
	-webkit-transform: rotate(276deg);
	-moz-transform: rotate(276deg);
}
#fourtyseven {
	-webkit-transform: rotate(282deg);
	-moz-transform: rotate(282deg);
}
#fourtyeight {
	-webkit-transform: rotate(288deg);
	-moz-transform: rotate(288deg);
}
#fourtynine {
	-webkit-transform: rotate(294deg);
	-moz-transform: rotate(294deg);
}

#fifty {
	-webkit-transform: rotate(300deg);
	-moz-transform: rotate(300deg);
}

#fiftyone {
	-webkit-transform: rotate(306deg);
	-moz-transform: rotate(306deg);
}

#fiftytwo {
	-webkit-transform: rotate(312deg);
	-moz-transform: rotate(312deg);
}
#fiftythree {
	-webkit-transform: rotate(318deg);
	-moz-transform: rotate(318deg);
}

#fiftyfour {
	-webkit-transform: rotate(324deg);
	-moz-transform: rotate(324deg);
}

#fiftyfive {
	-webkit-transform: rotate(330deg);
	-moz-transform: rotate(330deg);
}

#fiftysix {
	-webkit-transform: rotate(336deg);
	-moz-transform: rotate(336deg);
}
#fiftyseven {
	-webkit-transform: rotate(342deg);
	-moz-transform: rotate(342deg);
}
#fiftyeight {
	-webkit-transform: rotate(348deg);
	-moz-transform: rotate(348deg);
}
#fiftynine {
	-webkit-transform: rotate(354deg);
	-moz-transform: rotate(354deg);
}

#sixty {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
}

#minhand {
		position: absolute;
		width: 8px;
		height: 160px;
		top: 90px;
		left: 218px;
		-webkit-border-radius: 7px;
		-moz-border-radius: 5px;
		border-radius: 7px;
		background: black;
		-webkit-transform-origin: 50% 131px;
		-moz-transform-origin: 50% 131px;
}

#hourhand {
		position: absolute;
		width: 8px;
		height: 130px;
		top: 120px;
		left: 218px;
		-webkit-border-radius: 7px;
		-moz-border-radius: 5px;
		border-radius: 7px;
		background: #000;
		-webkit-transform-origin: 50% 100px;
		-moz-transform-origin: 50% 100px;
}

#sechand {
		position: absolute;
		width: 4px;
		height: 160px;
		top: 90px;
		left: 220px;
		-webkit-border-radius: 7px;
		-moz-border-radius: 5px;
		border-radius: 7px;
		background: red;
		-webkit-transform-origin: 50% 131px;
		-moz-transform-origin: 50% 131px;
}
</style>
</head>
<body>
  <div id="wrapper">
    <div class="clock">
    	<div class="clockhighlight1">
      	<div class="clockface">
        <div class="fiveminutes" id="sixty"></div>
        <div class="minutes" id="one"></div>
        <div class="minutes" id="two"></div>
        <div class="minutes" id="three"></div>
        <div class="minutes" id="four"></div>
        <div class="fiveminutes" id="five"></div>
        <div class="minutes" id="six"></div>
        <div class="minutes" id="seven"></div>
        <div class="minutes" id="eight"></div>
        <div class="minutes" id="nine"></div>
        <div class="fiveminutes" id="ten"></div>
       <div class="minutes" id="eleven"></div>
        <div class="minutes" id="twelve"></div>
        <div class="minutes" id="thirteen"></div>
        <div class="minutes" id="fourteen"></div>
        <div class="fiveminutes" id="fifteen"></div>
        <div class="minutes" id="sixteen"></div>
        <div class="minutes" id="seventeen"></div>
        <div class="minutes" id="eighteen"></div>
        <div class="minutes" id="nineteen"></div>
        <div class="fiveminutes" id="twenty"></div>
        <div class="minutes" id="twentyone"></div>
        <div class="minutes" id="twentytwo"></div>
        <div class="minutes" id="twentythree"></div>
        <div class="minutes" id="twentyfour"></div>
        <div class="fiveminutes" id="twentyfive"></div>
        <div class="minutes" id="twentysix"></div>
        <div class="minutes" id="twentyseven"></div>
        <div class="minutes" id="twentyeight"></div>
        <div class="minutes" id="twentynine"></div>
        <div class="fiveminutes" id="thirty"></div>
        <div class="minutes" id="thirtyone"></div>
        <div class="minutes" id="thirtytwo"></div>
        <div class="minutes" id="thirtythree"></div>
        <div class="minutes" id="thirtyfour"></div>
        <div class="fiveminutes" id="thirtyfive"></div>
        <div class="minutes" id="thirtysix"></div>
        <div class="minutes" id="thirtyseven"></div>
        <div class="minutes" id="thirtyeight"></div>
        <div class="minutes" id="thirtynine"></div>
        <div class="fiveminutes" id="fourty"></div>
        <div class="minutes" id="fourtyone"></div>
        <div class="minutes" id="fourtytwo"></div>
        <div class="minutes" id="fourtythree"></div>
        <div class="minutes" id="fourtyfour"></div>
        <div class="fiveminutes" id="fourtyfive"></div>
        <div class="minutes" id="fourtysix"></div>
        <div class="minutes" id="fourtyseven"></div>
        <div class="minutes" id="fourtyeight"></div>
        <div class="minutes" id="fourtynine"></div>
        <div class="fiveminutes" id="fifty"></div>
        <div class="minutes" id="fiftyone"></div>
        <div class="minutes" id="fiftytwo"></div>
        <div class="minutes" id="fiftythree"></div>
        <div class="minutes" id="fiftyfour"></div>
        <div class="fiveminutes" id="fiftyfive"></div>
        <div class="minutes" id="fiftysix"></div>
        <div class="minutes" id="fiftyseven"></div>
        <div class="minutes" id="fiftyeight"></div>
        <div class="minutes" id="fiftynine"></div>
        <div class="numbers" id="numbertwelve">12</div>
        <div class="numbers" id="numberone">1</div>
        <div class="numbers" id="numbertwo">2</div>
        <div class="numbers" id="numberthree">3</div>
        <div class="numbers" id="numberfour">4</div>
        <div class="numbers" id="numberfive">5</div>
        <div class="numbers" id="numbersix">6</div>
        <div class="numbers" id="numberseven">7</div>
        <div class="numbers" id="numbereight">8</div>
        <div class="numbers" id="numbernine">9</div>
        <div class="numbers" id="numberten">10</div>
        <div class="numbers" id="numbereleven">11</div>
        <div id="hourhand"></div>
        <div id="sechand"></div>
      	<div id="minhand"></div>
        <div id="centerPoint"></div>
       </div>
    </div>
    </div>
  </div>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" language="javascript"></script>
  <script language="javascript">
	$(document).ready(function() {
     	var timer=setInterval("getTime()",1000);
});

		 function getTime() {
			var d = new Date();
			var hours = d.getHours();
			var minute = d.getMinutes();
			var seconds = d.getSeconds();	
			var hourRotate;
			var minRotate;
			var secRotate;
			
				hours = ((hours > 12) ? hours - 12 : hours);
				if (minute === 0){
					minRotate = 0;
				}else{
					minRotate = minute*6;
				}
				if (seconds === 0){
					secRotate = 0;
				}else{
					secRotate = seconds*6;
				}
				if (hours === 12){
					hourRotate = 0;
				}else{
					hourRotate = (hours*30) + (minute/2) ;
					
				}
			 //document.write( hourRotate + ":" + minRotate +  ":" + secRotate);
			 var srotate = "rotate(" + secRotate + "deg)";
      $("#sechand").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
			 var hrotate = "rotate(" + hourRotate + "deg)";
      $("#hourhand").css({"-moz-transform" : hrotate, "-webkit-transform" : hrotate});
			 var mrotate = "rotate(" + minRotate + "deg)";
      $("#minhand").css({"-moz-transform" : mrotate, "-webkit-transform" : mrotate});
		}
</script>
<font face="Tahoma"><a target="_blank" href="http://www.htmlbestcodes.com/"><span style="font-size: 8pt; text-decoration: none">HTML Best Codes</span></a></font>
</body>
</html><a target='_blank' href='www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best 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!

K

Comments

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

0 / 300
TRENDING POST
1
Neomorphism Button with Hover Effect
2
Vanishing Spinning Ball Loader
3
Yet Another Circle Spinning Loader
4
Oval Ticker Spinner Loader
5
Eclipse Spinner Loader
VISITORS
Online Users: 12
Recent Members: Jenisha, Mr Joseph Charles, Nikhil 999+, bishalthakur
advertisement 2