指定時間になったら、WEBサイトの更新を自動で行うには…？

締切済

質問者：yuyukina
質問日時：2022/04/28 22:14
回答数：3件

タイトル通りなのですが、色々と調べてみたのですがいまいちわからないといいますか、色々な方法もあるようで混乱しています。
お詳しい方アドバイスを頂けないでしょうか？
※カテJSにしていますがよくわからなく、何卒ご了承願います。

行いた事とはといいますと、index.htmlに表示される内容を変更したいという事になります。
調べた内容によると、時間になったら、index.htmlを準備していた、updata.htmlに丸ごと変えてしまうパターン。これはCRON？？というもので更新を掛けるという内容でした。。

他には、ページ内の一部、

if(この時間まではこれを表示){
<body>~</body>
} elseif (この時間になったらこの内容に変更){
<body>内容が変更になってます！</body>
}

の様にページの一部をifなどで変更するような指定の参考を拝見いたしました。

しかしながら、いまいちわからず…。
もし可能であれば、CRON使わずに、まずはifとかで表示・非表示などを時間で切り替えできればと思うのですが、可能でしょうか？
※もし可能でありましたら、どういった方法で時限の切り替えを行うのが良いかアドバイスありましたらお願いいたします。CRONの方がいいよという事であればそちらで検討いたします。
簡単なPHPやjavascriptは何とか対応できると思います。
お詳しい方、アドバイスを頂けますと幸いです。
宜しくお願いいたします。

通報する

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

質問の本文を隠す

回答 (3件)

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

No.3

回答者： Ogre7077
回答日時：2022/04/30 20:33

サーバー側で対処する 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>

- 0
- 件

通報する

この回答へのお礼

アドバイス感謝申し上げます。
>>サーバー側で対処する PHP や cron が望ましいのですが、
なるほどです、お詳しい方はやはりPHPなどサーバー再度側で行うのが良いとの判断という事で、この辺りの認識も大変参考になります。
サーバー再度での対応はもちろん可能なのですが、私自身が理解できていないのが問題です。

ただ、皆さんのアドバイスを拝見いたしますと、取得した時間の比較で判断するようなので、色々と試してみたいと思いました。

CRONも実際には使ったことが無かったので、この機会に思い切って試してみたいと思います！

通報する

お礼日時：2022/04/30 23:11

No.2

回答者： sukitaro
回答日時：2022/04/29 08:59

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>