タイトル通りなのですが、色々と調べてみたのですがいまいちわからないといいますか、色々な方法もあるようで混乱しています。
お詳しい方アドバイスを頂けないでしょうか?
※カテJSにしていますがよくわからなく、何卒ご了承願います。
行いた事とはといいますと、index.htmlに表示される内容を変更したいという事になります。
調べた内容によると、時間になったら、index.htmlを準備していた、updata.htmlに丸ごと変えてしまうパターン。これはCRON??というもので更新を掛けるという内容でした。。
他には、ページ内の一部、
if(この時間まではこれを表示){
<body>~</body>
} elseif (この時間になったらこの内容に変更){
<body>内容が変更になってます!</body>
}
の様にページの一部をifなどで変更するような指定の参考を拝見いたしました。
しかしながら、いまいちわからず…。
もし可能であれば、CRON使わずに、まずはifとかで表示・非表示などを時間で切り替えできればと思うのですが、可能でしょうか?
※もし可能でありましたら、どういった方法で時限の切り替えを行うのが良いかアドバイスありましたらお願いいたします。CRONの方がいいよという事であればそちらで検討いたします。
簡単なPHPやjavascriptは何とか対応できると思います。
お詳しい方、アドバイスを頂けますと幸いです。
宜しくお願いいたします。
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
サーバー側で対処する PHP や cron が望ましいのですが、それができない場合はクライアント側で対処する JS を使うことになります。
案1. 複数の "update*.html" のいずれかへ転送する JS
一時間ごとにファイルを用意する場合の例
<script>
var h = new Date().getHours();
window.location = "update" + h + ".html";
</script>
案2. 複数の内容から一つだけを見せる JS
一時間ごとに内容を用意する場合の例
<style>
.update { display:none; } /* 通常は見せない */
.update.valid { display:block; } /* 該当だけ見せる */
</style>
<section class="update h0">0時の内容</section>
<section class="update h1">1時の内容</section>
...
<section class="update h23">23時の内容</section>
<script>
var h = new Date().getHours();
var s = 'section.update.h' + h;
var f = function(element){ element.classList.add('valid') };
document.querySelectorAll(s).forEach(f);
</script>
アドバイス感謝申し上げます。
>>サーバー側で対処する PHP や cron が望ましいのですが、
なるほどです、お詳しい方はやはりPHPなどサーバー再度側で行うのが良いとの判断という事で、この辺りの認識も大変参考になります。
サーバー再度での対応はもちろん可能なのですが、私自身が理解できていないのが問題です。
ただ、皆さんのアドバイスを拝見いたしますと、取得した時間の比較で判断するようなので、色々と試してみたいと思いました。
CRONも実際には使ったことが無かったので、この機会に思い切って試してみたいと思います!
No.2
- 回答日時:
JavaScriptならこういうイメージでしょうか。
参考:
https://developer.mozilla.org/ja/docs/Web/JavaSc …
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>date</title>
</head>
<body>
<script>
const date = new Date();
if(date.getHours() < 12) {
document.body.innerHTML = `<h1>午前中です</h1>`;
}else{
document.body.innerHTML = `<h1>午後です</h1>`;
}
</script>
</body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Visual Basic(VBA) ファイル全てを .xlsm に変更したところ、プログラムが途中で落ちてしまっています 17 2022/12/07 12:03
- 運転免許・教習所 免許の記載内容の変更と更新について 2 2022/04/30 18:37
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
- Visual Basic(VBA) 列と行の名前(重複あり)が交差するセルに、データを入力したい 1 2022/06/18 21:20
- HTML・CSS ホームページをちょっと加工する程度の無料または古くて安く購入できる作成ソフトを教えてください 5 2022/12/16 12:17
- PHP PHP MySql ページング 2 2022/09/20 06:38
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- その他(開発・運用・管理) WindowsからSSHでサーバーにあるファイルをダウンロードできない…。 3 2022/04/24 11:08
- Visual Basic(VBA) 【Excel VBA】自動メール送信の機能追加 5 2022/09/29 12:53
- Windows 10 windows10のクリーンインストールが完了出来ない 2 2022/06/04 13:33
このQ&Aを見た人はこんなQ&Aも見ています
-
「環境が人を育てる」って本当?環境によって人格や生き方は本当に変わるのか
環境が人生に与える影響は実際どれほどのものなのか、専門家の田宮由美さんに伺った。
-
JavaScriptを使って毎日決まった時間に同じ作業を繰り返し行うには?
JavaScript
-
Javascriptで指定した日付と時間に画像を入れ替える方法
JavaScript
-
JavaScriptで決まった「時刻」にページを移動するには?
JavaScript
-
-
4
指定した日時にリロード処理を実行させるには?
JavaScript
-
5
javascriptで指定した日時にリロードさせるには?
JavaScript
-
6
タスクスケジューラから30分に一回、自動で特定のURLを指定してブラウザを立ち上げたい
Windows 10
-
7
win10で決まった時間にedge,又はChromeでウェブページを開くコマンドの作り方を教えて下さ
Chrome(クローム)
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
location.hrefの使用条件について
-
指定時間になったら、WEBサイト...
-
CSSのtransform: translate(-50...
-
htmlでテーブル内にテキストボ...
-
インラインフレームの表示位置...
-
エクセルでサイズに合ったもの...
-
エクセルでサイズ指定でPOP...
-
aタグに直接style=""で:hoverを...
-
HTMLでテーブルを縦に並べたい!
-
<tbody>は何のためにあるんでし...
-
スペースが空きすぎて困ってい...
-
アップロードするサーバーによ...
-
iPhone用のサイトの文字がずれ...
-
道路幅を調べたいのですが
-
バーコードのサイズは拡大縮小...
-
Excelで文字の幅を変える方法
-
【ホームページビルダー】表の...
-
<H1>を使わずに<H2>以下を使用...
-
table内で画像と文字をセンター...
-
Excelの列や行の幅を表示...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
指定時間になったら、WEBサイト...
-
window.close()で閉じられない
-
HTMLでブラウザを終了させる方法
-
javascriptでタイトルバーを非...
-
『入力文字列 + .html』 に...
-
window.openした時、親ウィンド...
-
小窓を表示させたい
-
location.hrefの使用条件について
-
スクリーン真ん中に移動
-
とても困ってます!!助けてく...
-
クリックで画像表示、さらに画...
-
Javascriptで毎週月曜日深夜0:0...
-
JavaScriptで作られた択一式テ...
-
1つのボタンに2つの機能
-
Scriptタグはheadタグとbodyタ...
-
サブウインドウを開くときのフ...
-
子窓で送信したら、親ウィンド...
-
JavaScriptとアニメーションgif...
-
showModalDialogで動的にページ...
-
ポップアップ (小窓)
おすすめ情報