Cara Menampilkan Jam diblog dengan Menggunakan HTML

Cara Menampilkan Jam, Cara Menampilkan Jam diblog dengan Menggunakan HTML, Membuat jam pada blog, Cara Memasang Jam di Blog, membuat jam tanpa program

Cara Menampilkan Jam diblog dengan Menggunakan HTML - Tutorial Kali ini saya ingin share Trik atau Cara Membuat Jam Analog Menggunakan CSS, JS dan HTML. Proses Pembacaan Detik, Menit dan Jam akan Menyesuaikan dengan Perangkat yang kita gunakan. Trik Menampilkan Jam di blog yang akan dibahas kalin ini sangat mudah diikuti dan di modifikasi. Silahkan pelajari Tutorialnya ya Bos...

HTML

<ul id="BGjam">
  <li id="detik"></li>
  <li id="jam"></li>
  <li id="menit"></li>
</ul> 

CSS

#detik,
#menit,
#jam {
   position: absolute;
   width: 20px;
   height: 600px;
   top: -105px;
   left: 195px;
}

* {
   margin: 0;
   padding: 0;
}

#detik {
   background: url(http://3.bp.blogspot.com/-SInQTJ2xhv8/VB488ehZYKI/AAAAAAAABcM/nrbqsmzsKFg/s1600/sec.png);
   z-index: 3;
}

#BGjam {
   position: relative;
   width: 400px;
   height: 400px;
   margin: 20px auto 0 auto;
   background: url(https://4.bp.blogspot.com/-9knRRassR2c/V0a2cGJuJEI/AAAAAAAAAP0/kkg1TUrrr_wFL_0nWgIhz5r_akOvLWAIwCLcB/s320/cara%2Bmembuat%2Bjam.png);
   background-size: 100% 100%;
   list-style: none;
}

#menit {
   background: url(http://4.bp.blogspot.com/-bg0CFOUUXsE/VB487dXehGI/AAAAAAAABcA/2R-u1ySg73w/s1600/min.png);
   z-index: 2;
}

#jam {
   background: url(http://3.bp.blogspot.com/--1e6yy5qSN4/VB487pRFbZI/AAAAAAAABcE/hnj3pi5g4TQ/s1600/hour.png);
   z-index: 1;
}

jQuery

Pastikan jQuery Library sudah terpasang dengan benar.

$(window).load(function() {

    setInterval(function() {
        var seconds = new Date()
            .getSeconds();
        var sdegree = seconds * 6;
        var srotate = "rotate(" + sdegree + "deg)";

        $("#detik")
            .css({
                "-moz-transform": srotate,
                "-webkit-transform": srotate
            });

    }, 1000);


    setInterval(function() {
        var hours = new Date()
            .getHours();
        var mins = new Date()
            .getMinutes();
        var hdegree = hours * 30 + (mins / 2);
        var hrotate = "rotate(" + hdegree + "deg)";

        $("#jam")
            .css({
                "-moz-transform": hrotate,
                "-webkit-transform": hrotate
            });

    }, 1000);


    setInterval(function() {
        var mins = new Date()
            .getMinutes();
        var mdegree = mins * 6;
        var mrotate = "rotate(" + mdegree + "deg)";

        $("#menit").css({
            "-moz-transform": mrotate,
            "-webkit-transform": mrotate
        });

    }, 1000);

});