ふるログ

プログラム学習中の人が書くブログです。

リアルタイム日付と時刻表示を実装しました!setIntervalで時計は少しずれるの巻

f:id:huru555:20170611031232p:plain

最近はもうスマホで日付とか一瞬でわかるけど、とりあえず実装してみました。

 

PCならサイドバー、スマホなら下のほうにありますよ~~~!

 

見やすさとかは勘弁してください。CSSはめんどくさいんです。

 

簡単だと思ったんですけどね、1時間半はかかりました。

 

今回はこちらのサイトを参考・・・というかほぼ丸パクリといっても差支えないんじゃないかってぐらい参考にさせてもらいました。

www.nishishi.com

 

こちらのサイトでは時間をリアルタイム表示するだけですが、僕のはこのsetIntervalの適用範囲を伸ばし、年月日もリアルタイム更新しています。

 

和暦も表示してみたんですが、来年平成じゃなくなるので、そうしたら修正しなければなりませんね。

 

少しプロのグラマーのかたの気持ちがわかったような気がします。

 

ところで、僕がいつもJSの開発に使っているのはJSFiddleというサイトなんですが、これで上の参考サイトのコードを丸パクリして入れてみても動きませんでした。

 

僕の設定が間違っているのか、setIntervalはつかわせねえぞって感じなのか・・・。

(2017.6.10追記)

setIntervalの記述が原因のようです。

setInterval('関数名()'.1000);

という具合で時計を開発していましたが、これを

setInterval(関数名.1000);

という風にする、つまりクオーテーションマークとカッコを取り除くと正常に作動しました。

 

 

あと、なんかsetIntervalはなんかちょっとずれるっぽい?です。

www.mediaplex.co.jp

 

たしかに!setIntervalは「1秒ずつ更新」という動作をします。

 

そのため、もしもこれを読み込んだ時が、「14時24分08秒35」とかだったりすると、0.35秒ほどずれていることになりますね。

 

最大では0.99秒ずれを許容してしまっている状態で、いかんせん納得いきません。

 

いずれ修正したいと思います。

修正しました。setTimeoutと、UTCの時間をうまく使って、コンマ00秒ジャストでJSがスタートするようになっていると思います。

 

なので、最大で0.99秒待ってもらわないといけません。待ってください。

 

とりあえず、リアルタイム時計完成です!