[jQuery]時間帯で切り替えるギミック

営業時間内だけアクティブ、みたいなね。

完成イメージ
やる
曜日の限定
祝日は？
特定日は？

完成イメージ

WEBサイトに電話番号を掲載する。スマホだと電話番号から自動的にリンクが生成されたりするんだけど、単純に考えたらちょっと嬉しいんだけど、24時間対応じゃなかったら意味ないよねって見方もある。だったら自分でリンクを作っちゃって、営業時間内だけリンクが生きてる状態にすればいいじゃん、時間外だったらポップアップでアナウンスを表示すればいいじゃん、みたいなね。

やる

「毎日○時～○時まで」で作るとする。

<a href="tel:00011112222" class="timelimitTel" data-start="9" data-end="22">000-1111-2222</a>
受付時間：9:00～22:00

対象を取れるようにclassをつけて、data属性を使って開始と終了の時間を入れる。

$(function(){
    if($('.timelimitTel').length){
        $('.timelimitTel').each(function(){
            var startTime = $(this).data('start');
            var endTime = $(this).data('end');
            var now = new Date();
            var nowHour = now.getHours();
            $(this).on('click',function(){
                if(nowHour >= startTime && nowHour < endTime){
                    //時間内
                }else{
                    //時間外
                    alert('現在は受付時間外です。\n受付時間内に改めてお掛け直しください。');
                    return false;
                }
            })
        })
    }
})

まず.lengthでページ内の有無をチェックして、ページ内に複数あったらそれぞれで発火できるように.each()を噛ませる。

「○時～○時」がルールだから、現在の時刻を拾ってきてその部分だけ比較すれば良い。「9:00～」だから「以上（>=）」と、「～22:00」だから「未満（<）」を条件にする。

時間外だったらalertでアナウンスして、<a>を無効化。

時間外だけ書く場合はこう。

                if(!(nowHour >= startTime && nowHour < endTime)){
                    alert('現在は受付時間外です。\n受付時間内に改めてお掛け直しください。');
                    return false;
                }

曜日の限定

平日のみの場合、土日を除かないといけない。

まずhtmlに受付の曜日を入れる。

<a href="tel:00011112222" class="timelimitTel" data-start="9" data-end="22" data-day="['月', '火', '水', '木', '金']">000-1111-2222</a>
受付時間：9:00～22:00（月～金）

jsで現在の曜日を拾って、受付の曜日に含まれているのかチェック。

$(function(){
    if($('.timelimitTel').length){
        $('.timelimitTel').each(function(){
            var startTime = $(this).data('start');
            var endTime = $(this).data('end');
            var now = new Date();
            var nowHour = now.getHours();
            var dataDay = $(this).data('day');
            var day_arr = ['日', '月', '火', '水', '木', '金', '土'];
            var day = day_arr[now.getDay()];
            var dayCheck = true;
            if($.inArray(day, dataDay) < 0){
                dayCheck = false;
            }
            $(this).on('click',function(){
                if(!(dayCheck == true && nowHour >= startTime && nowHour < endTime)){
                    alert('現在は受付時間外です。\n営業時間帯に改めてお掛け直しください。\nWEBフォーム、LINEからのお問い合わせは24時間受け付けております。');
                    return false;
                }
            })
        })
    }
})

data属性は配列を扱えるんで楽。配列の照合は、含まれてなかったら「-1」を返す。だから判定の条件は「== -1」でもいい。

こんな感じで最後の条件に「表示する場合」を&&でつなげまくれば良い。