Cara Membuat Countdown Timer Dengan JavaScript

Cara Membuat Countdown Timer Dengan JavaScript ~ Cara membuat countdown timer link download hitungan mundur. Cara Membuat Countdown Timer Dengan redirect link kehalaman tertentu. Halo sobat semuanya, kali ini cara singkat akan membahas mengenai 3 judul sekaligus dengan topik membuat javascript coundown timer. Sebenarnya apasih tujuan orang membuat Countdown Timer JavaScript ? mari kita bahas…

Fungsi Countdown Timer Javascript

Sebenarnya Fungsi dari countdown timer sendiri sangat banyak sekali, sesuai dengan kata countdown yang berarti hitungan mundur adalah memberikan jeda waktu sampai batas waktu yang ditentukan berakhir. dan kemudian dilanjutkan dengan fungsi utamanya bisa mengalihkan link atau memunculkan link, atau membuat sebuah jam, atau bisa juga menjadi stopwatch atau fungsi lain seperti hitungan waktu.

Cara Membuat Countdown Timer Dengan JavaScript

mungkin anda pernah melihat sebuah link downlad yang sebelumnya ada muncul detik hitungan mundur yang pada saat habis maka muncul tombol buton link yang menuju kearah link yang sebenarnya. atau mungkin anda juga pernah melihat waktu jam atau detik didalam sebuah blog atau pun stopwatch timer pada sebuah blog.

Sebenarnya pembuatan Countdown timer bisa dilakukan dengan berbagai macam bahasa yan mendukung seperti HTML, PHP, Phyton Maupun Javascript. pada kesempatan kali ini admin akan membahas tentang pembuatannya melalui jaavascript. Kenapa ?? karna bisa diterapkan dimana saja, serta pembuatan dan pengujian nya juga tidak terlalu sulit. selain itu juga bisa support di platform manapun dan bisa diletakan di web maupun di blog anda.. Lalu sebenarnya bagaimanakah pembuatannya apakah sangat sulit sekali ? Jawabannya Tidak malah dalam membuat countdown timer dengan javascript sangatlah mudah sekali.

Penasaran dengan bagaimana cara pembuatannya ?? mari simak langkahnya berikut ini :

Kode ini bisa anda terapkan dimana saja dipostingan blogger atau dihalaman page web atau blog

#1. Cara Membuat Countdown Timer Dengan JavaScript (Hari,Jam,Menit, Detik )

<!– countdown timer namabloganda.com –>
<p id=”carasingkat”></p>
<script>
// Silahkan anda atur tanggal anda
var countDownDate = new Date(“Sep 5, 2018 15:37:25”).getTime();
// Hitungan Mundur Waktu Dilakukan Setiap Satu Detik
var x = setInterval(function() {
// Mendapatkan Tanggal dan waktu Pada Hari ini
var now = new Date().getTime();
//Jarak Waktu Antara Hitungan Mundur
var distance = countDownDate – now;
// Perhitungan waktu hari, jam, menit dan 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 hasilnya di elemen id = “carasingkat”
document.getElementById(“carasingkat”).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>

DEMO

#2. Cara Membuat Countdown Timer Dengan JavaScript (Redirect/Pengalihan Link )

<html>
<head>
<title>cara singkat</title>
</head>
<body>
<div id=”carasingkat”>
</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; // dalam detik
function countDown() {
if (count > 0) {
count–;
var waktu = count + 1;
$(‘#carasingkat’).html(‘<b>Halaman Ini Akan Otomatis Di Redirect KE </b> ‘ + url + ‘ dalam ‘ + waktu + ‘ detik.’);
setTimeout(“countDown()”, 1000);
} else {
window.location.href = url;
}
}
countDown();
</script>
</body>
</html>

DEMO

#3. Cara Membuat Countdown Timer Dengan JavaScript (Waktu yang 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;
}

DEMO

Demikianlah tutorial kali ini mengenai Cara Membuat Countdown Timer JavaScript Semoga informasi ini apat membantu anda 😀

Leave a Reply