Assalamualaikum Wr. Wb.
Hallo agan-agan selamat datang di blog saya. Kali ini saya akan menulis tentang cara membuat jam digital dan jam analog dengan javascript. Oh ya btw source code nya di tulis menggunakan html, css, dan js.
Ini source code nya saya ambil dari www.malasngoding.com. Di situ banyak menyediakan tutorial yang sangat bermanfaat. Di website tersebut banyak meyediakan tutorial tentang bahasa program. Ok lah langsung saja kita ke topik yang pertama.
1. Jam Digital
Kurang lebih tampilan jam digitalnya seperti itu. Tampilannya sangat sederhana namun itu semua bisa diubah dengan kreatifitas kalian. Kali ini saya akan menyediakan source code nya. Jadi kalian ubah-ubah sendiri deh. Tapi, jangan ubah author nya gan. Kasian author nya yang buat kalian mah enak ngerecode. Untuk menjalankannya kalian buka notepad >> paste di notepad >> simpan dengan ekstensi .html >> jalankan di browser kalian.
Source code nya
<!DOCTYPE html>2. Jam Analog
<html>
<head>
<title>Membuat Jam Digital Dengan Javascript - www.malasngoding.com</title>
</head>
<body>
<style>
h1,h2,p,a{
font-family: sans-serif;
font-weight: normal;
}
.jam-digital-malasngoding {
overflow: hidden;
width: 330px;
margin: 20px auto;
border: 5px solid #efefef;
}
.kotak{
float: left;
width: 110px;
height: 100px;
background-color: #189fff;
}
.jam-digital-malasngoding p {
color: #fff;
font-size: 36px;
text-align: center;
margin-top: 30px;
}
</style>
<center>
<h1>Tutorial Membuat Jam Digital Dengan Javascript</h1>
<h2>www.malasngoding.com</h2>
</center>
<div class="jam-digital-malasngoding">
<div class="kotak">
<p id="jam"></p>
</div>
<div class="kotak">
<p id="menit"></p>
</div>
<div class="kotak">
<p id="detik"></p>
</div>
</div>
<center>
<a href="https://www.malasngoding.com/membuat-jam-analog-dan-digital-dengan-javascript">TUTORIAL</a>
</center>
<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>
</body>
</html>
Source code nya
<!DOCTYPE html>
<html>
<head>
<title>Membuat Jam Digital Dengan Javascript - www.malasngoding.com</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<style type="text/css">
h1,h2,p,a{
font-family: sans-serif;
font-weight: normal;
}
.jam_analog_malasngoding {
background: #e7f2f7;
position: relative;
width: 240px;
height: 240px;
border: 16px solid #52b6f0;
border-radius: 50%;
padding: 20px;
margin:20px auto;
}
.xxx {
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>
<center>
<h1>Tutorial Membuat Jam Digital Dengan Javascript</h1>
<h2>www.malasngoding.com</h2>
</center>
<div class="jam_analog_malasngoding">
<div class="xxx">
<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>
<center>
<a href="https://www.malasngoding.com/membuat-jam-analog-dan-digital-dengan-javascript">TUTORIAL</a>
</center>
<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>
</body>
</html>
Nah gimana? mudah kan. Semoga artikel kali ini bermanfaat bagi kalian. Jika ada yang masih kurang mohon maaf. Karena saya juga kurang ide ini. Jadi segini aja artikel kali ini. Jangan lupa berkunjung ke artikel yang lain ya gan.
Lol knp gk ubah malasngoding nya
ReplyDelete