GADGETS FOR BLOGS

Facebook Google plus YouTube Pinterest Tumblr Delicius DIIGO Start.me NETVIBES feedburner

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

ANALOG CLOCK
ΑΝΑΛΟΓΙΚΟ ΡΟΛΟΪ ΓΙΑ ΤΟ 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>

Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου

► Γράψτε το σχόλιό σας στο λευκό κουτί και αν θέλετε να ειδοποιηθήτε για την απάντηση τσεκάρετε το κουτάκι "Να λαμβάνω ειδοποιήσεις".