No credit to me for this code, I found it somewhere on the net but forgot where, so my apologies to whoever came up with it.
First I create a javascript file I called it clock.js and put it in the js folder.
Here's the code
Code: Select all
function startClock(prop) {
var angle = 360/60,
date = new Date();
var h = date.getHours();
if(h > 12) {
h = h - 12;
}
hour = h;
minute = date.getMinutes(),
second = date.getSeconds(),
hourAngle = (360/12) * hour + (360/(12*60)) * minute;
$('#minute')[0].style[prop] = 'rotate('+angle * minute+'deg)';
$('#second')[0].style[prop] = 'rotate('+angle * second+'deg)';
$('#hour')[0].style[prop] = 'rotate('+hourAngle+'deg)';
}
$(function(){
var props = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '),
prop,
el = document.createElement('div');
for(var i = 0, l = props.length; i < l; i++) {
if(typeof el.style[props[i]] !== "undefined") {
prop = props[i];
break;
}
}
setInterval(function(){
startClock(prop)
},100);
});
Code: Select all
/*clock*/
.start {
font-size: 2em;
font-weight: bold;
margin: 5em;
text-align: center;
}
#clock {
background-image: url("img/clockFace.png");
top: 20px;
right: 20px;
height: 150px;
position: fixed;
width: 150px;
}
#clock div {
position: absolute;
}
#clock img[src*="second"] {
-webkit-transition: transform 600000s linear 0s;
}
#clock:target img[src*="second"] {
-webkit-transform: rotate(3600000deg);
}
#clock img[src*="minute"] {
-webkit-transition: transform 360000s linear 0s;
}
#clock:target img[src*="minute"] {
-webkit-transform: rotate(36000deg);
}
#clock img[src*="hour"] {
-webkit-transition: transform 216000s linear 0s;
}
#clock:target img[src*="hour"] {
-webkit-transform: rotate(360deg);
}
Code: Select all
<div id="clock">
<div id="hour" style="transform: rotate(334.5deg);"><img src="img/hourHand.png"></div>
<div id="minute" style="transform: rotate(54deg);"><img src="img/minuteHand.png"></div>
<div id="second" style="transform: rotate(108deg);"><img src="img/secondHand.png"></div>
</div>
and change the directory to get them.
Also in the sript part in the html where it says this"
Code: Select all
// Called by MDM to update the clock
function set_clock(message) {
document.getElementById("clock").innerHTML = message;
}
Code: Select all
document.getElementById("clock").innerHTML = message;
Code: Select all
document.getElementById("clock").innerHTML = message;
Position on screen is in the theme.css part under #clock so is the size of the image.
Happy coding
This is a pretty simple code that can also be forked to make a desklet analog clock if and when it comes down the pipeline.
Sam