Demofor clock interface.
First we’ll need some graphics for our clock interface. We have a face and three hands.
All the moving parts are sliced in Photoshop at 600px high and 30px wide and are positioned vertically dead center as by default the rotate property ‘rotates’ from the center of the element.
You can use ‘transform-origin’ to set a rotate point if you want.
Note: we can use our axure widget shape.
Insert below script in to your header section as a plugin(Axshare)
<script type=“text/javascript”>
$(document).ready(function() {
setInterval( function() {
var seconds = new Date().getSeconds();
var sdegree = seconds * 6;
var srotate = “rotate(” + sdegree + “deg)”;
$(“div[data-label=‘second’]”).css({"-moz-transform" : srotate, “-webkit-transform” : srotate});
}, 1000 );
setInterval( function() {
var hours = new Date().getHours();
var mins = new Date().getMinutes();
var hdegree = hours * 30 + (mins / 2);
var hrotate = "rotate(" + hdegree + "deg)";
$("div[data-label='hour']").css({"-moz-transform" : hrotate, "-webkit-transform" : hrotate});
}, 1000 );
setInterval( function() {
var mins = new Date().getMinutes();
var mdegree = mins * 6;
var mrotate = "rotate(" + mdegree + "deg)";
$("div[data-label='minute']").css({"-moz-transform" : mrotate, "-webkit-transform" : mrotate});
}, 1000 );
});
</script>
Thanks,
Vikram
clock - updated.rp (110 KB)