日付を自動更新で表示させる! 簡単コピペ その2!
- 2020/08/10
- HowTo
以前『日付を自動更新で表示させる! 簡単コピペ!!』を書いたのですが、その時の方法はJaveScriptで『document.write()』を使ってそのままhtml内に書く記述方法でした。
こういう書き方はあまりよくないのかな?とは思いつつ、これといってトラブルにもエラーになってないので問題ないだろう。と思い今まで使っていたのですが、ある管理サイトを『PageSpeedInsight』でチェックしたところ、
とはっきり『document.write() を使用しない』と書かれてたんですよねぇ。。これは修正しないと。
というわけで、今回は同じJaveScriptでも『document.write()』を使わずに、日付を自動更新で表示させる方法です!
目次
1.『getElementById』を使って日時を自動表示する
方法としては『getElementById』を使って、html内から指定したidを取得して、表示させる方法です。
今回は
今は『』です。
今は『』です。
今は『』です。
今は『』です。
と表示させます。
まずは
以下の記述を<head>や別ファイルに、
<script type="text/javascript"> var now = new Date(); var Y = now.getFullYear(); var M = now.getMonth() + 1; var D = now.getDate(); var W = now.getDay(); var DotW = ['日', '月', '火', '水', '木', '金', '土']; var h = now.getHours(); var m = now.getMinutes(); var s = now.getSeconds(); document.getElementById('ShowDateAll').innerHTML = Y + '年' + M + '月' + D + '日' + '(' + DotW[W] + ')' + h + '時' + m + '分' + s + '秒';//2020年7月7日(金)1時23分45秒 document.getElementById('ShowDateY').innerHTML = Y + '年';//2020年 document.getElementById('ShowDateYM').innerHTML = Y + '年' + M + '月';//2020年7月 document.getElementById('ShowDateYMD').innerHTML = Y + '年' + M + '月' + D + '日';//2020年7月7日 document.getElementById('ShowDateYMDW').innerHTML = Y + '年' + M + '月' + D + '日' + '(' + DotW[W] + ')';//2020年7月7日(金) </script>
と書きます。
そしてbody内の表示したい場所に、
今は『<span id="ShowDateAll"></span>』です。 今は『<span id="ShowDateY"></span>』です。 今は『<span id="ShowDateYM"></span>』です。 今は『<span id="ShowDateYMD"></span>』です。 今は『<span id="ShowDateYMDW"></span>』です。
と、idのみを書いたタグを書きます。
これでJavaScriptで取得した情報をこのタグの中に表示されてくれます。
注意点
JavaScriptの11〜14行目は、使うものだけを記述しないと、エラーとなり表示されません。ですので、使うものだけ記述するなり、コメントアウトするなりしてください。
2.『getElementById』を使って時間をリアルタイム更新する(秒も動かす)
この表示をするには、以下の記述を1と同様<head>や別ファイルに書きます。
<script> function set00(num) {// 桁数が1桁だったら先頭に0を加えて2桁に var num0; if( num < 10 ) { num0 = "0" + num; } else { num0 = num; } return num0; } function getTime() { var nowTime = new Date(); var H = set00( nowTime.getHours() ); var M = set00( nowTime.getMinutes() ); var S = set00( nowTime.getSeconds() ); var print = H + "時" + M + "分" + S + "秒"; document.getElementById("showTime").innerHTML = print; } setInterval('getTime()',1000);//1秒ごとにclock()を実行 0.5秒ごとの場合は500 </script>
これでリアルタイム表示もされてくれます。
まとめ
技術は日々進歩し変更されますので、アンテナは常に貼って情報更新し続けないと。ですね。
気をつけて、自分自身アップデートし続けたいと思います!
Google AdS
関連記事
ページネーションがおかしい!次のページに行かない原因と解決方法|WP-Pagenavi・表示設定を見直す
今まで何度もWordPressのテンプレートをカスタマイズし、問題なくページネーションは機能していたのですが、なぜか今回…
【2021】FacebookやTwitter CardのOGPの設定をする!チェックツールURLも!プラグインなし
今まで何度も『OGP』の設定に関する記事は書いてきたのですが、新規サイト立ち上げで参考にしようと見てみたら、Facebo…
301リダイレクトでサイトのリニューアル(ドメインを変更)する!:.htaccessの記述、設定方法、順序etc.
最近サーバーの見直し、ドメイン管理会社の見直し、サイト内の見直し等々しているのですが、以前から使用していたサーバー(エク…
OGPをWP-OGPのプラグインを改変して設定する!!2015年のOGP最新設定
今度こそ。。。OGPの設定で何時間、というより何日?何ヶ月?かかってるんや。。。という感じなのですが、もう最初の投稿から…
URLの正規化:wwwあり、なしのドメインを統一する記述方法(エックスサーバー(XSERVER) にて)
前回のブログ で.htaccessに301リダイレクトをするための記述方法について書きましたが、ついでにwwwあり、なし…