Fungsi Countdown Timer
Sebenarnya Fungsi dari countdown timer sendiri sangat banyak sekali, sesuai dengan kata countdown nan berarti hitungan mundur ialah menawarkan jeda waktu hingga batas waktu nan dipastinyakan berakhir. juga kemudian dilanjutkan dengan fungsi utamanya sanggup mengalihkan link ataupun memunculkan link, ataupun membikin sebuah jam, ataupun sanggup juga jadinya stopwatch ataupun fungsi lain ibarat hitungan waktu.
sanggup saja kalian pernah melihat sebuah link downlad nan sebelumnya tersedia muncul detik hitungan mundur nan di ketika habis makanya muncul tombol buton link nan menuju kearah link nan sebenarnya. ataupun sanggup saja kalian juga pernah melihat waktu jam ataupun detik dididalem sebuah blog ataupun pun stopwatch timer di sebuah blog.
Sebenarnya pembuatan Countdown timer sanggup dikerjakan dengan banyak sekali macam bahasa yan mendukung ibarat HTML, PHP, Phyton Maupun Javascript. di kesempatan kaliitu admin mau membahas ihwal pembuatannya melalui jaavascript. Kenapa ?? karna sanggup diterapkan dimana saja, serta pembuatan juga pengujian nya juga belomterlalu sulit. selain itu juga sanggup support di platform manapun juga sanggup diletakan di web maupun di blog anda.. Lalu bergotong-royong bagaimanakah pembuatannya apakah sangat sulit sekali ? Jawabannya Tidak malah didalem membikin countdown timer dengan javascript sangatlah gampang sekali.
Penasaran dengan bagaimana tutor pembuatannya ?? mari simak langkahnya berikutitu :
Kodeitu sanggup kalian terapkan dimana saja dipostingan blogger ataupun dihalaman page web ataupun blog
#1. Cara Membuat Countdown Timer Dengan JavaScript (Hari,Jam,Menit, Detik )
<!-- countdown timer jagoankode.blogspot.com --> <p id="tutorsingkat"></p> <script> // Silahkan kalian atur tanggal anda var countDownDate = new Date("Sep 5, 2018 15:37:25").getTime(); // Hitungan Mundur Waktu Dikerjakan Setiap Satu Detik var x = setInterval(function() { // Mendapatkan Tanggal juga waktu Pada Hari ini var now = new Date().getTime(); //Jarak Waktu Antara Hitungan Mundur var distance = countDownDate - now; // Perhitungan waktu hari, jam, menit juga detik var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // Tampilkan jadinya di elemen id = "tutorsingkat" document.getElementById("tutorsingkat").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s "; // Jika hitungan mundur selesai, if (distance < 0) { clearInterval(x); document.getElementById("Carasingkat").innerHTML = "EXPIRED"; } }, 1000); </script>#2. Cara Membuat Countdown Timer Dengan JavaScript (Redirect/Pengalihan Link )
<html> <head> <title>tutor singkat</title> </head> <body> <div id="tutorsingkat"> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> var url = "http://jagoankode.blogspot.co.id/search/label/Article"; // url tujuan var count = 10; // didalem detik function countDown() { if (count > 0) { count--; var waktu = count + 1; $('#tutorsingkat').html('<b>Halaman Ini Akan Otomatis Di Redirect KE </b> ' + url + ' didalem ' + waktu + ' detik.'); setTimeout("countDown()", 1000); } else { window.location.href = url; } } countDown(); </script> </body> </html>#3. Cara Membuat Countdown Timer Dengan JavaScript (Waktu nan tersisa/Waktu tunggu )
HTML<html> <body> <div>Time left = <span id="timer"></span></div> </body> </html>CSS
body{ background-color:#2D3047; } div{ background-color:#419D78; color:#EFD0CA; font-size:20px; text-align:center; }JAVASCRIPT
document.getElementById('timer').innerHTML = 03 + ":" + 00; startTimer(); function startTimer() { var presentTime = document.getElementById('timer').innerHTML; var timeArray = presentTime.split(/[:]+/); var m = timeArray[0]; var s = checkSecond((timeArray[1] - 1)); if(s==59){m=m-1} //if(m<0){alert('timer completed')} document.getElementById('timer').innerHTML = m + ":" + s; setTimeout(startTimer, 1000); } function checkSecond(sec) { if (sec < 10 && sec >= 0) {sec = "0" + sec}; // add zero in front of numbers < 10 if (sec < 0) {sec = "59"}; return sec; }Demikianlah tutorial kaliitu mengenai Cara Membuat Countdown Timer Dengan JavaScript Semoga informasiitu apat meringankan kalian :)
Tidak ada komentar:
Posting Komentar