つらい・・・

画像をある特定の時間のみ、毎日表示させる方法について

締切済

質問者：まつまつ
質問日時：2015/06/08 13:29
回答数：4件

お店のホームページにタイムセール用クーポンを表示したいのですがどうしたらいいのでしょうか？

ご存知の方、いらっしゃいましたらお教え願えますか。
よろしくお願い致します。

【内容】-----------------------------------------------------------
12：00-14：00はAクーポン画像を
夜21：00-翌1：00まではBクーポン画像を

自動的に毎日表示させたい
時間外は非表示。
------------------------------------------------------------------

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.1

回答者： yambejp
回答日時：2015/06/08 14:26

厳密にはサーバー側のプログラムで画像のオンオフをきりかえないと厳しいですね

またブラウザにはキャッシュという機能があるのが一般的なので
サーバー側の意図とは反してユーザーが見える画像が古かったりする場合もあります。

基本的にはサーバーで切りかえるとして
画像には該当する時間帯しか有効でないという注記を書いておく必要があるでしょう

- 1
- 件

通報する

この回答へのお礼

yambejp様

コメントありがとうございます。
そうなのですね。

初心者なもので、サーバーの切り替えが良くわかりません。
もう少し勉強します。
ありがとうございます。

通報する

お礼日時：2015/06/08 18:14

No.2

回答者： artoo
回答日時：2015/06/08 22:53

こんな感じで。

<!DOCTYPE html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>タイトル</h1>
<div id="here">ここに画像が入る</div>

<script>
var hh=(new Date()).getHours();
if(hh==12||hh==13){
var img = document.createElement("img");
img.setAttribute("src", "AAAAAA.jpg");
var div = document.getElementById("here");
div.appendChild(img);
}
if(hh>=21||hh==0){
var img = document.createElement("img");
img.setAttribute("src", "BBBBB.jpg");
var div = document.getElementById("here");
div.appendChild(img);
}
</script>
</body>

- 1
- 件

通報する

No.3

回答者： DoubtOwl
回答日時：2015/06/09 11:02

No.2の回答でいいのですが、そのままだと使用しているコンピュータの時刻が表示されます。

つまり、閲覧者がパソコンの時間を故意にずらす、また意図せずにずれていた場合、正しい画像が表示されません。

情報通信機構のサービスで標準事項を取得できます。
インターネットに接続できる環境であればこちらをお使いください。
http://www.nict.go.jp/JST/http.html

- 1
- 件

通報する

No.4

回答者： ORUKA1951
回答日時：2015/06/10 19:27

ごく簡単なサーバーサイドスクリプト(

http://ja.wikipedia.org/wiki/%E3%82%B5%E3%83%BC% … )を書いておくのが一番簡単です。
　例えば、
message.gif
　というファイルを作ります。これは画像ではなく単なるテキストのプログラムです。Perlが情報が多く扱いやすいでしょう。拡張子は関係ない。
　このファイルには実行権限を与えておきます。

内容は
#/usr/local/bin/perl
と使用する言語を呼び出して
localtime関数で時間を取得して
その時間に必要な画像をそのまま出力する。
冗長に書いても最大で２０行もあれば・・
　⇒beginners CGI　 - CGI からの画像表示 -( http://www.aimix.jp/cgi/syohoimgview.html )
とか・・
　⇒Perl 時間によって画像を変える CGI - Google 検索( https://www.google.co.jp/search?q=Perl%20%E6%99% … )