4 edited body
source | link
3 Fixing the code
source | link
var h = document.getElementById('h');
var m = document.getElementById('m');
var s = document.getElementById('s');

setInterval(function () {
    refreshClock();
}, 1000);

function refreshClock() {
    var time = new Date;

    deg = time.getSeconds() * 6 - 90;
    s.style.webkitTransform = "transform:s.style.MozTransform rotate= s.style.msTransform = s.style.transform = "rotate(" + deg + "deg)";

    deg = time.getMinutes() * 6 - 90;
    m.style.webkitTransform = "transform:m.style.MozTransform rotate= m.style.msTransform = m.style.transform = "rotate(" + deg + "deg)";

    deg = time.getHours() % 12 * 30 - 90;
    h.style.webkitTransform = "transform:h.style.MozTransform rotate= h.style.msTransform = h.style.transform = "rotate(" + deg + "deg)";
}

window.onload = function () {
    refreshClock();
};
var h = document.getElementById('h');
var m = document.getElementById('m');
var s = document.getElementById('s');

setInterval(function () {
    refreshClock();
}, 1000);

function refreshClock() {
    var time = new Date;

    deg = time.getSeconds() * 6 - 90;
    s.style = "transform: rotate(" + deg + "deg)";

    deg = time.getMinutes() * 6 - 90;
    m.style = "transform: rotate(" + deg + "deg)";

    deg = time.getHours() % 12 * 30 - 90;
    h.style = "transform: rotate(" + deg + "deg)";
}

window.onload = function () {
    refreshClock();
};
var h = document.getElementById('h');
var m = document.getElementById('m');
var s = document.getElementById('s');

setInterval(function () {
    refreshClock();
}, 1000);

function refreshClock() {
    var time = new Date;

    deg = time.getSeconds() * 6 - 90;
    s.style.webkitTransform = s.style.MozTransform = s.style.msTransform = s.style.transform = "rotate(" + deg + "deg)";

    deg = time.getMinutes() * 6 - 90;
    m.style.webkitTransform = m.style.MozTransform = m.style.msTransform = m.style.transform = "rotate(" + deg + "deg)";

    deg = time.getHours() % 12 * 30 - 90;
    h.style.webkitTransform = h.style.MozTransform = h.style.msTransform = h.style.transform = "rotate(" + deg + "deg)";
}

window.onload = function () {
    refreshClock();
};
2 added 338 characters in body
source | link

Demo: http://jsfiddle.net/kelunik/Vuuq8/3/embedded/result/http://jsfiddle.net/kelunik/Vuuq8/5/embedded/result/

html, body {
    margin: 0;
    padding: 0;
    text-align: center;
}
#clock {
    width: 100px;100vmin;
    height: 100px;100vmin;
    border-radius: 50%;
    border: 2px1vmin solid #333;
    position: relative;
    box-shadow: 0 0 5vmin rgba(0, 0, 0, .3);
    box-sizing: border-box;
    margin: 0 auto;
    transform: scale(.8);
}
#h, #m, #s {
    top: 50px;50vmin;
    left: 50px;50vmin;
    position: absolute;
}
#h:before, #m:before, #s:before {
    content:"";
    position: absolute;
    left: 100%;
    height: 0;
    box-shadow: 0 0 2vmin rgba(0,0,0,.2);
    border-radius: 50%;
}
#h:before {
    width: 20px;25vmin;
}
#m:before {
    width: 35px;35vmin;
}
#s:before {
    width: 45px;45vmin;
}
#h:before {
    background: black;
    height: 4px;4vmin;
    transform: translateY(-2px2vmin);
}
#m:before {
    background: black;
    height: 2px;2vmin;
    transform: translateY(-1px1vmin);
}
#s:before {
    background: red;
    height: 2px;2vmin;
    transform: translateY(-1px1vmin);
}

Demo: http://jsfiddle.net/kelunik/Vuuq8/3/embedded/result/

#clock {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid #333;
    position: relative;
}
#h, #m, #s {
    top: 50px;
    left: 50px;
    position: absolute;
}
#h:before, #m:before, #s:before {
    content:"";
    position: absolute;
    left: 100%;
    height: 0;
}
#h:before {
    width: 20px;
}
#m:before {
    width: 35px;
}
#s:before {
    width: 45px;
}
#h:before {
    background: black;
    height: 4px;
    transform: translateY(-2px);
}
#m:before {
    background: black;
    height: 2px;
    transform: translateY(-1px);
}
#s:before {
    background: red;
    height: 2px;
    transform: translateY(-1px);
}

Demo: http://jsfiddle.net/kelunik/Vuuq8/5/embedded/result/

html, body {
    margin: 0;
    padding: 0;
    text-align: center;
}
#clock {
    width: 100vmin;
    height: 100vmin;
    border-radius: 50%;
    border: 1vmin solid #333;
    position: relative;
    box-shadow: 0 0 5vmin rgba(0, 0, 0, .3);
    box-sizing: border-box;
    margin: 0 auto;
    transform: scale(.8);
}
#h, #m, #s {
    top: 50vmin;
    left: 50vmin;
    position: absolute;
}
#h:before, #m:before, #s:before {
    content:"";
    position: absolute;
    left: 100%;
    height: 0;
    box-shadow: 0 0 2vmin rgba(0,0,0,.2);
    border-radius: 50%;
}
#h:before {
    width: 25vmin;
}
#m:before {
    width: 35vmin;
}
#s:before {
    width: 45vmin;
}
#h:before {
    background: black;
    height: 4vmin;
    transform: translateY(-2vmin);
}
#m:before {
    background: black;
    height: 2vmin;
    transform: translateY(-1vmin);
}
#s:before {
    background: red;
    height: 2vmin;
    transform: translateY(-1vmin);
}
1
source | link