Clock using Raphael
HTML
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
JavaScript
var p = Raphael(0,0,360,360);
p.rect(0,0,360,360);
//variables
var seconds = 0,minutes = 0 , hours = 0;
var iSeconds = 0, counterSeconds = 0, xSeconds=180,ySeconds=0;
var increaseSeconds = 6 * Math.PI / 180;
var iMinutes = 0, counterMinutes = 0, xMinutes=180,yMinutes=0;
var increaseMinutes = 6 * Math.PI /180;
var iHours = 0, counterHours = 0, xHours=180,yHours=0;
var increaseHours = 6 * Math.PI /180;
var secondsPath = p.path("M10,180 L18,0");
var minutesPath = p.path("M10,180 L0,0");
var hoursPath = p.path("M10,10 L80,0");
clockDesign();
getAndSetCurrentTime();
function clockDesign(){
var iClockHours = 1, counterClockHours = 0, xClockHours=180,yClockHours=0;
var increaseClockHours = 30 * Math.PI /180;
var hours = ["12", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"];
secondsPath.attr({
fill: "red",
stroke: "rgb(200,100,77)",
"stroke-width": 1
});
minutesPath.attr({
fill: "red",
stroke: "rgb(200,200,77)",
"stroke-width": 3
});
hoursPath.attr({
fill: "red",
stroke: "rgb(100,100,77)",
"stroke-width": 7
});
jQuery.each( hours, function( i, val ) {
xClockHours = 180 + Math.sin(counterClockHours)* 140;
yClockHours = 180 - Math.cos(counterClockHours)* 140;
counterClockHours += increaseClockHours;
p.text(xClockHours, yClockHours, val )
.attr({
"font-family" : "Verdana",
"font-size" : 10,
"fill" : "Red"
});
});
}
function getAndSetCurrentTime(){
var dt = new Date();
var time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();
counterSeconds = dt.getSeconds() *...