Tutorial Membuat Widget Jam Analog dengan HTML

Kali ini saya akan membagikan sedikit tutorial untuk membuat jam analog dengan CSS, HTMl, dan JQuery.


Pertama copy tag html berikut untuk menambahkan widget HTML di blog/website anda

<div id="clock">
    <div id="hour" style="transform: rotate(334.5deg);"><img src="http://demo.web3designs.com/images/hourhand.png"></div>
    <div id="minute" style="transform: rotate(54deg);"><img src="http://demo.web3designs.com/images/minhand.png"></div>
    <div id="second" style="transform: rotate(108deg);"><img src="http://demo.web3designs.com/images/sechand.png"></div>
</div>

Kedua tambahkan css berikut ini di directory file css yang ada di website/blog anda

#clock {
background-image: url("http://demo.web3designs.com/images/clockBg.png");
height: 200px;
position: relative;
width: 200px
}
#clock div {
position: absolute;
left:50%
}
#clock img[src*="second"] {
transition: transform 600000s linear 0s;
}
#clock:target img[src*="second"] {
transform: rotate(3600000deg);
}
#clock img[src*="minute"] {
transition: transform 360000s linear 0s;
}
#clock:target img[src*="minute"] {
transform: rotate(36000deg);
}
#clock img[src*="hour"] {
transition: transform 216000s linear 0s;
}
#clock:target img[src*="hour"] {
transform: rotate(360deg);
}

Ketiga tambahkan script jquery berikut di jquery file web anda, scirpt ini berfungsi untuk memutar/play jam pada widget blog/website anda

function Clock_dg(prop) {
    var angle = 360/60,
        date = new Date();
        var h = date.getHours();
        if(h > 12) {
            h = h - 12;
        }
        hour = h;
        minute = date.getMinutes(),
        second = date.getSeconds(),
        hourAngle = (360/12) * hour + (360/(12*60)) * minute;
        $('#minute')[0].style[prop] = 'rotate('+angle * minute+'deg)';
        $('#second')[0].style[prop] = 'rotate('+angle * second+'deg)';
        $('#hour')[0].style[prop] = 'rotate('+hourAngle+'deg)';
}
$(function(){      
    var props = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '),
        prop,
        el = document.createElement('div');
    for(var i = 0, l = props.length; i < l; i++) {
        if(typeof el.style[props[i]] !== "undefined") {
            prop = props[i];
            break;
        }
    }
    setInterval(function(){
        Clock_dg(prop)
    },100);
});

Selesai sekarang lihat apakah jalan atau tidak widget jam di blog/website anda. semoga berhasil icon biggrin Membuat Widget Jam Analog Dengan CSS3, HTMl, dan JQuery

DEMO : Klik Disini