はじめて質問します。よろしくお願いします。
JavaScriptを使ってリンク付の画像を所定の時間に切り替える方法を教えてください。
具体的には
10:00~11:30 は A.jpg を表示。 クリックすると A.dpl というプレイリストを実行。
11:30~15:00 は B.jpg を表示。 クリックすると B.dpl というプレイリストを実行。
15:00~19:00 は C.jpg を表示。 クリックすると C.dpl というプレイリストを実行。
19:00~22:00 は D.jpg を表示。 クリックすると D.dpl というプレイリストを実行。
この時間、画像、リンクは後々変更したいので変更箇所が少なくすむ管理しやすいものにしたいです。
また、これとは別で画像はA.jpgのみでリンクだけを時間によって変えるということは可能でしょうか?
すみませんが、ご教授お願いします。
No.1ベストアンサー
- 回答日時:
連休中なので、回答がないのかな…
>リンク付の画像を所定の時間に切り替える方法を教えてください
その時の時間は new Date() で取得できますので、その時間と指定した時間帯を比較して表示する内容を制御すればよろしいかと思います。
ただし、new Date()だとローカルPCの時間設定に依存することになるので、もっと正確に行ないたい場合は、サーバや外部のサービスなどから時間を取得することになります。(過去の質問にあったと思います)
Date()関数に関しては、とりあえずこのあたりを
http://www.tohoho-web.com/js/date.htm
>リンクは後々変更したいので変更箇所が少なくすむ管理しやすいものにしたいです。
方法としてすぐに思いつくのは、データを配列で最初に定義しておく方法か、HTMLに直接書いておく方法。
前者の場合は、時間帯に応じてその要素の属性(例えばA要素のhrefやimg要素のsrcなど)を書換えてあげればよろしいかと。
後者の場合は、必要な要素だけ表示して残りは非表示にするような制御でいけるかと思います。
どちらが、変更しやすいかは考え方にもよるので…
DOM操作に関しては、このあたりをきっかけに検索してみては
http://javascriptist.net/docs/pract_dom.html
http://www.yscjp.com/doc/dom1.html
>画像はA.jpgのみでリンクだけを時間によって変えるということは可能でしょうか
可能です。
最初のご質問のものをそのまま利用して(全時間帯とも画像が同じ)もできますし、最初からそれでよいならスクリプトを少し簡単にすることもできます。
ご質問文では、時間帯指定の無い時間はどうするのか書いてありませんが、そのあたりの処理も必要になるでしょう。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- その他(パソコン・スマホ・電化製品) アンドロイドスマホの画面にクリックするとJPG写真が開くショートカットを作りたいのですが、方法をおし 3 2023/08/27 10:01
- Windows 8 Route Generator の使い方 1 2023/05/03 00:36
- Excel(エクセル) excelで検索した商品の画像(ネットワーク上の)を表示させたい。 3 2023/06/28 00:32
- Excel(エクセル) EXCELのグラフを画像(JPG形式)で保存、通常実行がうまく行かない。ステップインはうまく行く 3 2022/08/30 12:06
- Visual Basic(VBA) ExcelのVBAコードについて教えてください。 1 2023/04/21 13:46
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- X(旧Twitter) ツィッターの画像表示について 1 2023/08/17 09:28
- その他(ブラウザ) IE・edgeで日増しに観られるサイトが減ってくる。 1 2022/10/04 22:40
- Excel(エクセル) Excel 毎日手作業で時間がかかって、泣きたいです、、、VBAのプロの方、助けてください。。。 3 2022/10/25 04:26
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プログラムについて。
-
スマホ上で、左右スワイプで次...
-
初心者です。gulpでコンパイル...
-
プログラムがうまく動きません...
-
jsで質問です。 displayプロパ...
-
【Google Apps Script】「ライ...
-
console.logがどうしても2つ機...
-
指定時間になったら、WEBサイト...
-
Googleフォームで選択肢に応じ...
-
セレクトを全て選択されていな...
-
イラストレーター、縦中横のシ...
-
sessionStorageを調べています。
-
コードレビューをお願いします。
-
セレクトボックスで配列を呼び...
-
jsで、配列内の文章を改行する...
-
jQueryで同じクラス名のものを...
-
HTMLタグに複数のクラスを設定...
-
コードレビューをお願いします。
-
IndexedDB を使ってファイルア...
-
画面遷移を行わずに同一ページ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
var exports = exports || {}; ...
-
HTMLタグに複数のクラスを設定...
-
jsで質問です。 displayプロパ...
-
画面遷移を行わずに同一ページ...
-
Googleフォームで選択肢に応じ...
-
特定の文字列を複数抜き出した...
-
フロントエンドフレームワーク...
-
変数名をどのようにつけるのが...
-
【JS】selectでchangeした時の...
-
React hooksが値を返して配列変...
-
オブジェクトから任意のプロパ...
-
指定時間になったら、WEBサイト...
-
Colorboxがうまく設置できません
-
二次元配列の中の各行の要素を...
-
読み込んだQRコードをフォーム...
-
IndexedDB を使ってファイルア...
-
HTMLで作った時報アプリが動き...
-
GASに文字列として関数を入れる...
-
GASでGoogleフォームの自動返信...
-
①入力フォーム→②確認表示画面→③...
おすすめ情報