2013

3

7

『jQueryで指定日の指定時刻に切り替え処理してやんよ!!!』

スポンサードリンク


普段htmlファイルに記述しているリンクURLや設置画像などの記述を指定した日付の期間で、尚且つ指定した時間に切り替わる様な処理をしたい場合を想定して作りたい。

・・・何時作るの?・・・・『今でしょ!!!!』

リアルタイムの日付&時刻と指定日&指定時間を変数に代入

HTMLの記述


    <a href="yanyo.html">
        <img alt="ときどきやんよ" src="yanyo.jpg" width="500" height="210" />
    </a>

JavaScriptの記述

var slot = new Array('指定開始日','指定終了日','処理開始時間');     //new Array('1201','1203','2030');
var today = new Date();         //今現在の年・月・日・時・分・秒を取得
var day = today.getDate();      //todayから日付の取得
var hour = today.getHours();   //todayから現時刻の取得</pre>
$(function(){
 //指定日期間以外の日付の場合の処理
 if(!(day >= slot[0] && day <= slot[1])){ 
 $("#yabyo a").attr("href","yanyo.html");
 $("#yanyo img").attr("src","yanyo.jpg");
 $("#yanyo img").attr("alt","ときどきやんよ");
 //指定日期間に入ってる場合の処理
 }else if(!(hour >= slot[02])){
 $("#yanyo a").attr("href","kyou_yanyo.html");
 $("#yanyo img").attr("src","kyou_yanyo.jpg");
 $("#yanyo img").attr("alt","今日やんよ");
 //指定日期間の指定時間になった場合の処理
 }else{
 $("#yanyo a").attr("href","ima_yanyo.html");
 $("#yanyo img").attr("src","ima_yanyo.jpg");
 $("#yanyo img").attr("alt","今やんよ!!!");
 }
});

変数slotを新規配列で定義し、指定開始日・指定終了日・処理開始時間をそれぞれ引数に指定。
12月1日から12月3日までの処理を午後8時半に開始の場合は
new Array(‘1201‘,’1203‘,’2030‘);
と記述。)

これでトイレ中でも外でのデート中でも指定時間に安心して切り替え作業はお任せ♪

※ただし、あくまでクライアントサイドの処理なのでユーザーのPCやスマホの設定時刻がリアルタイムじゃないと動作しないです。

トップへ