Berikut adalah contoh kode HTML dan JavaScript untuk membuat counter hitung dari 1 juta rupiah sampai tak terbatas:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Counter Hitung</title>
</head>
<body>
<h1 id="counter">Rp. 10.000.000,-</h1>
<script src="counter.js"></script>
</body>
</html>
JavaScript (counter.js):
let counter = 1000000;
setInterval(() => {
counter++;
document.getElementById("counter").innerText = "Rp. " + counter.toLocaleString('id-ID') + ",-";
}, 1000);
Jika Anda ingin membuat counter untuk menambah angkanya sangat cepat, Anda dapat mengurangi nilai interval pada fungsi setInterval yang digunakan untuk memperbarui nilai counter pada halaman HTML.
Berikut adalah contoh kode JavaScript yang dapat Anda gunakan untuk membuat counter yang cepat bertambah angkanya:
JavaScript (counter.js):
let counter = 10000000;
setInterval(() => {
counter += 1000;
document.getElementById("counter").innerText = "Rp. " + counter.toLocaleString('id-ID') + ",-";
}, 10);
Dalam contoh di atas, counter akan bertambah 1000 setiap 10 milidetik (0,01 detik). Anda dapat menyesuaikan nilai interval sesuai dengan kecepatan yang diinginkan. Namun, perlu diingat bahwa semakin cepat counter bertambah, semakin besar pula pengaruhnya terhadap kinerja perangkat dan penggunaannya yang kurang efektif.
Harap diingat bahwa nilai counter akan terus bertambah hingga batas tertentu, dan kemungkinan besar akan mencapai batas bilangan maksimum yang dapat ditampung oleh JavaScript setelah beberapa saat.
Menyimpan dengan fungsi Cookie dan akan di reset sesuai waktu yang di tentukan.
Untuk menambahkan fitur reset counter setiap harinya setelah pukul 03.00 WIB, Anda dapat menambahkan kode yang memeriksa waktu dan mengatur nilai counter kembali ke nilai awal jika waktu sudah melewati pukul 03.00 WIB.
Berikut adalah contoh kode yang diperbarui dengan fungsi reset counter setiap harinya setelah pukul 03.00 WIB:
// set nilai awal counter
const initialCounter = 10000000;
let counter = initialCounter;
// reset counter setiap harinya setelah pukul 03.00 WIB
const resetCounter = () => {
const now = new Date();
const resetTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 3, 0, 0);
if (now >= resetTime) {
counter = initialCounter;
}
};
// cek apakah ada cookies yang tersimpan
if (document.cookie) {
const cookies = document.cookie.split(';');
for (const cookie of cookies) {
const [name, value] = cookie.split('=');
if (name.trim() === 'counter') {
counter = parseInt(value);
break;
}
}
}
setInterval(() => {
counter += 821;
resetCounter(); // panggil fungsi resetCounter untuk mereset nilai counter setiap harinya setelah pukul 03.00 WIB
document.getElementById("counter").innerText = "Rp. " + counter.toLocaleString('id-ID') + ",-";
// simpan nilai counter ke dalam cookies
document.cookie = "counter=" + counter + "; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/";
}, 10);
Pada kode di atas, fungsi resetCounter ditambahkan untuk mereset nilai counter setiap harinya setelah pukul 03.00 WIB. Fungsi tersebut akan memeriksa waktu saat ini menggunakan objek Date JavaScript, dan kemudian membandingkannya dengan waktu reset yang ditentukan (pukul 03.00 WIB pada hari ini). Jika waktu saat ini sudah melewati waktu reset, nilai counter akan diatur kembali ke nilai awal.
Setelah itu, pada bagian interval, kita memanggil fungsi resetCounter setiap kali nilai counter diupdate. Dengan demikian, nilai counter akan direset setiap harinya setelah pukul 03.00 WIB, dan pengguna akan melihat nilai counter yang kembali ke nilai awal pada waktu tersebut.
Menambahkan random Value Penambahan
let values = [241, 300, 102];
let index = 0;
setInterval(() => {
counter += values[index];
index = (index + 1) % values.length;
document.getElementById("counter").innerText = "¥ " + counter.toLocaleString('id-ID');
// simpan nilai counter ke dalam cookies
document.cookie = "counter=" + counter + "; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/";
}, 500);