JavaScriptでキャンペーンでよく使うカウントダウンタイマーを作る

キャンペーンなどで期限が決まっている場合にあと何日までかを表示したいという要望が来ることもあると思います。

そんなときはjavascritpを使いカウントダウンタイマーを入れてみましょう。

未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

カウントダウンタイマー

js

function Countdown(elm,tl,mes){
        this.initialize.apply(this,arguments);
}

Countdown.prototype={
        initialize:function(elm,tl,mes) {
                this.elem = document.getElementById(elm);
                this.tl = tl;
                this.mes = mes;
        },countDown:function(){
                var timer='';
                var today=new Date();
                var day=Math.floor((this.tl-today)/(24*60*60*1000));
                var hour=Math.floor(((this.tl-today)%(24*60*60*1000))/(60*60*1000));
                var min=Math.floor(((this.tl-today)%(24*60*60*1000))/(60*1000))%60;
                var sec=Math.floor(((this.tl-today)%(24*60*60*1000))/1000)%60%60;
                var milli=Math.floor(((this.tl-today)%(24*60*60*1000))/10)%100;
                var me=this;
                if( ( this.tl - today ) > 0 ){
                        if (day) timer += '<span class="countdown-day">'+day+'日</span>';
                        if (hour) timer += 'と<span class="countdown-hour">'+hour+'時間</span>';
                        timer += '<span class="countdown-min">'+this.addZero(min)+'分</span>';
                        timer += '<span class="countdown-sec">'+this.addZero(sec)+'秒</span>';
                        timer += '<span class="milli">'+this.addZero(milli)+'</span>';
                        this.elem.innerHTML = timer;
                        tid = setTimeout( function(){me.countDown();},10 );
                }else{
        return;
        }
        },addZero:function(num){ return ('0'+num).slice(-2); }
}

function Countdown_start(){
        var tlstart = new Date('2020/08/04 21:00:00'); //開始日時を設定
        var tlstart_countdown=1; //開始までカウントダウンなし(0)またはカウントダウンあり(1)
        var tl = new Date('2021/08/10 18:00:00'); //終了日時を設定
        var today=new Date();
        if(tlstart<today){
                var timer = new Countdown('Countdown_start',tl,'');
        }else{
                if(tlstart_countdown==1){
                        var timer = new Countdown('Countdown_start',tlstart,'');
                }else{
        return;
        }  
}
timer.countDown();
}
Countdown_start();

サンプル

それではサンプルを見てみましょう。

未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

jQuery
スポンサーリンク
blogをフォローする
フロントエンジニア&コーダーのためのマテリアルブログ

コメント

タイトルとURLをコピーしました