tRikSonic

Cara Menampilkan Jam diblog dengan Menggunakan HTML

Terakhir diperbarui : 24 Mei 2018 - 19.47
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr_8Y0ykpZgK8E12uSTzY4gaCWLBA2Je9rPQeB3LliJQ8fyZsTaBd7CkkMlBcaa9a09Ieye2E_kyGTRIPwGV-6tlR5Sl9NxgyO-rL1eKXPNo6ScNfTCMy-whfiBQiwb3TErbnrVhvtBJU/s1600/sec.png);
   z-index: 3;
}

#BGjam {
   position: relative;
   width: 400px;
   height: 400px;
   margin: 20px auto 0 auto;
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHAjSZWMqvvcUhrXuZFJMXsihfkaRxixsO1fPLlGO1nuZYOcaZeiOJIIT8S_2AMbB1gIhvI8y4v_m7TsHmkqzQpEmpbh1yxXULCLqgOqK_VIMiB4hiYSY5KYH6nPboNu5_YsZYIV251iMq/s320/cara+membuat+jam.png);
   background-size: 100% 100%;
   list-style: none;
}

#menit {
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqqo4dHxHl8NosfHBnsFZTiOOrarZSDtJEpFKg2nXQsQXM2auaJbG_XoPav-kP5FuyvtNthFTbmwZrDzWbPuhwnarG6-jU7a1Wpq-ZXhVgHq1mXrR1rr0i7am7_Ksnr_qXSY-tmwoAGuo/s1600/min.png);
   z-index: 2;
}

#jam {
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrYsr06ICtQHxCNFwLZwlDVPZL7Qk3262DJiJKnHVqkjxm6HD7DLYrmDSF68wF8hSVPuO-QR_SSo57i5PSEZd0EJuJGhQxhDwZ8DuxcdOsBmv3juKVskxSN5RG1zP1ToHZ_c8N6hKgtE8/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);

});
<!DOCTYPE html>
<html>
<head>
<title>Triksonic Demo</title>

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

* {
   margin: 0;
   padding: 0;
}

#detik {
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr_8Y0ykpZgK8E12uSTzY4gaCWLBA2Je9rPQeB3LliJQ8fyZsTaBd7CkkMlBcaa9a09Ieye2E_kyGTRIPwGV-6tlR5Sl9NxgyO-rL1eKXPNo6ScNfTCMy-whfiBQiwb3TErbnrVhvtBJU/s1600/sec.png);
   z-index: 3;
}

#BGjam {
   position: relative;
   width: 400px;
   height: 400px;
   margin: 20px auto 0 auto;
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHAjSZWMqvvcUhrXuZFJMXsihfkaRxixsO1fPLlGO1nuZYOcaZeiOJIIT8S_2AMbB1gIhvI8y4v_m7TsHmkqzQpEmpbh1yxXULCLqgOqK_VIMiB4hiYSY5KYH6nPboNu5_YsZYIV251iMq/s320/cara+membuat+jam.png);
   background-size: 100% 100%;
   list-style: none;
}

#menit {
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqqo4dHxHl8NosfHBnsFZTiOOrarZSDtJEpFKg2nXQsQXM2auaJbG_XoPav-kP5FuyvtNthFTbmwZrDzWbPuhwnarG6-jU7a1Wpq-ZXhVgHq1mXrR1rr0i7am7_Ksnr_qXSY-tmwoAGuo/s1600/min.png);
   z-index: 2;
}

#jam {
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrYsr06ICtQHxCNFwLZwlDVPZL7Qk3262DJiJKnHVqkjxm6HD7DLYrmDSF68wF8hSVPuO-QR_SSo57i5PSEZd0EJuJGhQxhDwZ8DuxcdOsBmv3juKVskxSN5RG1zP1ToHZ_c8N6hKgtE8/s1600/hour.png);
   z-index: 1;
}
</style>

</head>
<body>


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


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script>
$(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);

    });
</script>

</body>
</html>
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.