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>