ΑΝΑΛΟΓΙΚΟ ΡΟΛΟΪ ΓΙΑ ΤΟ BLOG ΣΑΣ

ΑΝΑΛΟΓΙΚΟ ΡΟΛΟΪ ΓΙΑ ΤΟ BLOG ΣΑΣ

Με τον παρακάτω κώδικα μπορείτε να βάλετε ένα αναλογικό ρολόϊ στο blog σας. Μπάινει απλά σαν gadget και οι διαστάσεις του ρυθμίζονται στην 2^η γραμμή του κώδικα εκεί που γράφει width:200px; height:200px; Τα χρώματα επίσης μπορούν να αλλάξουν εάν αλλάξετε τους 6ψήφιους κωδικούς που έχουν μπροστά τους το σύμβολο της δίεσης #.

<style>

.outer_face {position:relative;width:200px;height:200px;border-radius:200px;background:#FFFFFF;box-shadow:inset 0 0 10px gray;border: 0 solid gray;}

.outer_face::before, .outer_face::after, .outer_face .marker {

content: "";position: absolute;width:8px;height:100%;background:#000000;z-index:0;left:50%; margin-left:-4px;top:0}

.outer_face::after {-moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg)}

.outer_face .marker {background:gray;width:6px;margin-left:-3px}

.outer_face .marker.oneseven {-moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg)}

.outer_face .marker.twoeight {-moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -webkit-transform: rotate(60deg);    transform: rotate(60deg)}

.outer_face .marker.fourten {-moz-transform: rotate(120deg); -ms-transform: rotate(120deg); -webkit-transform: rotate(120deg); transform: rotate(120deg)}

.outer_face .marker.fiveeleven {-moz-transform: rotate(150deg); -ms-transform: rotate(150deg); -webkit-transform: rotate(150deg); transform: rotate(150deg)}

.inner_face {position: relative;width: 88%;height: 88%;background:#FFFFFF; -moz-border-radius: 1000px; -webkit-border-radius: 1000px; border-radius: 1000px; z-index: 1000; left: 6%; top: 6%}

.inner_face::before {content: "";width:18px;height:18px;border-radius:18px;margin-left:-9px;margin-top:-9px;background:#000000;position:absolute;top:50%;left:50%;box-shadow: 0 0 30px blue;}

.inner_face::after {content: "QUARTZ";position: absolute;width: 100%;font: normal 0.8em Arial;color:gray;text-align:center;top:85%}

.hand, .hand.hour {position: absolute;width:4px;height:30%;top:20%;left:50%;margin-left:-2px;background:black;

-moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); -moz-transform-origin: bottom;  -ms-transform-origin: bottom;  -webkit-transform-origin: bottom; transform-origin: bottom; z-index: -1; -moz-box-shadow: 0 0 3px gray; -webkit-box-shadow: 0 0 3px gray; box-shadow: 0 0 3px gray}

.hand.minute {height:45%;top: 5%;width:5px;margin-left:-2.5px;}

.hand.second {height: 50%;width: 2px;margin-left:-1px;top:0;background:red}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<div id="liveclock" class="outer_face">

<div class="marker oneseven"></div>

<div class="marker twoeight"></div>

<div class="marker fourten"></div>

<div class="marker fiveeleven"></div>

<div class="inner_face">

<div class="hand hour"></div>

<div class="hand minute"></div>

<div class="hand second"></div>

</div></div>

<script>

var $hands = $('#liveclock div.hand')

window.requestAnimationFrame = window.requestAnimationFrame

|| window.mozRequestAnimationFrame

|| window.webkitRequestAnimationFrame

|| window.msRequestAnimationFrame

|| function(f){setTimeout(f, 60)}

function updateclock(){

var curdate = new Date()

var hour_as_degree = ( curdate.getHours() + curdate.getMinutes()/60 ) / 12 * 360

var minute_as_degree = curdate.getMinutes() / 60 * 360

var second_as_degree = ( curdate.getSeconds() + curdate.getMilliseconds()/1000 ) /60 * 360

$hands.filter('.hour').css({transform: 'rotate(' + hour_as_degree + 'deg)' })

$hands.filter('.minute').css({transform: 'rotate(' + minute_as_degree + 'deg)' })

$hands.filter('.second').css({transform: 'rotate(' + second_as_degree + 'deg)' })

requestAnimationFrame(updateclock)}

requestAnimationFrame(updateclock)

</script>