Papermashup

Subscribe


Tweets


"RT @bethgordon: .@Tesco Please rethink archaic 'Approved by Mums'. Pretty sure it's not just mothers who make childcare decisions. https://…"

@ashleyford 4 days ago

"Is there ever a time that @DFS doesn't have a sale on?"

@ashleyford 1 week ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Papermashup

Mini Javascript Clock with jQuery

A simple CSS and Javascript method for displaying times...

AshleyAshley

I was working on an interesting project where I thought a mini javascript clock would be awesome to display a user inputed time. I’m yet to fully implement it into the project at the time of writing but I wanted to share it.

The HTML

Simply setup the .clock div with our hands inside. You set the time for the clock using the data-hour and data-minute.



<div class="clock" data-hour="9" data-minute="30">
<div class="hour"></div>
<div class="minute"></div>
</div>

The JavaScript

Be sure to include jQuery. The basic principle is that we target each .clock div (if you have multiple clocks on the page) and get each data-attribute for the hour and minutes and simply rotate the .hour and .minute div inside each clock based on the time given.



function clock() {
$(".clock").each(function() {
var a = $(this).data('minute') * 6,
o = $(this).data('hour') % 12 / 12 * 360 + (a / 12);
$(this).find('.hour').css("transform", "rotate(" + o + "deg)");
$(this).find('.minute').css("transform", "rotate(" + a + "deg)");
});
}

clock();

The CSS



.clock {
border: 2px solid #02dab5;
border-radius: 100%;
display: block;
height: 40px;
width: 40px;
position: relative;
margin:10px;
}
.clock .hour {
background: #02dab5;
height: 0;
left: 50%;
position: absolute;
top: 50%;
width: 0;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
margin: -10px -1px 0;
padding: 10px 1px 0;
}
.clock .minute {
background: #02dab5;
height: 0;
left: 50%;
position: absolute;
top: 50%;
width: 0;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
margin: -15px -1px 0;
padding: 15px 1px 0;
}

Demo Download

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 0
There are currently no comments.