JavascriptでHTMLに日付を表示させるときに、最初のタイムラグをなくす方法

setInterval()で1秒毎に更新させようとしたら、HTMLを読み込んでから1秒後に日付が表示されちゃったので、その逃げ方

もう、タイトルのとおりなのですが、ちょっと今作ってるものに、HTML上で日付と時間を表示させたかったのです。

で、ちょこちょこと日付と時間を整形するfunctionを書いて、それをｓｅｔＩｎｔｅｒｖａｌで1秒毎に読み込んだら。。。。

最初の読み込みだけ、1秒経たないと表示されないとか orz.

読み込みを１０ｍｓとかにしたら、タイムラグ無いんだけど、CPUが使われるのが気に食わない。。。むー。

解決策は、予め時刻を表示させておくこと。。。って、なんか矛盾してないか？

まずは、どこかにスクリプトを記載します。
ｆｕｎｃｔｉｏｎは日時を作るものと、その結果をHTML内に書き戻すもの。
そして、HTMLに書き戻すｆｕｎｃｔｉｏｎを1秒毎に呼び出す処理。

<script type="text/javascript">
function makeClock() {
    var nowTime = new Date();
    var nowHour = nowTime.getHours();
    if (nowHour<10){nowHour = '0' + nowHour;}
    var nowMin = nowTime.getMinutes();
    if (nowMin<10){nowMin = '0' + nowMin;}
    var nowSec = nowTime.getSeconds();
    if (nowSec<10){nowSec = '0' + nowSec;}
    var msg = nowHour + ":" + nowMin + ":" + nowSec;
    return msg
}
function showClock() {
   document.getElementById("RealtimeClockArea").innerHTML = makeClock();
}
setInterval('showClock()',1000);
</script>

HTML側には、HTMLに書き戻す処理で指定したｉｄをつけたエリアを準備。
この時、この場所で直接スクリプトタグをつけて、日付を作る関数を呼んで、その結果を書き出す、と。

<p id="RealtimeClockArea"><script type="text/javascript">document.write(makeClock());</script></p>

なんか、あんまり良い対策じゃない気もするけど、お手軽に対応できるから、まぁいいかな、と。初回読み込みの時しか発生しない問題だし、ちょっとしたおまじない程度だねー。