Source Code StopWatch dengan HTML, CSS dan Javascript
iPunx February 18, 2023 9:26 pm . 3 min read 
Source code stopwatch HTML – Stopwatch adalah alat pengukur waktu, biasa digunakan untuk menghitung waktu ketika pertandingan olah raga. Selain itu, stopwatch juga sekarang banyak digunakan ibu-ibu dalam menghitung waktu memasak.
Karena pentingnya stopwatch, kita juga dapat membuat sendiri dengan hanya memanfaatkan HTML, CSS dan Javascript. Walaupun dengan script yang sangat sederhana, namun tampilan yang dihasilkan juga sudah tergolong menarik dan mudah digunakan.
Persiapan Coding Stopwatch HTML
Karena hanya menggunakan html, css dan javascript kita tidak perlu repot-repot menginstall web server. Kita cukup membuka file html yang kita buat dengan web browser secara langsung.
Langkah awal adalah kita buat folder yang menampung file code html, css dan javascript. Misalnya, kita buat folder stopwatch yang berisi tiga file yaitu index.html, style.css dan script.js.
Copy Paste Source Code STOPWATCH
Selanjutnya setelah semua persiapan di atas telah kita lakukan, langkah berikutnya adalah copy paste source code stopwatch di bawah ini.
1. HTML
File pertama yang kita butuhkan adalah file html. HTML berfungsi untuk menampung struktur file aplikasi stopwatch. Selain itu, html merupakan file yang dapat langsung dibaca oleh web browser.
Silahkan copy paste script html berikut ke dalam file index.html yang kita telah buat sebelumnya. Setelah itu, simpan (save) file tersebut.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Stopwatch App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Stopwatch</h1>
<p id="timer">00:00:00:00</p>
<div class="controls">
<button id="start" onclick="startTimer()">Start</button>
<button id="stop" onclick="stopTimer()">Stop</button>
<button id="reset" onclick="resetTimer()">Reset</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
2. CSS
Sama seperti halnya html, css di bawah ini tinggal anda copy paste ke dalam file style.css yang telah anda persiapkan sebelumnya. File css adalah file yang berfungsi untuk mengatur tampilan aplikasi stopwatch agar lebih menarik dan enak dipandang.
.container {
text-align: center;
margin-top: 50px;
}
h1 {
font-size: 40px;
margin-bottom: 20px;
}
#timer {
font-size: 60px;
font-weight: bold;
margin-bottom: 30px;
}
.controls {
display: flex;
justify-content: center;
}
button {
font-size: 20px;
margin: 0 10px;
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #4CAF50;
color: white;
cursor: pointer;
}
button:hover {
background-color: #3e8e41;
}
3. Javascript
Langkah terakhir adalah copy paste file javascript di bawah ini ke dalam file script.js. File javascript adalah file logic aplikasi agar aplikasi dapat berjalan dengan baik sesuai dengan keinginan.
Jangan lupa setelah paste file ini ke dalam script.js untuk menyimpannya (save). Pastikan ketiga file di atas sudah anda simpan semua.
let milliseconds = 0;
let seconds = 0;
let minutes = 0;
let hours = 0;
let timer;
function startTimer() {
timer = setInterval(runTimer, 10);
}
function runTimer() {
milliseconds++;
if (milliseconds == 100) {
milliseconds = 0;
seconds++;
if (seconds == 60) {
seconds = 0;
minutes++;
if (minutes == 60) {
minutes = 0;
hours++;
}
}
}
document.getElementById("timer").innerHTML = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds) + ":" + (milliseconds > 9 ? milliseconds : "0" + milliseconds);
}
function stopTimer() {
clearInterval(timer);
}
function resetTimer() {
clearInterval(timer);
milliseconds = 0;
seconds = 0;
minutes = 0;
hours = 0;
document.getElementById("timer").innerHTML = "00:00:00:00";
}
Demikianlah source code stopwatch html, css dan javascript yang gratis dan bebas anda modifikasi. Terus ikuti farazinux.com untuk selalu mendapatkan informasi terbaru seputar dunia teknologi, desain, template dan hal-hal lain yang sedang tranding.
