星のソムリエのフロントエンド雑記。星空案内人から見たSEO、マーケティング、フロントエンドについての雑記。星のソムリエのフロントエンド雑記。タダフラtada-flaHTMLHTML5+CSS3JavaScriptJavaScriptjQueryPHPPHPWordPressWordPressAdobeCCAdobeCCPhotoshopDreamweaverその他OthersNewscolumnMarketingSEO星のソムリエのフロントエンド雑記。2015.12.22Javascriptで簡単なタイマーをセットしたいという要望があったので、シンプルに作りました。内容:セットした時間になったら画像が差し替わるようにしたい。phpを使えないのでJavascriptで正確な時間を取得する必要がある。一般的にphpではサーバー時間(正確な時間)を取得することができ、Javascriptで取得できるのはローカル(PCや携帯端末で設定している)時間だと言われています。調べればJavascriptでもほぼ正確な時間を取得する方法が出てきます。それがXMLHttpRequestで、ajaxのような非同期通信を実現するためのAPIです。Date(request.getResponseHeader('Date'));これで、変数req_tには「通信時のDateオブジェクト」が定義されています。サーバーの時間を取得できているということになります。通信からクライアント側のPC表示までのタイムラグがありますから、秒単位での正確さは保証できません。問題なく使用できるでしょう。いうわけで、今回用意したJavascriptがこちら。}}表示を切り替えたい部分のHTMLはこちら。alt="">Javascript上部の変数に表示を切り替えたい日時を入力し、HTML側で”set_before”、”set_after”というidを設定すると{display:none}と{display:block}をその時間で入れ替えるという簡単なものです。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。星のソムリエのフロントエンド雑記。