記事の詳細
JavaScriptで曜日ごとに文言の表示を変更する方法
「日替わり」や「期間限定」という言葉に弱いです、網干です。
飲食店やスーパーマーケットで曜日替わりのサービスをやっているお店をよく見かけます。
ですが、ホームページを見ても各曜日ごとにどのようなサービスがやっているのかわからない場合が多いです。
曜日替わりのサービスがホームページでも見られたら良いのになぁ、という思いも込めて、今回は曜日ごとに文言の表示を変更するJavaScriptのコードをご紹介致します。
記事の最後には使用例を記載しますので、楽にカスタマイズができると思います。
今回のブログの見出しはコチラです！
曜日替わりで表示を変更するJavaScriptコード
曜日替わりで文言を変更するコードは下記になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<script language="JavaScript"> <!-- var weeks = new Array('日','月','火','水','木','金','土'); var today = new Date(); // 日付オブジェクト取得 var week = weeks[today.getDay()]; // 曜日取得 var string = ''; // 文言格納用変数 switch(week) { case '日': // 日曜日の場合 string = '本日は日曜日です。'; break; case '月': // 月曜日の場合 string = '本日は月曜日です。'; break; case '火': // 火曜日の場合 string = '本日は火曜日です。'; break; case '水': // 水曜日の場合 string = '本日は水曜日です。'; break; case '木': // 木曜日の場合 string = '本日は木曜日です。'; break; case '金': // 金曜日の場合 string = '本日は金曜日です。'; break; case '土': // 土曜日の場合 string = '本日は土曜日です。'; break; default: // 曜日が取得できなかった場合 string = '曜日を取得できませんでした。'; break; } document.write( string ); --> </script> |
実際に使ってみると…
↑このように表示されます。
これで、曜日ごとに表示を変更することが可能になります！
では、以降は場面別でのコードの使用例を記載します。
使用例１：飲食店のメニューを曜日替わりで変更して表示する
↑のソースコードは下記になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<script language="JavaScript"> <!-- var weeks = new Array('日','月','火','水','木','金','土'); var today = new Date(); // 日付オブジェクト取得 var week = weeks[today.getDay()]; // 曜日取得 var string = ''; // 文言格納用変数 switch(week) { case '日': // 日曜日の場合 string = '本日、日曜日は特製オムライスが500円です！'; break; case '月': // 月曜日の場合 string = '本日、月曜日はハンバーグ定食が500円です！'; break; case '火': // 火曜日の場合 string = '本日、火曜日は海鮮丼が500円です！'; break; case '水': // 水曜日の場合 string = '本日、水曜日は定休日です。'; break; case '木': // 木曜日の場合 string = '本日、木曜日は特製トマトスパゲッティが500円です！'; break; case '金': // 金曜日の場合 string = '本日、金曜日は唐揚げ定食が500円です！'; break; case '土': // 土曜日の場合 string = '本日、土曜日は特製ビーフシチューが500円です！'; break; default: // 曜日が取得できなかった場合 string = '曜日を取得できませんでした。'; break; } document.write( string ); --> </script> |
使用例２：スーパーマーケットの曜日替わりサービスを曜日ごとに変更して表示する
↑のソースコードは下記になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<script language="JavaScript"> <!-- var weeks = new Array('日','月','火','水','木','金','土'); var today = new Date(); // 日付オブジェクト取得 var week = weeks[today.getDay()]; // 曜日取得 var string = ''; // 文言格納用変数 switch(week) { case '日': // 日曜日の場合 string = '本日、日曜日はパンの日！全品100円です！'; break; case '月': // 月曜日の場合 string = '本日、月曜日は鮮魚の日！サンマが一尾90円です！'; break; case '火': // 火曜日の場合 string = '本日、火曜日は青果の日！キャベツが一玉90円です！'; break; case '水': // 水曜日の場合 string = '本日、水曜日はお菓子の日！100円以上のチョコレートが全品30円引きです！'; break; case '木': // 木曜日の場合 string = '本日、木曜日はお肉の日！牛肉が1g1円です！'; break; case '金': // 金曜日の場合 string = '本日、金曜日はお惣菜の日！お惣菜が全品10%オフです！'; break; case '土': // 土曜日の場合 string = '本日、土曜日は冷凍食品の日！冷凍食品が全品半額です！'; break; default: // 曜日が取得できなかった場合 string = '曜日を取得できませんでした。'; break; } document.write( string ); --> </script> |
使用例３：映画館の曜日替わりサービスを曜日ごとに変更して表示する
↑のソースコードは下記になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<script language="JavaScript"> <!-- var weeks = new Array('日','月','火','水','木','金','土'); var today = new Date(); // 日付オブジェクト取得 var week = weeks[today.getDay()]; // 曜日取得 var string = ''; // 文言格納用変数 switch(week) { case '日': // 日曜日の場合 string = '本日、日曜日はレディースデー！女性のチケット料金は1000円になります！'; break; case '月': // 月曜日の場合 string = '本日、月曜日はアクション映画のチケット料金が1000円になります！'; break; case '火': // 火曜日の場合 string = '本日、火曜日はアニメーション映画のチケット料金が1000円になります！'; break; case '水': // 水曜日の場合 string = '本日、水曜日はホラー映画のチケット料金が1000円になります！'; break; case '木': // 木曜日の場合 string = '本日、木曜日はSF映画のチケット料金が1000円になります！'; break; case '金': // 金曜日の場合 string = '本日、金曜日はコメディ映画のチケット料金が1000円になります！'; break; case '土': // 土曜日の場合 string = '本日、土曜日はドキュメンタリー映画のチケット料金が1000円になります！'; break; default: // 曜日が取得できなかった場合 string = '曜日を取得できませんでした。'; break; } document.write( string ); --> </script> |
規則的に表示を変更したい場合は、プログラムを使用して自動化しちゃいましょう！
いかがでしたか？
今回のプログラムは「曜日替わりでサービスを提供しているけど、毎日のHPの更新が面倒！」となったときに使えそうですね。
ではまた！
この記事であなたの課題を解決することができましたか？
疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。
ほかの投稿も読んでみませんか？
コメント
この記事へのトラックバックはありません。
相模原のお店やサービスをどんどん紹介！
飲食店
サービス
この記事へのコメントはありません。