インターネット時間を表示する JavaScript

2004年03月18日 (木)

インターネット時間を表示する JavaScript

実は .Mac とはなんの関係もないネタなのですが、某所でインターネット時間を拾い物の Java アプレットで表示させようとしたがいまいち閲覧者の環境依存でビシッといかないようなので、気になって作ってしまいました。30 分仕事です。多分エントリ書く方が大変です。

その JavaScript のファイルは
InetTime.js
これです。この JavaScript ファイルのデモの XHTML ファイルも作成しておきました。
InetTime.html
この二つを同じフォルダーにおいて XHTML ファイル(InetTIme.html)をブラウザで見てみてください。

ご自分の Web ページに使うときは InetTime.html の body の部分を真似します。要点は

InetTime.js をロードする
例えば
<script type="text/javascript" src="InetTime.js"></script>
というように script タグでロードします。
インターネット時間を表示させたいところを id 属性付きでタグで囲む
例えば
<span id="InetTime">@???</span>
というようにします。ここでは span タグを使用していますが色々なタグが使えます。あなたのページデザインに合わせて工夫してください。また id 属性の値はここでは InetTime にしていますが、他と重ならなければ何でもよいです。
表示を開始する
例えば
<script type="text/javascript">StartInetTimeWatch('InetTime');</script>
とします。InetTime は 2 で id 属性値に指定したものを使ってください。この例のとおり 2 で InetTime を使用した場合は省略可能です。省略するときは ' ' も不要です。

さて、これを御覧になる方は iBlog を利用している人が多いと思いますので、iBlog のナビゲーションエディタでインターネット時間を表示するナビゲーションアイテムを作成例を書いておきます。

ヘッダ

国際的な時間表現なのでここは英語のヘッダーがいいでしょう。

<div class="sidetitle">Internet Time</div>

内容

素のままのテキストでは味気ないので、黒字に白、大きめのフォントにしてテーブルを使って書いてみました。

<div class="side">
 <table align="center" border="0" summary="Internet Time">
  <tr>
   <td nowrap="nowrap" style="text-align: center; background-color: black; color: white; font-size: larger">
    <script type="text/javascript" src="<$BlogBaseURL$>InetTime.js"></script>
    <span id="InetTime" style="margin-left: 1em; margin-right: 1em;">@???</span>
    <script type="text/javascript">
     StartInetTimeWatch('InetTime');
    </script>
   </td>
  </tr>
 </table>
</div>

td タグや span タグにスタイルを指定していますが、こういうのは css ファイルに書いておくのがいいでしょう。ここでは面倒な人向けにここに書いてあること以外は何もしなくてよいように、インラインで書きました。

この blog のスタイルシートでは次のように表示されます。

Internet Time

@???

もちろん InetTime.js をロードする script タグの src 属性値は、ご自分が InetTime.js を置いたところを指すように調節してください。

Posted: 23:24 | Comment | Trackback

Trackback Ping URL(U)

以下、類似エントリです。

>  >

2004年03月18日 (木)

インターネット時間を表示する JavaScript

> >