Assalamualaikum Wr. Wb.
Hallo agan-agan selamat tiba di blog saya. Kali ini aku akan menulis wacana cara menciptakan jam digital dan jam analog dengan javascript. Oh ya btw source code nya di tulis memakai html, css, dan js.
Ini source code nya aku ambil dari www.malasngoding.com. Di situ banyak menyediakan tutorial yang sangat bermanfaat. Di website tersebut banyak meyediakan tutorial wacana bahasa program. Ok lah eksklusif saja kita ke topik yang pertama.
1. Jam Digital
Kurang lebih tampilan jam digitalnya menyerupai itu. Tampilannya sangat sederhana namun itu semua dapat diubah dengan kreatifitas kalian. Kali ini aku akan menyediakan source code nya. Makara kalian ubah-ubah sendiri deh. Tapi, jangan ubah author nya gan. Kasian author nya yang buat kalian mah yummy 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? gampang kan. Semoga artikel kali ini bermanfaat bagi kalian. Jika ada yang masih kurang mohon maaf. Karena aku juga kurang wangsit ini. Makara segini aja artikel kali ini. Jangan lupa berkunjung ke artikel yang lain ya gan.
No comments