その他のテクニック(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>

■ タイプライターのように１文字ずつ表示するには

タイプライターのように、時間差をつけて文字を1文字ずつ表示させます。Internet Explorer のみ対応しています。

<html>
<head>
<title>タイプライター</title>
<script type="text/javascript">
<!--
var str = "とほほのWWW入門";
var n = 0;
function func() {
  if (document.all) {
    if (s = str.charAt(n++)) {
      document.getElementById("tw").innerText += s;
      window.setTimeout("func()", 300);
    }
  }
}
// -->
</script>
</head>
<body onload="func()">
<div id="tw"></div>
</body>
</html>