• SANTORINI

    SANTORINI

  • SANTORINI

    SANTORINI

  • ZAKYNTHOS

    ZAKYNTHOS

  • LEYKADA

    LEYKADA

  • KEFALLONIA

    KEFALLONIA

  • KERKYRA

    KERKYRA

  • RODOS

    RODOS

GADGETS FOR BLOGS

YouTube GITHUB glitch.com JSBIN Start.me JSFIDDLE CODEPLY PASTEBIN.COM Repl.it CODEPEN CODEPEN

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

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

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

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

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.