ページの更新日を表示するには、JavaScript の lastModified を用います。表示される書式はブラウザやバージョンによって異なります。
<script> document.writeln("最終更新:" + document.lastModified); </script>
○月○日から△月△月までの間だけメッセージを表示したいという場合、次のようなスクリプトを用います。d1 には開始日時、d3 には終了日時を指定してください。月には 1月から順に Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec を指定します。
<script> 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 ボタンを押すごとに [Click!] が増えていきます。
<script> function func() { document.getElementById("a123").innerHTML += "[Click!] "; } </script> <button onclick="func()">OK</button> <div id="a123"></div>
マウスストーカー(小さなアイコンがマウスを追いかけるもの)をつけるには、基本的には下記のテクニックを利用します。マウスを動かす度に、画像の位置をマウスの位置に移動させています。
<script> function startMouseStalker() { document.onmousemove = function(e) { img1.style.left = (event.pageX + 10) + "px"; img1.style.top = (event.pageY + 10) + "px"; }; } function stopMouseStalker() { document.onmousemove = function(e) {}; } </script> <input type="button" onclick="startMouseStalker()" value="Start"> <input type="button" onclick="stopMouseStalker()" value="Stop"> <img alt="" id="img1" src="../image/popase.gif" style="position:absolute">
マウスに遅れて追いかけるようにするには下記のようにします。マウス移動時にマウスの位置を覚えておき、10ミリ秒毎に、アイコンの位置をマウスの方向に向けて 1ピクセルずつ移動させています。アルゴリズムを変えることにより、もっといろいろな動きをさせることが可能になります。
<script> var icoX = 0, icoY = 0; // アイコンの位置 var mouX = 0, mouY = 0; // マウスの位置 var timer; function onMouseMove() { mouX = event.pageX; mouY = event.pageY; } function startMouseStalker2() { icoX = event.pageX; icoY = event.pageY; document.onmousemove = onMouseMove; timer = setInterval(function() { icoX += (icoX < mouX) ? 1 : -1; icoY += (icoY < mouY) ? 1 : -1; img2.style.left = icoX + "px"; img2.style.top = icoY + "px"; }, 10); } function stopMouseStalker2() { document.onmousemove = null; clearInterval(timer); } </script> <input type="button" value="Start" onclick="startMouseStalker2()"> <input type="button" value="Stop" onclick="stopMouseStalker2()"> <img alt="" id="img2" src="../image/popase.gif" style="position:absolute">
表示する度にランダムなメッセージを表示するには次のようにします。
<script> var n = 0; var msg = new Array(); msg[n++] = 'こんにちわ。いらっしゃい。'; msg[n++] = 'やっほ~~~~。'; msg[n++] = 'おいでやす。'; document.write(msg[Math.floor(Math.random() * n)]); </script>