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

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

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

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

HTML
<script>
document.writeln("最終更新:" + document.lastModified);
</script>
表示

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

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

HTML
<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!] が増えていきます。

HTML
<script>
function func() {
  document.getElementById("a123").innerHTML += "[Click!] ";
}
</script>
<button onclick="func()">OK</button>
<div id="a123"></div>
表示

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

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

HTML
<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">
HTML

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

HTML
<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">
表示

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

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

HTML
<script>
var n = 0;
var msg = new Array();
msg[n++] = 'こんにちわ。いらっしゃい。';
msg[n++] = 'やっほ~~~~。';
msg[n++] = 'おいでやす。';
document.write(msg[Math.floor(Math.random() * n)]);
</script>
表示

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