Cara menggunakan timer javascript

By On Monday, October 24th, 2022 Categories : Tanya Jawab

Cara menggunakan timer javascript – Apa kabar ibu dan bapak semua, Selamat datang di web site trendwisata.com ini. Malam ini, kami di website Trend Wisata mau menampilkan ulasan yang cool yang membahas Cara menggunakan timer javascript. Silahkan sobat tonton di bawah ini:

Tips kali ini adalah berbagi ilmu tentang cara membuat timer dengan start, stop, dan reset button menggunakan JavaScript, untuk dipasang di website. Jika sedang kebetulan membutuhkan informasi tentang ini, maka itulah namanya keberuntungan. Jika tidak, baik dibookmark karena siapa tahu nanti akan membutuhkan.

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>

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>

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>

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>

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.

, seorang pejalan musiman dan penyuka sejarah yang sedang tinggal di Cikarang Utara. Traktir BA secangkir kopi. Secangkir saja ya! Juni 04, 2020.

Tulis Komentar

Ketik dulu, lalu klik “Masuk …” atau “Posting”.

Cara menggunakan timer javascript | admin | 4.5
shopee flash sale gratis ongkir
x