Internet penuh dengan ilmu beraneka ragam, termasuk ilmu tentang JavaScript, yang sebenarnya orang bisa pelajari secara gratis, tanpa perlu keluar keringat untuk pergi ke tempat kursus dan tak perlu membayar jasa kursusnya. Tentu ada yang berbayar, namun yang gratis jauh lebih banyak jumlahnya.
Persoalannya, internet seperti rimba belantara, yang untuk mencari sebuah informasi sering dibutuhkan waktu tidak sedikit. Mengetahui apa yang dibutuhkan, dan menuliskannya dalam bentuk key words, adalah sebuah tantangan yang sering tidak ringan. Mengubah key words untuk mendapat informasi tepat kadang bisa sangat membantu.
Karena itu membiasakan diri untuk menyimpan laman berisi informasi berguna di bookmark adalah salah satu cara ampuh untuk menghemat waktu di masa depan. Oleh karena apa yang kita temukan hari ini di web, belum tentu bisa muncul di hasil pencarian dalam beberapa bulan mendatang.
Saya membutuhkan pengetahuan tentang cara membuat timer dengan JavaScript ini adalah ketika sedang membuat tulisan Latihan Online Penjumlahan Untuk Sekolah Dasar, karena meskipun orang bisa memasang timernya sendiri, namun saya memutuskan untuk menyediakannya di halaman sebagai perekam pencapaian kecepatan dalam menyelesaikan soal.
Adanya start dan stop button jelas dibutuhkan agar timernya bisa dimulai dan dihentikan kapan saja dibutuhkan. Sedangkan tombol reset merupakan bonus agar tak perlu reload halaman untuk mengenolkan angka pada timer setelah digunakan.
Untuk membuat Timer dengan Start, Stop, dan Reset Button menggunakan JavaScript, gunakan kode di bawah ini yang sedikit saya modifikasi dari kode aslinya di stackoverflow.com:
JavaScript
<script async="async" type="text/javascript">
window.onload = () => {
let hour = 0;let minute = 0;let seconds = 0;let totalSeconds = 0;let intervalId = null;
function startTimer() {++totalSeconds;hour = Math.floor(totalSeconds /3600);minute = Math.floor((totalSeconds - hour*3600)/60);seconds = totalSeconds - (hour*3600 + minute*60);
document.getElementById("hour").innerHTML =hour;
document.getElementById("minute").innerHTML =minute;
document.getElementById("seconds").innerHTML =seconds;}
document.getElementById('start-btn').addEventListener('click', () => {
intervalId = setInterval(startTimer, 1000);})
document.getElementById('stop-btn').addEventListener('click', () => {
if (intervalId)
clearInterval(intervalId);});
document.getElementById('reset-btn').addEventListener('click', () => {
totalSeconds = 0;
document.getElementById("hour").innerHTML = '0';
document.getElementById("minute").innerHTML = '0';
document.getElementById("seconds").innerHTML = '0';
});
}</script>
window.onload = () => {
let hour = 0;let minute = 0;let seconds = 0;let totalSeconds = 0;let intervalId = null;
function startTimer() {++totalSeconds;hour = Math.floor(totalSeconds /3600);minute = Math.floor((totalSeconds - hour*3600)/60);seconds = totalSeconds - (hour*3600 + minute*60);
document.getElementById("hour").innerHTML =hour;
document.getElementById("minute").innerHTML =minute;
document.getElementById("seconds").innerHTML =seconds;}
document.getElementById('start-btn').addEventListener('click', () => {
intervalId = setInterval(startTimer, 1000);})
document.getElementById('stop-btn').addEventListener('click', () => {
if (intervalId)
clearInterval(intervalId);});
document.getElementById('reset-btn').addEventListener('click', () => {
totalSeconds = 0;
document.getElementById("hour").innerHTML = '0';
document.getElementById("minute").innerHTML = '0';
document.getElementById("seconds").innerHTML = '0';
});
}</script>
HTML
<h2>Hour:Minute:Second = <span id="hour"></span>:<span id="minute"></span>:<span id="seconds"></span></h2>
<button id="start-btn">Start</button> <button id="stop-btn">Stop</button> <button id="reset-btn">Reset</button>
<button id="start-btn">Start</button> <button id="stop-btn">Stop</button> <button id="reset-btn">Reset</button>
Hasilnya adalah (klik 'Start'):
Hour:Minute:Second = ::
Jika tidak membutuhkan jam, hanya menit dan detik saja maka scriptnya adalah sebagai berikut ini,
JavaScript Tanpa Jam
<script async="async" type="text/javascript">
window.onload = () => {let minute = 0;let seconds = 0;let totalSeconds = 0;let intervalId = null;
function startTimer() {++totalSeconds;minute = Math.floor(totalSeconds/60);seconds = totalSeconds - (minute*60);
document.getElementById("minute").innerHTML =minute;
document.getElementById("seconds").innerHTML =seconds;}
document.getElementById('start-btn').addEventListener('click', () => {
intervalId = setInterval(startTimer, 1000);})
document.getElementById('stop-btn').addEventListener('click', () => {if (intervalId)clearInterval(intervalId);});
document.getElementById('reset-btn').addEventListener('click', () => {totalSeconds = 0;
document.getElementById("minute").innerHTML = '0';
document.getElementById("seconds").innerHTML = '0';});}</script>
window.onload = () => {let minute = 0;let seconds = 0;let totalSeconds = 0;let intervalId = null;
function startTimer() {++totalSeconds;minute = Math.floor(totalSeconds/60);seconds = totalSeconds - (minute*60);
document.getElementById("minute").innerHTML =minute;
document.getElementById("seconds").innerHTML =seconds;}
document.getElementById('start-btn').addEventListener('click', () => {
intervalId = setInterval(startTimer, 1000);})
document.getElementById('stop-btn').addEventListener('click', () => {if (intervalId)clearInterval(intervalId);});
document.getElementById('reset-btn').addEventListener('click', () => {totalSeconds = 0;
document.getElementById("minute").innerHTML = '0';
document.getElementById("seconds").innerHTML = '0';});}</script>
HTML Tanpa Jam
<h2>Minute:Second = <span id="minute"></span>:<span id="seconds"></span></h2>
<button id="start-btn">Start</button> <button id="stop-btn">Stop</button> <button id="reset-btn">Reset</button>
<button id="start-btn">Start</button> <button id="stop-btn">Stop</button> <button id="reset-btn">Reset</button>
Lihat Video
Hasilnya bisa dilihat di tulisan Latihan Online Penjumlahan Untuk Sekolah Dasar Level 1.A, yang hanya memperlihatkan angka menit dan detik, oleh sebab timer untuk jam tidak diperlukan sama sekali. Semoga bermanfaat.
Label: JavaScript, Tutorial
Bagikan ke: WhatsApp, Email. Print!.
