Form Input JavaScript: Validasi Mudah & Efektif

Selain elemen , Kalian juga dapat menggunakan elemen untuk input multi-line, <select> untuk dropdown lists, dan <button> untuk tombol submit. Setiap elemen ini dapat memiliki atribut yang berbeda untuk mengontrol perilaku dan tampilan mereka. Memahami atribut-atribut ini sangat penting untuk membuat form yang efektif dan mudah digunakan. Kalian juga bisa menggunakan atribut required pada input untuk memaksa pengguna mengisi field tersebut.</p><h id="heading-5"><h3><a href="/validasi-input-batasi-panjang-karakter-form">Validasi Input</a> Tipe Teks: Panjang dan Format</h3></h><p>Validasi input tipe teks adalah salah satu tugas paling umum dalam validasi form. Kalian dapat memvalidasi panjang input, format input (misalnya, email, nomor telepon), dan karakter yang diizinkan. Untuk memvalidasi panjang input, Kalian dapat menggunakan properti length dari string input. Untuk memvalidasi format input, Kalian dapat menggunakan regular expressions (<a href="/regex-javascript-kuasai-pola-teks-dengan-mudah"><b id="heading-6">regex</b></a>). Regex adalah pola yang digunakan untuk mencocokkan string teks.</p><p>Berikut adalah contoh cara memvalidasi panjang input teks dan format email menggunakan JavaScript:</p><ul> <li>Dapatkan nilai input teks menggunakan <code>document.getElementById(nama).value</code>.</li> <li>Periksa panjang input menggunakan <code>if (nama.length < 5) { ... }</code>.</li> <li>Periksa format email menggunakan regex: <code>if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { ... }</code>.</li> <li>Tampilkan pesan kesalahan jika validasi gagal.</li></ul><quote>“Validasi input teks yang efektif adalah kunci untuk memastikan data yang dimasukkan akurat dan konsisten.”</quote><h id="heading-7"><h3>Validasi Input Numerik: Rentang dan Tipe Data</h3></h><p>Validasi input numerik melibatkan pemeriksaan apakah input adalah angka yang valid dan apakah angka tersebut berada dalam rentang yang diizinkan. Kalian dapat menggunakan fungsi <code>isNaN()</code> untuk memeriksa apakah suatu nilai adalah angka. Kalian juga dapat menggunakan operator perbandingan untuk memeriksa apakah angka tersebut berada dalam rentang yang diizinkan. Objek Number sangat penting dalam proses ini.</p><p>Berikut adalah contoh cara memvalidasi input numerik menggunakan JavaScript:</p><ul> <li>Dapatkan nilai input numerik menggunakan <code>document.getElementById(umur).value</code>.</li> <li>Konversi nilai ke angka menggunakan <code>parseInt(umur)</code> atau <code>parseFloat(umur)</code>.</li> <li>Periksa apakah nilai adalah angka menggunakan <code>if (isNaN(umur)) { ... }</code>.</li> <li>Periksa apakah angka tersebut berada dalam rentang yang diizinkan menggunakan <code>if (umur < 18 || umur > 65) { ... }</code>.</li> <li>Tampilkan pesan kesalahan jika validasi gagal.</li></ul><h id="heading-8"><h3>Validasi Checkbox dan Radio Button</h3></h><p>Validasi checkbox dan radio button melibatkan pemeriksaan apakah setidaknya satu checkbox dicentang atau apakah satu radio button dipilih. Kalian dapat menggunakan properti checked dari elemen checkbox dan radio button untuk memeriksa status mereka. Kalian juga dapat menggunakan loop untuk memeriksa semua checkbox dalam grup.</p><p>Berikut adalah contoh cara memvalidasi checkbox menggunakan JavaScript:</p><ul> <li>Dapatkan semua elemen checkbox dalam grup menggunakan <code>document.getElementsByName(hobi)</code>.</li> <li>Loop melalui semua elemen checkbox.</li> <li>Periksa properti checked dari setiap elemen checkbox.</li> <li>Jika tidak ada checkbox yang dicentang, tampilkan pesan kesalahan.</li></ul><h id="heading-9"><h3>Validasi Select Dropdown</h3></h><p>Validasi select dropdown melibatkan pemeriksaan apakah nilai default dipilih atau apakah nilai yang valid dipilih. Kalian dapat menggunakan properti value dari elemen <select> untuk mendapatkan nilai yang dipilih. Kalian juga dapat menggunakan loop untuk memeriksa semua opsi dalam dropdown.</p><p>Berikut adalah contoh cara memvalidasi select dropdown menggunakan JavaScript:</p><ul> <li>Dapatkan elemen <select> menggunakan <code>document.getElementById(negara)</code>.</li> <li>Dapatkan nilai yang dipilih menggunakan <code>negara.value</code>.</li> <li>Periksa apakah nilai yang dipilih adalah nilai default.</li> <li>Jika nilai yang dipilih adalah nilai default, tampilkan pesan kesalahan.</li></ul><h id="heading-10"><h3>Menggunakan Regular Expressions untuk Validasi yang Lebih Kompleks</h3></h><p>Regular expressions (regex) adalah alat yang ampuh untuk memvalidasi format input yang kompleks, seperti nomor telepon, kode pos, dan nomor kartu kredit. Regex memungkinkan Kalian untuk mendefinisikan pola yang harus dicocokkan oleh input. Kalian dapat menggunakan fungsi <code>test()</code> dari objek regex untuk memeriksa apakah input cocok dengan pola tersebut.</p><p>Berikut adalah contoh cara memvalidasi nomor telepon menggunakan regex:</p><code>if (!/^\d{3}-\d{3}-\d{4}$/.test(telepon)) { ... }</code><p>Dalam contoh ini, regex <code>^\d{3}-\d{3}-\d{4}$</code> mencocokkan nomor telepon dalam format XXX-XXX-XXXX. <b id="heading-11">Regex dapat menjadi kompleks, tetapi mereka menawarkan fleksibilitas yang tak tertandingi dalam validasi input.</b></p><h id="heading-12"><h3>Menampilkan Pesan Kesalahan yang Informatif</h3></h><p>Menampilkan pesan kesalahan yang informatif sangat penting untuk memberikan pengalaman pengguna yang baik. Pesan kesalahan harus jelas, ringkas, dan spesifik. Mereka harus memberi tahu pengguna apa yang salah dan bagaimana memperbaikinya. Kalian dapat menggunakan elemen HTML seperti <span> atau <div> untuk menampilkan pesan kesalahan di dekat input yang salah.</p><p>Pastikan pesan kesalahan mudah dilihat dan dibaca. Kalian dapat menggunakan warna merah atau ikon peringatan untuk menarik perhatian pengguna. Kalian juga dapat menggunakan tooltips untuk menampilkan pesan kesalahan saat pengguna mengarahkan kursor ke input yang salah. <i>Pesan kesalahan yang baik dapat membantu pengguna memperbaiki kesalahan mereka dengan cepat dan mudah.</i></p><h id="heading-13"><h3>Validasi Form dengan Event Listener</h3></h><p>Untuk memicu validasi form, Kalian dapat menggunakan event listener. Event listener mendengarkan event tertentu, seperti event submit form, dan menjalankan fungsi ketika event tersebut terjadi. Kalian dapat menggunakan metode <code>addEventListener()</code> untuk menambahkan event listener ke elemen form.</p><p>Berikut adalah contoh cara menambahkan event listener ke form:</p><code>document.getElementById(myForm).addEventListener(submit, function(event) { ... });</code><p>Dalam contoh ini, fungsi yang dijalankan ketika form disubmit akan memeriksa semua input dan menampilkan pesan kesalahan jika ada kesalahan. Kalian juga dapat menggunakan event listener untuk memvalidasi input secara real-time saat pengguna mengetik atau mengubah nilai input.</p><h id="heading-14"><h3>Integrasi dengan Validasi Sisi Server</h3></h><p>Seperti yang disebutkan sebelumnya, validasi sisi klien tidak boleh menjadi satu-satunya lapisan validasi. Validasi sisi server tetap penting untuk keamanan dan integritas data. Validasi sisi server memastikan bahwa data yang diterima dari klien valid dan aman, bahkan jika validasi sisi klien telah dilewati atau dimatikan. Kalian harus selalu memvalidasi data di sisi server sebelum menyimpannya ke database atau menggunakannya dalam aplikasi Kalian.</p><p>Validasi sisi server dapat dilakukan menggunakan bahasa pemrograman server-side seperti PHP, Python, atau Node.js. Validasi sisi server harus mencakup pemeriksaan yang sama dengan validasi sisi klien, tetapi juga harus mencakup pemeriksaan tambahan untuk keamanan, seperti pencegahan serangan SQL injection dan cross-site scripting (XSS). <b id="heading-15">Kombinasi validasi sisi klien dan sisi server memberikan lapisan perlindungan yang komprehensif terhadap data yang tidak valid dan serangan keamanan.</b></p><h id="heading-16"><h3>Tips dan Trik untuk Validasi Form yang Efektif</h3></h><p>Berikut adalah beberapa tips dan trik untuk validasi form yang efektif:</p><ul> <li>Gunakan atribut HTML5 seperti <code>required</code>, <code>type=email</code>, dan <code>pattern</code> untuk validasi dasar.</li> <li>Gunakan regular expressions untuk validasi format yang kompleks.</li> <li>Tampilkan pesan kesalahan yang informatif dan mudah dipahami.</li> <li>Validasi data di sisi server untuk keamanan dan integritas data.</li> <li>Pertimbangkan untuk menggunakan library atau framework validasi form untuk menyederhanakan proses validasi.</li></ul><h id="heading-17"><h3>Akhir Kata</h3></h><p>Validasi form JavaScript adalah keterampilan penting bagi setiap pengembang web. Dengan memahami dasar-dasar validasi form dan menggunakan teknik yang tepat, Kalian dapat membuat form yang efektif, mudah digunakan, dan aman. Ingatlah untuk selalu memvalidasi data di sisi server untuk memastikan keamanan dan integritas data. Dengan menerapkan praktik terbaik validasi form, Kalian dapat meningkatkan pengalaman pengguna dan melindungi aplikasi web Kalian dari kesalahan dan serangan keamanan.</p> <style>#relBefore { position: relative; margin-top: 42px; padding: 1.5em; border-top: 1px solid #f1f6fd; border-bottom: 1px solid #f1f6fd; font-size: 16px; margin-bottom: 0px; } #relBefore span { font-weight: 400; margin: 0; padding: 6px 14px; background-color: #fefefe; border: 1px solid #e6e6e6; border-radius: 15px; position: absolute; top: -15.5px; left: 20px; } div#relBefore a { display: contents; line-height: 2; } #relBefore ul { margin: 8px 0 0; padding-left: 20px; } #relBefore li { list-style-type: none; transition: all 0.4s ease; background: transparent !important; }</style><div id="relBefore"> <span>Baca Juga:</span> <ul> <li><a href="retensi-pelanggan-strategi-jitu-tingkatkan-loyalitas">➝ Retensi Pelanggan: Strategi Jitu Tingkatkan Loyalitas</a></li> <li><a href="heading-otomatis-atur-masuk-daftar-isi">➝ Heading Otomatis: Atur & Masuk Daftar Isi!</a></li> <li><a href="use-case-diagram-mudah-dipahami-dibuat">➝ Use Case Diagram: Mudah Dipahami & Dibuat</a></li> </ul> </div> <!-- WG SHARE POST--> <!-- COMMENT INSD--> <!-- WG AI --> </section> </article> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> <style> div#slTop { margin-top: 60px!important; } /* Basic styles */ .owl-carousel .item { display: flex; flex-direction: column; align-items: center; text-align: center; } .item img { max-width: 100%; height: auto; border-radius: 5px; } .owl-nav button { background: none; border: none; color: #4d0270; /* Change color as needed */ font-size: 24px; /* Adjust size as needed */ cursor: pointer; /* Ensure pointer cursor for clickable area */ padding: 10px; /* Add padding for better click area */ } .owl-nav button:hover { color: #c6005f; /* Change color on hover */ } </style> <div class="slTop section gh-outer" id="slTop"> <h3 style=" margin-bottom: 20px; ">Baca Juga: </h3> <div class="widget HTML" data-version="2" id="HTML14"> <div class="widget-content"> <div class="owl-carousel owl-loaded owl-drag"> <div class="owl-stage-outer"> <div class="owl-stage"> <div class="owl-item" style="width: 250px;"> <div class="item"> <a href="/shopify-buka-toko-online-mudah-cepat" title="Shopify: Buka Toko Online, Mudah & Cepat."> <img src="https://tse1.mm.bing.net/th?q=Shopify:+Buka+Toko+Online,+Mudah+&+Cepat." alt="Shopify: Buka Toko Online, Mudah & Cepat."> </a> <h2 class="rect-title"><a href="/shopify-buka-toko-online-mudah-cepat">Shopify: Buka Toko Online, Mudah & Cepat.</a></h2> <div class="post-meta"><div class="rcDTe">Hari ini jam 02:25:00</div></div> </div> </div><div class="owl-item" style="width: 250px;"> <div class="item"> <a href="/cetak-label-nama-mail-merge-excel-mudah" title="Cetak Label Nama: Mail Merge Excel Mudah"> <img src="https://tse1.mm.bing.net/th?q=Cetak+Label+Nama:+Mail+Merge+Excel+Mudah" alt="Cetak Label Nama: Mail Merge Excel Mudah"> </a> <h2 class="rect-title"><a href="/cetak-label-nama-mail-merge-excel-mudah">Cetak Label Nama: Mail Merge Excel Mudah</a></h2> <div class="post-meta"><div class="rcDTe">Hari ini jam 01:26:00</div></div> </div> </div><div class="owl-item" style="width: 250px;"> <div class="item"> <a href="/spoofing-ancaman-jenis-cara-ampuh-mencegahnya" title="Spoofing: Ancaman, Jenis, & Cara Ampuh Mencegahnya"> <img src="https://tse1.mm.bing.net/th?q=Spoofing:+Ancaman,+Jenis,+&+Cara+Ampuh+Mencegahnya" alt="Spoofing: Ancaman, Jenis, & Cara Ampuh Mencegahnya"> </a> <h2 class="rect-title"><a href="/spoofing-ancaman-jenis-cara-ampuh-mencegahnya">Spoofing: Ancaman, Jenis, & Cara Ampuh Mencegahnya</a></h2> <div class="post-meta"><div class="rcDTe">Hari ini jam 01:24:00</div></div> </div> </div><div class="owl-item" style="width: 250px;"> <div class="item"> <a href="/proposal-event-sekolah-mudah-dibuat-di-word" title="Proposal Event Sekolah: Mudah Dibuat di Word"> <img src="https://tse1.mm.bing.net/th?q=Proposal+Event+Sekolah:+Mudah+Dibuat+di+Word" alt="Proposal Event Sekolah: Mudah Dibuat di Word"> </a> <h2 class="rect-title"><a href="/proposal-event-sekolah-mudah-dibuat-di-word">Proposal Event Sekolah: Mudah Dibuat di Word</a></h2> <div class="post-meta"><div class="rcDTe">Hari ini jam 00:25:00</div></div> </div> </div><div class="owl-item" style="width: 250px;"> <div class="item"> <a href="/weebly-kelebihan-kekurangan-dan-semua-yang-perlu-anda-tahu" title="Weebly: Kelebihan, Kekurangan, dan Semua yang Perlu Anda Tahu."> <img src="https://tse1.mm.bing.net/th?q=Weebly:+Kelebihan,+Kekurangan,+dan+Semua+yang+Perlu+Anda+Tahu." alt="Weebly: Kelebihan, Kekurangan, dan Semua yang Perlu Anda Tahu."> </a> <h2 class="rect-title"><a href="/weebly-kelebihan-kekurangan-dan-semua-yang-perlu-anda-tahu">Weebly: Kelebihan, Kekurangan, dan Semua yang Perlu Anda Tahu.</a></h2> <div class="post-meta"><div class="rcDTe">Hari ini jam 00:23:00</div></div> </div> </div> <!-- Add more items similarly --> </div> </div> </div> </div> </div> </div> <script> $(document).ready(function(){ $('.owl-carousel').owlCarousel({ loop: true, margin: 20, nav: true, items: 5, // Show 5 items on desktop autoplay: true, autoplayTimeout: 3000, autoplayHoverPause: true, responsive: { 0: { items: 1 // 1 item on mobile }, 600: { items: 2 // 2 items on small tablets }, 992: { items: 5 // 5 items on desktop } } }); }); </script> </main> <footer class="gh-footer gh-outer"> <div class="gh-footer-inner gh-inner"> <div class="gh-footer-bar"> <span class="gh-footer-logo is-title"><img style="width:220px!important;height:auto!important;" alt="" class="ls-is-cached lazyloaded" src="https://ik.imagekit.io/masdoni/ChatGPT_Image_Jan_11__2026__07_38_40_-removebg-preview_nosqB8M7l.png" title=""></span> <nav class="gh-footer-menu"><ul class="nav"><li><a href="https://berilmu.eu.org/tentang-kami">Tentang Kami</a></li><li><a href="https://berilmu.eu.org/hubungi-kami">Hubungi Kami</a></li><li><a href="https://berilmu.eu.org/kebijakan-privasi">Kebijakan Privasi</a></li><li><a href="https://berilmu.eu.org/syarat-dan-ketentuan">Syarat dan Ketentuan</a></li></ul></nav> <div class="gh-footer-copyright"> Powered by <a href="/" target="_blank">berilmu.eu.org</a> </div> </div> <section class="gh-footer-signup"> <h2 class="gh-footer-signup-header"><img style="width:220px!important;height:auto!important;" alt="" class="ls-is-cached lazyloaded" src="https://ik.imagekit.io/masdoni/ChatGPT_Image_Jan_11__2026__07_38_40_-removebg-preview_nosqB8M7l.png" title=""></h2> <p class="gh-footer-signup-subhead">Platform edukasi teknologi gratis. Temukan tutorial Excel, belajar Python, tips AI terbaru, dan panduan produktivitas kerja yang praktis dan mudah dipahami.</p> <style> .social-share{display:flex; gap:12px; margin-top:20px; justify-content:center} .social-share a{width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; color:#fff!important; font-size:18px; transition:0.3s} .social-share a:hover{opacity:0.8; transform:translateY(-3px)} .facebook{background:#3b5998} .twitter{background:#1da1f2} .linkedin{background:#0077b5} .instagram{background:#e1306c} .whatsapp{background:#25D366} </style> <div class="social-share"> <a href="https://www.facebook.com/sharer/sharer.php?u=https://berilmu.eu.org" class="facebook" target="_blank"><i class="fab fa-facebook-f"></i></a> <a href="https://twitter.com/intent/tweet?url=https://berilmu.eu.org" class="twitter" target="_blank"><i class="fab fa-twitter"></i></a> <a href="https://www.linkedin.com/shareArticle?url=https://berilmu.eu.org" class="linkedin" target="_blank"><i class="fab fa-linkedin-in"></i></a> <a href="https://api.whatsapp.com/send?text=https://berilmu.eu.org" class="whatsapp" target="_blank"><i class="fab fa-whatsapp"></i></a> </div> </section> </div> </div> </footer> </div> <div id="ghost-portal-root"> <style> .gsmodal { position:fixed; top:0; left:0; width:100%; height:100%; z-index:9999; display:flex; align-items:center; justify-content:center; background:#fff; visibility:hidden; opacity:0; transition:0.3s; } .gsmodal.gsshow { visibility:visible; opacity:1; } .gscontent { width:90%; max-width:600px; text-align:center; } .gscontent input { width:100%; padding:15px; border:0; border-bottom:2px solid #eee; font-size:24px; outline:none; } .gsclose { position:absolute; top:20px; right:20px; background:none; border:0; font-size:30px; cursor:pointer; } </style> <div class="gsmodal"> <button class="gsclose">×</button> <div class="gscontent"> <form action="/search"> <input name="q" placeholder="Search..." required type="search"> <button type="submit" style="display:none"></button> </form> <p style="margin-top:15px; color:#888">Press Enter to search</p> </div> </div> </div> <script> const triggers = document.querySelectorAll('.gh-search'); const modal = document.querySelector('.gsmodal'); const close = document.querySelector('.gsclose'); triggers.forEach(t => t.onclick = () => modal.classList.add('gsshow')); close.onclick = () => modal.classList.remove('gsshow'); window.onclick = (e) => { if(e.target == modal) modal.classList.remove('gsshow'); } </script> <script src="https://cdn.jsdelivr.net/gh/iwgs/newswave@refs/heads/main/js/source.js?v=fce98be120"></script> <script></script> <style> #bannerAds { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); overflow: hidden; transition: all 0.5s ease-in-out; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; user-select: none; cursor: default; box-sizing: border-box; } #bannerAds.fixed { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 50% !important; max-width: none !important; border-radius: 16px !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3) !important; z-index: 99999 !important; cursor: pointer; } #bannerAds img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: inherit; pointer-events: none; user-select: none; } #bannerAds .close-btn { position: absolute; top: 12px; right: 12px; background: rgba(255, 255, 255, 0.85); border: none; border-radius: 50%; width: 32px; height: 32px; font-size: 18px; color: #444; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease, color 0.3s ease; user-select: none; z-index: 10; } #bannerAds .close-btn:hover, #bannerAds .close-btn:focus { background: #e53e3e; color: white; outline: none; } /* Text overlay container */ #bannerAds .text-overlay { position: absolute; bottom: 20px; left: 20px; right: 20px; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); font-weight: 700; font-size: 1.5rem; line-height: 1.2; pointer-events: none; user-select: none; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } #bannerAds.fixed .text-overlay { font-size: 1.25rem; bottom: 16px; left: 16px; right: 16px; } /* Title container */ #bannerAds .title { position: absolute; top: 12px; left: 20px; right: 60px; color: #222; font-weight: 700; font-size: 1.25rem; line-height: 1.2; user-select: none; pointer-events: none; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #bannerAds.fixed .title { color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); top: 12px; left: 16px; right: 60px; font-size: 1.1rem; } /* Progress bar container */ #bannerAds .progress-bar-container { position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: rgba(0, 0, 0, 0.1); border-radius: 0 0 12px 12px; overflow: hidden; pointer-events: none; user-select: none; } #bannerAds.fixed .progress-bar-container { border-radius: 0 0 16px 16px; } /* Progress bar fill */ #bannerAds .progress-bar-fill { height: 100%; background: #e53e3e; width: 0%; transition: width linear; } /* Responsive adjustments */ @media (max-width: 400px) { #bannerAds.fixed { width: 90vw !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; } #bannerAds .text-overlay { font-size: 1.1rem; bottom: 14px; left: 14px; right: 14px; } #bannerAds .title { font-size: 1rem; left: 14px; right: 50px; } #bannerAds.fixed .title { font-size: 1rem; left: 14px; right: 50px; } } </style> <!-- Banner Ads Container --> <div aria-label="Promotional banner advertisement" id="bannerAds" role="region" tabindex="0" > <button aria-label="Close banner ad" class="close-btn" id="closeBtn" type="button"> <i aria-hidden="true" class="fas fa-times"></i> </button> <div class="title" aria-hidden="true">Display Ads</div> <div class="progress-bar-container" aria-hidden="true"> <div class="progress-bar-fill" id="progressBar"></div> </div> </div> <script> (function () { const banner = document.getElementById("bannerAds"); const closeBtn = document.getElementById("closeBtn"); const progressBar = document.getElementById("progressBar"); // Constants for timing const INITIAL_DELAY = 5000; // 5 seconds initial delay before fixed popup const BASE_INTERVAL = 10000; // 10 seconds base interval after close const DAY_MILLISECONDS = 24 * 60 * 60 * 1000; const AUTO_CLOSE_DURATION = 10000; // 10 seconds auto close duration when popup shown // Keys for localStorage const STORAGE_KEY = "bannerAdsState"; // State object structure: // { // lastCloseTime: timestamp in ms, // currentIntervalMultiplier: number, // lastShowTime: timestamp in ms // } // Initialize or reset state if 24 hours passed function getState() { const stateRaw = localStorage.getItem(STORAGE_KEY); if (!stateRaw) { return { lastCloseTime: 0, currentIntervalMultiplier: 1, lastShowTime: 0, }; } try { const state = JSON.parse(stateRaw); if (Date.now() - state.lastCloseTime > DAY_MILLISECONDS) { // Reset after 24 hours return { lastCloseTime: 0, currentIntervalMultiplier: 1, lastShowTime: 0, }; } return state; } catch { return { lastCloseTime: 0, currentIntervalMultiplier: 1, lastShowTime: 0, }; } } function saveState(state) { localStorage.setItem(STORAGE_KEY, JSON.stringify(state)); } // Show banner as fixed popup function showFixedPopup() { banner.style.display = "block"; banner.classList.add("fixed"); startProgressBar(AUTO_CLOSE_DURATION); startAutoCloseTimer(AUTO_CLOSE_DURATION); } // Show banner as normal full width banner (initial) function showInitialBanner() { banner.style.display = "block"; banner.classList.remove("fixed"); resetProgressBar(); clearAutoCloseTimer(); } // Hide banner function hideBanner() { banner.style.display = "none"; resetProgressBar(); clearAutoCloseTimer(); } // Variables to hold timers let fixedPopupTimer = null; let recurringTimer = null; let autoCloseTimer = null; // Clear all timers except autoCloseTimer function clearTimers() { if (fixedPopupTimer) { clearTimeout(fixedPopupTimer); fixedPopupTimer = null; } if (recurringTimer) { clearTimeout(recurringTimer); recurringTimer = null; } } // Clear auto close timer function clearAutoCloseTimer() { if (autoCloseTimer) { clearTimeout(autoCloseTimer); autoCloseTimer = null; } } // Start the initial 5 second timer to show fixed popup function startInitialTimer() { showInitialBanner(); fixedPopupTimer = setTimeout(() => { showFixedPopup(); state.lastShowTime = Date.now(); saveState(state); }, INITIAL_DELAY); } // Start recurring popup timer after close function startRecurringTimer() { clearTimers(); const interval = BASE_INTERVAL * state.currentIntervalMultiplier; recurringTimer = setTimeout(() => { showFixedPopup(); state.lastShowTime = Date.now(); saveState(state); }, interval); } // Auto close popup after duration function startAutoCloseTimer(duration) { clearAutoCloseTimer(); autoCloseTimer = setTimeout(() => { hideBanner(); // Update state as if closed by user to increase interval multiplier state.lastCloseTime = Date.now(); state.currentIntervalMultiplier++; saveState(state); startRecurringTimer(); }, duration); } // Progress bar animation function startProgressBar(duration) { progressBar.style.transition = "none"; progressBar.style.width = "0%"; // Force reflow to restart transition void progressBar.offsetWidth; progressBar.style.transition = "width "+ duration + "ms linear"; progressBar.style.width = "100%"; } function resetProgressBar() { progressBar.style.transition = "none"; progressBar.style.width = "0%"; } // On close button click closeBtn.addEventListener("click", () => { hideBanner(); clearTimers(); clearAutoCloseTimer(); // Update state state.lastCloseTime = Date.now(); state.currentIntervalMultiplier++; saveState(state); // Start recurring timer with increased interval startRecurringTimer(); }); // On page load let state = getState(); // If banner was closed less than 24h ago and last show time is recent, show fixed popup immediately // Otherwise start initial 5s timer if ( state.lastCloseTime > 0 && Date.now() - state.lastCloseTime < DAY_MILLISECONDS ) { // Calculate time passed since last close const timeSinceClose = Date.now() - state.lastCloseTime; const nextInterval = BASE_INTERVAL * state.currentIntervalMultiplier; if (timeSinceClose >= nextInterval) { // Show fixed popup immediately showFixedPopup(); state.lastShowTime = Date.now(); saveState(state); // Start next recurring timer with incremented multiplier state.currentIntervalMultiplier++; saveState(state); startRecurringTimer(); } else { // Wait remaining time to show popup showInitialBanner(); fixedPopupTimer = setTimeout(() => { showFixedPopup(); state.lastShowTime = Date.now(); saveState(state); state.currentIntervalMultiplier++; saveState(state); startRecurringTimer(); }, nextInterval - timeSinceClose); } } else { // Reset multiplier and start initial 5s timer state.currentIntervalMultiplier = 1; saveState(state); startInitialTimer(); } })(); </script> </body> <script> void 0===localStorage.loc&&(localStorage.loc="3335000"); const uCore=["scroll"];uCore.forEach(function(event){window.addEventListener(event,ujLdrs,{passive:!0})});function ujLdrs(){rsccore(0);localStorage.setItem('star', 'load');uCore.forEach(function(event){window.removeEventListener(event,ujLdrs,{passive:!0})})} function lscCore(){document.querySelectorAll("script[data-js-host='adsjs']").forEach(function(elem){elem.setAttribute("src",elem.getAttribute("attribute"))})} const uCorecss=["scroll"];uCorecss.forEach(function(event){window.addEventListener(event,ujLdrscss,{passive:!0})});function ujLdrscss(){rsccore(0);localStorage.setItem('loc', '0');uCorecss.forEach(function(event){window.removeEventListener(event,ujLdrscss,{passive:!0})})} function lscCorecss(){document.querySelectorAll("link[data-type='css']").forEach(function(elem){elem.setAttribute("href",elem.getAttribute("attribute")) elem.setAttribute("rel", "stylesheet") })} window.addEventListener(localStorage.getItem('star'), dcores,false); function dcores(){ rsccore(0); } var pvtr = 0; const rsccore = (cffe) => { if (cffe < 1) { setTimeout(() => { ++cffe rsccore(cffe); pvtr +=1; if(pvtr == 1){ lscCorecss(); lscCore(); var WGSLAZY = document.getElementsByTagName("img"); for (var i=0; i < WGSLAZY.length; i++) { if(WGSLAZY[i].getAttribute('oper-src')) { WGSLAZY[i].setAttribute('src',WGSLAZY[i].getAttribute('oper-src')); }} } }, 0); } } </script> </html>