Sabtu, 12 Juni 2010

Membuat Count Down (hitung Mundur) dengan AJAX (javascript) dan CSS


Hmm blogger semua pasti tahu dong widget yang satu ini. ya Countdown. Widget yang satu ini bisa dipasang pada blog. Tampilannya ada yang flash ada juga yang memakai php ada juga yang memakai javascript. Nah tutorial kali ini kita akan memasang widget count down tersebut yang dibuat dengan javascript dan dipercantik dengan CSS. Contohnya anda bisa lihat di bawah, disamping aquarium blog ini.
Pertama-tama copy script berikut ini dan letakkan di atas tag <HEAD>

Setelah selesai, tambahkan gadget berupa html/Javascript dan pastekan kode berikut ini :

Setelah itu simpan dan lihat blog Anda .......
Lho kok gak jalan ? heheh kelupaan script utamanya. Baiklah ini dia :

***********************************copy*********************************
    <script type="text/javascript">
        var Timer = {
            target: new Date("
Jul 27, 2010 00:00:00"),
           
            remaining: function() {
                var now = new Date();
                var then = Timer.target;
                var remaining = (parseInt(then.getTime()) - parseInt(now.getTime()));
               
                // return elapsed time in seconds
                return (remaining / 1000);
            },
           
            update: {
                days: function() {
                    var remaining = Timer.remaining();
                    return Math.floor((((remaining/60)/60)/24));
                },
               
                hours: function() {
                    var remaining = Timer.remaining();
                    return Math.floor(((remaining/60)/60) - (Timer.update.days() * 24));
                },
               
                minutes: function() {
                    var remaining = Timer.remaining();
                    return Math.floor((remaining/60) - (Timer.update.days() * 24 * 60) - (Timer.update.hours() * 60));
                },
               
                seconds: function() {
                    var remaining = Timer.remaining();
                    return Math.floor(remaining - (Timer.update.days() * 24 * 3600) - (Timer.update.hours() * 3600) - (Timer.update.minutes() * 60));
                },
               
                ui: function() {
                    var slide_days    = $('#days');
                    var slide_hours    = $('#hours');
                    var slide_mins    = $('#minutes');
                    var slide_secs    = $('#seconds');
                   
                    var days     = Timer.update.days();
                    var hours     = Timer.update.hours();
                    var minutes    = Timer.update.minutes();
                    var seconds    = Timer.update.seconds();
                   
                    if(seconds < 10) {
                        var str = '0' + seconds.toString();
                    } else {
                        var str = seconds.toString();
                    }
                   
                    slide_secs.find('.current').animate({'top': '50px'}, 250, function() {
                        $(this).remove();
                    });
                   
                    slide_secs.find('.next').show().html(str).animate({'top': '0px'}, 250, function() {
                        $(this).removeClass('next').addClass('current');
                        $('<div></div>').hide().addClass('digit').addClass('next').appendTo(slide_secs);
                    });
                   
                    if(slide_mins.find('.current').html().charAt(0) == '0') {
                        var slide_mins_html = parseInt(slide_mins.find('.current').html().charAt(1));
                    } else {
                        var slide_mins_html = parseInt(slide_mins.find('.current').html());
                    }
                   
                    if(slide_mins_html != minutes) {
                        if(minutes < 10) {
                            var str = '0' + minutes.toString();
                        } else {
                            var str = minutes.toString();
                        }
                       
                        slide_mins.find('.current').animate({'top': '50px'}, 250, function() {
                            $(this).remove();
                        });
                       
                        slide_mins.find('.next').show().html(str).animate({'top': '0px'}, 250, function() {
                            $(this).removeClass('next').addClass('current');
                            $('<div></div>').hide().addClass('digit').addClass('next').appendTo(slide_mins);
                        });
                    }
                   
                    if(slide_hours.find('.current').html().charAt(0) == '0') {
                        var slide_hours_html = parseInt(slide_hours.find('.current').html().charAt(1));
                    } else {
                        var slide_hours_html = parseInt(slide_hours.find('.current').html());
                    }
                   
                    if(slide_hours_html != hours) {
                        if(hours < 10) {
                            var str = '0' + hours.toString();
                        } else {
                            var str = hours.toString();
                        }
                       
                        slide_hours.find('.current').animate({'top': '50px'}, 250, function() {
                            $(this).remove();
                        });
                       
                        slide_hours.find('.next').show().html(str).animate({'top': '0px'}, 250, function() {
                            $(this).removeClass('next').addClass('current');
                            $('<div></div>').hide().addClass('digit').addClass('next').appendTo(slide_hours);
                        });
                    }
                   
                    if(slide_days.find('.current').html().charAt(0) == '0') {
                        var slide_days_html = parseInt(slide_days.find('.current').html().charAt(1));
                    } else {
                        var slide_days_html = parseInt(slide_days.find('.current').html());
                    }
                                       
                    if(slide_days_html != days) {
                       
                        if(days < 10) {
                            var str = '0' + days.toString();
                        } else {
                            var str = days.toString();
                        }
                       
                        slide_days.find('.current').animate({'top': '50px'}, 250, function() {
                            $(this).remove();
                        });
                       
                        slide_days.find('.next').show().html(str).animate({'top': '0px'}, 250, function() {
                            $(this).removeClass('next').addClass('current');
                            $('<div></div>').hide().addClass('digit').addClass('next').appendTo(slide_days);
                        });
                    }
                }
            }
        };
       
        $(document).ready(function() {
            var interval = setInterval("Timer.update.ui()", 1000);
           
            $('#signin').submit(function(evt) {
                if($('#username').val() == '' || $('password').val() == '') {
                    evt.stopPropagation();
                    evt.preventDefault();
                   
                    $('#username').focus();
                    return false;
                } else {
                    return true;
                }
            });
           
            $('#login').click(function() {
                $('#signin').submit();
                return false;
            });
        });
    </script>


*****************************selesai*******************************
Nah ganti tulisan yang berwarna biru dengan tanggal hari H nya. formatnya pake english ya.....
kalo gak tahu :
month day, year hour minute second

Setelah itu pastekan di atas tag <HEAD>

PERHATIAN

Sudah lebih dari satu tahun saya tidak mempunyai HP atau HH. Meskipun saya mempunyai modem dan kartu yang masih aktif, tapi saya tidak punya pulsa dan jarang mengisi kuota untuk membalas pesan, telepon ataupun komentar Anda. Jadi mulai hari ini sampai waktu yang tidak ditetapkan, segala bentuk komunikasi kepada saya hanya melalui email saja. Jika Anda ingin menghubungi saya karena keadaan darurat (misalnya minta bantuan FB kena hack), silahkan baca dan pahami link ini, jika Anda menginginkan respon dari saya.

Mohon maaf apabila ada pesan, komentar, dan permintaan teman di facebook yang belum/tidak terbalas. Harap maklum.


Terima kasih
Dadan Purnama


0 komentar:

Poskan Komentar

Silakan tinggalkan komentar, kritik, saran, spam atau apa saja yang penting sopan dan tidak SARA ya....

Jika ada pertanyaan atau request yang penting, bisa hubungi Admin di How to Contact

Terima kasih,
Dadan Purnama