Membuat jam analog menggunakan CSS

Membuat jam analog menggunakan CSS

  12 January    Andika

---

Ini lah sebaris kode di mana kode ini mampu membuat sebuah jam analog yang bisa di gunakan untuk Website atau Blog.

Untuk membuat jam analog seperti ini kita perlu memadukan antara Jquery, CSS, Java Script dan tentu saja HTML.

Tampilan jam analog yang di hasil kan adalah jam analog yang membulat. Ini tentu saja tak lepas dari peranan border-radius. Sementara untuk efek membayang di seputar permukaan jam, box-shadow:inset lah yang mengambil peranan. Untuk jarumnya sendiri di atur dalam ukuran tertentu agar jarum jam, jarum menit dan jarum detik terlihat dan dapat dibedakan. Dan tentu saja warna jarumnya juga di buat berbeda.

Berikut Demonya




Langsung saja,

Jquery

Jika sudah menggunakan Jquery, langkah ini bisa dilewati. Jika belum, kamu dapat menggunakannya melalui kode yang ada di bawah ini.

<script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript">

CSS

.outer_face {
    position:relative;
    width:240px;
    margin:13% auto;
    height:240px;
    border-radius:240px;
    background:white;
    box-shadow:inset 0 0 10px #4169E1;
    border:0 solid gray;
}

.outer_face::before,
.outer_face::after,
.outer_face .marker {
    content:"";
    position:absolute;
    width:8px;
    height:100%;
    background:black;
    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:white;
    -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:black;
    position:absolute;
    top:50%;
    left:50%;
    box-shadow:0 0 30px blue;
}

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

.hand,
.hand.hour {
    position:absolute;
    width:6px;
    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:4px;
    margin-left:-2.5px;
}

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

HTML

<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>

Java Script

<script type="text/javascript">
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>

Hasilnya sudah saya uji coba dan mampu bekerja dengan baik pada browser Mozilla Firefox, Internet Explorer 11 dan Google Chrome!