お休みの期間インフォメーションの変更のためだけに休日出勤・・・
ご自宅でパソコン開いて・・・・あ、ファイルがないよ・・・・
そんな経験はありませんか。
ほかにも
「8月1日～8月15日の期間だけ宣伝したい
でも16日になった瞬間消したい！！」
結構あると思います。
今回は実際に私がお客さんに提供しているスクリプトを公開します。
そのまま、コピーすれば使える！ようにキチンと説明しますね。
———————↓-キ-リ-ト-リ————————-
<SCRIPT type=”text/JavaScript”>
<!–
// お知らせ期間 から～まで
var start = 20060301;
var limit = 99999999;
// お知らせ文言パターン１ 期間中のメッセージ
var pat1 = “本日、バーゲン開催中！”;
// お知らせ文言パターン２ 期間外のメッセージ
var pat2 = “”;
thisDate = new Date();
// 年を取得
year = “”.concat(thisDate.getFullYear());
// 月を取得
month = “”.concat(thisDate.getMonth() + 1);
// 日を取得
day = “”.concat(thisDate.getDate());
// 1～9月は 01～09 のように2桁にする
if (month < 10) {
month = “0” + month;
}
// 1～9日は 01～09 のように2桁にする
if (day < 10) {
day = “0” + day;
}
// 日付を8桁にする 例）20060820
dateStr = year + month + day;
// 今日の日付が 開始日 と 終了日 の間にあればパターン１を表示
if (start <= dateStr && dateStr <= limit) {
document.write(pat1);
} else {
// 今日の日付が 開始日 と 終了日 の間になければパターン２を表示
document.write(pat2);
}
–>
</SCRIPT>
———————↑-キ-リ-ト-リ————————-
このサンプルをコピーし、日付によって表示を変更したい場所に
貼り付けます。
上から三行目の「// お知らせ期間 から～まで」
の下にある
var start = 20060301; と
var limit = 99999999; を
変更することで「お知らせ対象期間」を変更します。
お知らせ内容の変更は
// お知らせ文言パターン１ 期間中のメッセージ
var pat1 = “本日、バーゲン開催中！”;
// お知らせ文言パターン２ 期間外のメッセージ
var pat2 = “”;
の部分の↓この「○」の部分を変更します。
var pat1 = “○○○○○○○○○○○○○○”;
var pat2 = “○○○○○○○○○○○○○○”;
▼ サンプルを作成しましたこちらからご覧下さい。
こちらでは実験しやすいように、訪れた方がキャンペーン期間を
決められるように加工してあります。
キャンペーン期間を今日を挟んでみたり外してみたりして試してください。
ＩＥをお使いの方は右クリックでソースを表示してみてください。
どのように挿入するか、見ていただければ参考になると思います。
このように・・・
○キャンペーン期間中のお知らせとそれ以外でお知らせを変更したいとき
○休業期間中のお知らせを期間限定で表示させたい時
など、様々な用途で使用できます。
「・・・でも、日付より時間で切り分けたい」
そんな用途も多いですよね。
今度は実際のHTMLファイルに出来るようにサンプルを作成しました。
下記を、○○.html としてファイルに保存すると挙動がわかります。
———————↓-キ-リ-ト-リ————————-
<HTML>
<HEAD>
<TITLE>お知らせ期間 開始～終了 サンプル</TITLE>
</HEAD>
<BODY>
<DIV ALIGN=”CENTER”>
<TABLE border=”0″ cellspacing=”1″ cellpadding=”0″ bgcolor=”#CCCCCC” width=”500″>
<TR bgcolor=”NAVY”>
<TD style=”color:#FFFFFF; font-size:14px; line-hegith:150%;”>
ただいまの時刻
<SCRIPT type=”text/JavaScript”>
<!–
thisDate = new Date();
// 時を取得
hour = “”.concat(thisDate.getHours());
// 分を取得
minute = “”.concat(thisDate.getMinutes());
// 1～9時は 01～09 のように2桁にする
if (hour < 10) {
hour = “0” + hour;
}
// 1～9分は 01～09 のように2桁にする
if (minute < 10) {
minute = “0” + minute;
}
document.write(hour + “：” + minute);
–>
</SCRIPT>
</TD>
</TR>
<TR bgcolor=”#FFFFFF”>
<TD>
<SCRIPT type=”text/JavaScript”>
<!–
// 開店時間 から～まで
var start = “1000”;
var limit = “1930”;
// お知らせ文言パターン１ 時間中のメッセージ
var pat1 = “只今、開店中！”;
// お知らせ文言パターン２ 時間外のメッセージ
var pat2 = “営業時間を過ぎております。またのお越しを心からお待ちしております。”;
thisDate = new Date();
// 時を取得
hour = “”.concat(thisDate.getHours());
// 分を取得
minute = “”.concat(thisDate.getMinutes());
// 1～9時は 01～09 のように2桁にする
if (hour < 10) {
hour = “0” + hour;
}
// 1～9分は 01～09 のように2桁にする
if (minute < 10) {
minute = “0” + minute;
}
// 時間を4桁にする 例）0800
timeStr = hour + minute;
// 時刻が 開店時間 の間にあればパターン１を表示
if (start <= timeStr && timeStr <= limit) {
document.write(pat1);
} else {
// 時刻が 開店時間 の間になければパターン２を表示
document.write(pat2);
}
–>
</SCRIPT>
</TD>
</TR>
</TABLE>
</DIV>
</BODY>
</HTML>
———————↑-キ-リ-ト-リ————————-
▼ このサンプルはこちらから確認できます。
こちらはサンプルのまま挙動しておりますので
１０：００～１９：３０ と それ以外の時間帯 で
見比べてみてください。
注意事項としましては、この表示は「お客様のご使用のパソコンによる」
ものだということをしっかり覚えておいてください。
お客様のパソコンの時計が狂っていますと
そのまま誤った表示を行ってしまいます。
サンプルをうまく活用し
「無人で出来る変更作業」でちょっと楽になってください！
———————————————————————-
この内容は
私が発行しているメルマガ 「なるほど！よくわかる！ホームページ運営」にて掲載したものです！
毎週木曜日発行のメルマガ
「なるほど！よくわかる！ホームページ運営」ご購読希望の方は
↓フォームよりご登録下さい！よろしくお願いいたします。
