Jam Analog Menggunakan Css3 dan Jquery

Hari ini kita akan melihat contoh hebat lain dari jam analog menggunakan kekuatan CSS3 dan jQuery perpustakaan paling canggih. Kami akan mulai dengan membuat jam dinding analog yang sangat keren dan realistis dengan properti CSS3 murni, dan menambahkan sedikit rotasi halus untuk memberikan efek putar pada jarum jam.

LIVE DEMO

HTML

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

CSS

Sekarang, saatnya bermain dengan beberapa properti css3 keren seperti transisi, transformasi dan pelonggaran css.

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

jQuery atau Java-Script pertama - tama kita akan memasukkan pustaka jQuery paling canggih.Setelah menambahkan pustaka yang kuat ini kita akan menggunakan beberapa baris kode java-script khusus untuk memutar tiga tangan jam yaitu Jam, Menit dan Kedua. Itu dia.

 fungsi Clock_dg (prop) { 
    var angle = 360/60, 
        date = Date baru (); 
        var h = date.getHours (); 
        if (h> 12) { 
            h = h - 12; 
        } 
        jam = h; 
        menit = date.getMinutes (), 
        kedua = date.getSeconds (), 
        hourAngle = (360/12) * jam + (360 / (12 * 60)) * menit; 
        $ ('# minute') [0] .style [prop] = 'rotate (' + angle * menit + 'deg)'; 
        $ ('# second') [0] .style [prop] = 'rotate (' + angle * second + 'deg)'; 
        $ ('# hour') [0] .style [prop] = 'rotate (' + hourAngle + 'deg)'; 
} 
$ (function () {       
    var props = '
        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]; 
            istirahat; 
        } 
    } 
    setInterval (function () { 
        Clock_dg (prop) 
    }, 100); 
});

KOMPATIBILITAS BROWSER: Seperti yang kami sebutkan sebelumnya, teknologi ini dikembangkan dengan jQuery sehingga didukung oleh hampir semua browser utama. ada kemungkinan bahwa sintaks dan perilaku dapat diubah di versi browser masa depan. Untuk hari ini, didukung oleh browser berikutnya:

• Chrome 15+                                  
• Firefox 9+
• Safari 4+
• IE9 +
• Opera 12+