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>

0 komentar :

Posting Komentar

Silakan tinggalkan komentar, kritik, saran 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