## その他のテクニック(3)

トップ > 逆引きリファレンス > その他のテクニック(3)

#### ■ ページの更新日を表示するには

ページの更新日を表示するには、JavaScript の lastModified を用います。表示される書式はブラウザやバージョンによって異なります。

    <script type="text/javascript">
    <!--
    document.writeln("最終更新時刻：" + document.lastModified);
    // -->
    </script>

#### ■ 期間限定のメッセージを表示するには

○月○日から△月△月までの間だけメッセージを表示したいという場合、次のようなスクリプトを用います。d1 には開始日時、d3 には終了日時を指定してください。月には 1月から順に Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec を指定します。

    <script type="text/javascript">
    <!--
    var d1 = new Date("Nov 1, 2003 00:00:00");
    var d2 = new Date();
    var d3 = new Date("Dec 1, 2003 00:00:00");
    if ((d1.getTime() < d2.getTime()) && (d2.getTime() < d3.getTime())) {
      document.write("期間限定○○だよ。");
    }
    // -->
    </script>

#### ■ 動的に文字や画像などを追加するには

要素の innerHTML 属性に文字やタグを文字列として追加することにより、文字や画像などの要素を動的に追加することが可能になります。下記の例では OK ボタンを押すごとに「○」の文字が増えていきます。Internet Exolorer 4.0 以降で有効です。

    <html>
    <head>
    <title>テスト</title>
    <script type="text/javascript">
    <!--
    function func() {
      if (a123) {
        a123.innerHTML += "<b>○</b><br>";
      }
    }
    // -->
    </script>
    </head>
    <body>
    <button onclick="func()">OK</button>
    <div id="a123"></div>
    </body>
    </html>

#### ■ マウスストーカーをつけるには

マウスストーカー（小さなアイコンがマウスを追いかけるもの）をつけるには、基本的には下記のテクニックを利用します。マウスを動かす度に、画像の位置をマウスの位置に移動させています。

    <script type="text/javascript">
    <!--
    document.onmousemove = onMouseMove;
    function onMouseMove(e) {
      img1.style.left = (event.clientX + 10) + "px";
      img1.style.top = (event.clientY + 10) + "px";
    }
    // -->
    </script>
    <img id="img1" src="cursor.gif" style="position:absolute">

マウスに遅れて追いかけるようにするには下記のようにします。マウス移動時にマウスの位置を覚えておき、10ミリ秒毎に、アイコンの位置をマウスの方向に向けて 1ピクセルずつ移動させています。アルゴリズムを変えることにより、もっといろいろな動きをさせることが可能になります。

    <html>
    <head>
    <title>マウスストーカー</title>
    <script type="text/javascript">
    <!--
    var icoX = 0, icoY = 0;   // アイコンの位置
    var mouX = 0, mouY = 0;   // マウスの位置
    document.onmousemove = onMouseMove;
    function onMouseMove(e) {
      mouX = event.clientX;
      mouY = event.clientY;
    }
    function onTimer() {
      icoX += (icoX < mouX) ? 1 : -1;
      icoY += (icoY < mouY) ? 1 : -1;
      img1.style.left = icoX + "px";
      img1.style.top  = icoY + "px";
      setTimeout("onTimer()", 10);
    }
    // -->
    </script>
    </head>
    <body onload="onTimer()">
    <img id="img1" src="cursor.gif" style="position:absolute">
    </body>
    </html>

Google などで「マウスストーカー」を検索すると、いろいろなサンプルスクリプトが配布されています。

- AWCS
  → [DHTML]
- HP作成援助交遊
  → [じゃばすくりぷと技]
- FriendlyPark
  → [★簡単ホームページ小物集]

#### ■ ランダムな絵や文字を表示するには

表示する度にランダムなメッセージを表示するには次のようにします。

    <script type="text/javascript">
    <!--
    var n = 0;
    var msg = new Array();
    msg[n++] = 'こんにちわ。いらっしゃい。';
    msg[n++] = 'やっほ〜〜〜〜。';
    msg[n++] = '<font color="red">おいでやす!!</font>';
    document.write(msg[Math.floor(Math.random() * n)]);
    // -->
    </script>

Copyright (C) 2003-2004 杜甫々
初版： 2003年11月16日、最終更新：2004年3月7日
http://www.tohoho-web.com/how2/tec3.htm