Cara menggunakan simple timer javascript

hai hai hai... Selamat datang kembali sobat hehehe.. Jika pada postingan sebelumnya saya sudah berbagi cara membuat jam digital menggunakan javascript. Nah, pada kesempatan kali ini saya akan berbagi tutorial kebalikan dari postingan sebelumnya nih, yaitu bagaimana cara membuat countdown timer menggunakan javascript.

Sebenarnya untuk scriptnya sendiri hampir mirip dengan script jam digital yang kemarin kok sob, hanya saja, pada kasus countdown timer kita harus melakukan pengurangan dari jam / waktu yang sudah kita tentukan dengan waktu sekarang.

Bagaimana sih cara membuatnya ?

Sepertinya sobat semua sudah penasaran ya hehe.. baik sobat langsung saja kita ke inti dari postingan kali ini. Untuk membuat sebuah countdown timer silahkan sobat ikuti langkah-langkah di bawah ini :

Buat sebuah file index

Disini sobat bisa membuat file dengan extensi .html ya, karena pada tutorial kali ini kita tidak akan berhubungan dengan database kok sob.

Script HTML

Jika sudah membuat sebuah file index, untuk langkah selanjutnya silahkan sobat ketikkan script berikut ini pada file index yang baru saja sobat buat tadi

Script CSS

Agar tampilannya lebih menarik, silahkan tambahkan script css berikut ini tepat di atas tag pada file index tadi ya sob

Script JavaScript

Untuk langkah yang terakhir, silahkan sobat tambahkan code Javascript di bawah ini tepat di atas tag pada file index yang tadi.

Jika semua step sudah sobat lakukan, sekarang silahkan sobat simpan dan jalankan file index tersebut dengan mendouble click file-nya.. untuk hasilnya akhirnya kurang lebih seperti pada gambar di atas ya sob.

Nah gimana sobat? mudah bukan.. Oh iya sobat bisa merubah tanggal deadline sesuai keinginan sobat ya. Yang perlu sobat ingat adalah format penulisan tanggalnya saja harus sesuai. Oke sobat, saya rasa cukup ini tutorial yang bisa saya bagi kali ini, semoga sedikit coretan ini bisa bermanfaat buat sobat semua. Oh iya, silahkan share jika dirasa artikel ini bermanfaat bagi yang lain ya.. Happy Coding

  • Fungsi Countdown Timer
    • #1. Cara Membuat Countdown Timer Dengan JavaScript [Hari,Jam,Menit, Detik ]
    • #2. Cara Membuat Countdown Timer Dengan JavaScript [Redirect/Pengalihan Link ]
    • #3. Cara Membuat Countdown Timer Dengan JavaScript [Waktu yang tersisa/Waktu tunggu ]

Cara Membuat Countdown Timer Dengan JavaScript  atau Cara membuat countdown timer link download hitungan mundur. Cara Membuat Countdown Timer Dengan redirect link kehalaman tertentu. Halo sobat blogger kali ini jagoankode akan membahas mengenai 3 judul sekaligus dengan topik membuat javascript coundown timer. Sebenarnya apasih tujuan orang membuat count down timer ? mari kita bahas

Fungsi Countdown Timer

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.

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 ]


// 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];

#2. Cara Membuat Countdown Timer Dengan JavaScript [Redirect/Pengalihan Link ]


    
        cara singkat
    
    
        
var url = "//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['Halaman Ini Akan Otomatis Di Redirect KE ' + url + ' dalam ' + waktu + ' detik.']; setTimeout["countDown[]", 1000]; } else { window.location.href = url; } } countDown[];

#3. Cara Membuat Countdown Timer Dengan JavaScript [Waktu yang tersisa/Waktu tunggu ]

HTML



Time left =

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] {sec = "0" + sec}; // add zero in front of numbers < 10
  if [sec < 0] {sec = "59"};
  return sec;
}

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

You may also like

About the author

Pengetahuan adalah kebebasan, dan ketidaktahuan adalah perbudakan.

Bài mới nhất

Chủ Đề