Cara Membuat Jam Analog dan Digital Di sertai dengan Background Gambar di HTML
cara membuat jam analog dan digital di halaman HTML dan Untuk memperindah tampilan kita dapat memasukkan script jam dan Gambar ke dalam dokumen HTML. Script dan Gambar yang dimasukkan dapat berupa gambar diam dan di sertai dengan Tampilan Jam
Untuk memanggil file gambar dapat menggunakan kode-kode perintah berikut:
<body background = "gambar1.jpg">
<body>
Untuk menampilkan Tampilan Jam Analog dapat menggunakan kode-kode perintah berikut:
<center>
<style type="text/css">
h1,h2,p,a{
font-family: sans-serif;
font-weight: normal;
}
.jam1 {
background: #e7f2f729;
position: relative;
width: 240px;
height: 240px;
border: 16px solid #52b6f05e;
border-radius: 50%;
padding: 20px;
margin:20px auto;
}
.nkbt {
height: 100%;
width: 100%;
position: relative;
}
.jarum {
position: absolute;
width: 50%;
background: #232323;
top: 50%;
transform: rotate(90deg);
transform-origin: 100%;
transition: all 0.05s cubic-bezier(0.1, 2.7, 0.58, 1);
}
.lingkaran_tengah {
width: 24px;
height: 24px;
background: #232323;
border: 4px solid #52b6f0;
position: absolute;
top: 50%;
left: 50%;
margin-left: -14px;
margin-top: -14px;
border-radius: 50%;
}
.jarum_detik {
height: 2px;
border-radius: 1px;
background: #F0C952;
}
.jarum_menit {
height: 4px;
border-radius: 4px;
}
.jarum_jam {
height: 8px;
border-radius: 4px;
width: 35%;
left: 15%;
}
</style>
<div class="jam1">
<div class="nkbt">
<div class="jarum jarum_detik"></div>
<div class="jarum jarum_menit"></div>
<div class="jarum jarum_jam"></div>
<div class="lingkaran_tengah"></div>
</div>
</div>
<script type="text/javascript">
const secondHand = document.querySelector('.jarum_detik');
const minuteHand = document.querySelector('.jarum_menit');
const jarum_jam = document.querySelector('.jarum_jam');
function setDate(){
const now = new Date();
const seconds = now.getSeconds();
const secondsDegrees = ((seconds / 60) * 360) + 90;
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
if (secondsDegrees === 90) {
secondHand.style.transition = 'none';
} else if (secondsDegrees >= 91) {
secondHand.style.transition = 'all 0.05s cubic-bezier(0.1, 2.7, 0.58, 1)'
}
const minutes = now.getMinutes();
const minutesDegrees = ((minutes / 60) * 360) + 90;
minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;
const hours = now.getHours();
const hoursDegrees = ((hours / 12) * 360) + 90;
jarum_jam.style.transform = `rotate(${hoursDegrees}deg)`;
}
setInterval(setDate, 1000)
</script>
Sedangkan Untuk menampilkan Tampilan Jam digital dapat menggunakan kode-kode perintah berikut:
<style>
h1,h2,p,a{
font-family: sans-serif;
font-weight: normal;
}
.jam2 {
overflow: hidden;
width: 340px;
}
.kotak{
float: left;
width: 100px;
height: 100px;
background-color: #189fff1a;
color: #fff;
}
.jam2 p {
color: #fff;
font-size: 36px;
text-align: center;
margin-top: 30px;
}
</style>
<div class="jam2">
<div class="kotak">
Jam<p id="jam"></p>
</div>
<div class="kotak">
Menit<p id="menit"></p>
</div>
<div class="kotak">
Detik<p id="detik"></p>
</div>
</div>
<script>
window.setTimeout("waktu()", 1000);
function waktu() {
var waktu = new Date();
setTimeout("waktu()", 1000);
document.getElementById("jam").innerHTML = waktu.getHours();
document.getElementById("menit").innerHTML = waktu.getMinutes();
document.getElementById("detik").innerHTML = waktu.getSeconds();
}
</script>
Dan Sedangkan Untuk Menampilkan semuanya Kita Tempelkan Script yang sudah saya buat untuk lebih jelasnya kalian bisa copy script html di bawah ini :
HTML:
<html lang="en">
<head>
<title>Jam Elektronika nkbt</title>
</head>
<body background = "nkbt.jpg">
<center>
<style type="text/css">
h1,h2,p,a{
font-family: sans-serif;
font-weight: normal;
}
.jam1 {
background: #e7f2f729;
position: relative;
width: 240px;
height: 240px;
border: 16px solid #52b6f05e;
border-radius: 50%;
padding: 20px;
margin:20px auto;
}
.nkbt {
height: 100%;
width: 100%;
position: relative;
}
.jarum {
position: absolute;
width: 50%;
background: #232323;
top: 50%;
transform: rotate(90deg);
transform-origin: 100%;
transition: all 0.05s cubic-bezier(0.1, 2.7, 0.58, 1);
}
.lingkaran_tengah {
width: 24px;
height: 24px;
background: #232323;
border: 4px solid #52b6f0;
position: absolute;
top: 50%;
left: 50%;
margin-left: -14px;
margin-top: -14px;
border-radius: 50%;
}
.jarum_detik {
height: 2px;
border-radius: 1px;
background: #F0C952;
}
.jarum_menit {
height: 4px;
border-radius: 4px;
}
.jarum_jam {
height: 8px;
border-radius: 4px;
width: 35%;
left: 15%;
}
</style>
<div class="jam1">
<div class="nkbt">
<div class="jarum jarum_detik"></div>
<div class="jarum jarum_menit"></div>
<div class="jarum jarum_jam"></div>
<div class="lingkaran_tengah"></div>
</div>
</div>
<script type="text/javascript">
const secondHand = document.querySelector('.jarum_detik');
const minuteHand = document.querySelector('.jarum_menit');
const jarum_jam = document.querySelector('.jarum_jam');
function setDate(){
const now = new Date();
const seconds = now.getSeconds();
const secondsDegrees = ((seconds / 60) * 360) + 90;
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
if (secondsDegrees === 90) {
secondHand.style.transition = 'none';
} else if (secondsDegrees >= 91) {
secondHand.style.transition = 'all 0.05s cubic-bezier(0.1, 2.7, 0.58, 1)'
}
const minutes = now.getMinutes();
const minutesDegrees = ((minutes / 60) * 360) + 90;
minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;
const hours = now.getHours();
const hoursDegrees = ((hours / 12) * 360) + 90;
jarum_jam.style.transform = `rotate(${hoursDegrees}deg)`;
}
setInterval(setDate, 1000)
</script>
<br>
<style>
h1,h2,p,a{
font-family: sans-serif;
font-weight: normal;
}
.jam2 {
overflow: hidden;
width: 340px;
}
.kotak{
float: left;
width: 100px;
height: 100px;
background-color: #189fff1a;
color: #fff;
}
.jam2 p {
color: #fff;
font-size: 36px;
text-align: center;
margin-top: 30px;
}
</style>
<div class="jam2">
<div class="kotak">
Jam<p id="jam"></p>
</div>
<div class="kotak">
Menit<p id="menit"></p>
</div>
<div class="kotak">
Detik<p id="detik"></p>
</div>
</div>
<script>
window.setTimeout("waktu()", 1000);
function waktu() {
var waktu = new Date();
setTimeout("waktu()", 1000);
document.getElementById("jam").innerHTML = waktu.getHours();
document.getElementById("menit").innerHTML = waktu.getMinutes();
document.getElementById("detik").innerHTML = waktu.getSeconds();
}
</script>
<br><br>
<body>
</html>
Hasilnya sebagai berikut :
Terimakasih telah mampir di blog saya smoga dapat bermanfaat bagi teman2 semua..
Komentar
Login untuk berkomentar