D16 カウントダウンウィンドウ

ボタンクリックするとサブウインドウが開きカウントダウンを始めます。クイズやゲームのタイムアタック用の小道具として使えます。この本では、M09の牛パズルで使っています。

応用 : cnt=20; をたとえば40にすれば40からカウントダウンを開始します。var speed=1000; を500にすると0.5秒ごとのカウントスピードになります。 ゲームやクイズのスクリプトに書き加えて使ってみましょう。
参照 : 変数, if(条件){命令}, window.open, document.write(), document.close(), clearTimeout(), setTimeout(), onClick,

Sample




Source
ソース
(コピーしてお使いください)
<html>
<head>
<title></title>
<script language="JavaScript">
<!--

var TimeID1=0            //タイマー
var speed=1000           //カウントダウンスピード(1/1000秒単位)
var cnt                  //カウンター

function takuWin()
{
  takuw3 = window.open("","w3","width=100,height=100")
  if(takuw3!=null)
  {
    if(cnt>0)
    {
      //カウントダウン
      takuw3.document.write("<font size=7><b>"+cnt+"</B></font><hr>")
      takuw3.document.close()
      cnt--
      TimeID1=setTimeout('takuWin()',speed)
    }
    else
    {
      //カウント終了後の処理
      clearTimeout(TimeID1)
      hantei();
      if(takuw3!=null)takuw3.close();//ウインドウを閉じます
    }
  }
}

//ここにカウント終了後の処理などを書いておきます
function hantei(){
  alert("カウント終了っ(^^)/")
}

//-->
</script>
</head>
<body>
<form>
  <input type="button" value=" カウント開始 "
         onClick="cnt=20;takuWin()">
</form>
</body>
</html>
window.openに関する説明はwindow.openをご覧ください

takuw3.document.write('xxx')はサブウインドウに'xxx'を書き出す(document.writeする)という意味で、

その次のtakuw3.document.close()はサブウインドウに'xxx'を書き出すのをやめる(document.closeする)という意味です

cnt--は変数cntに格納されている数値から1引きます。たとえばもとの数値が20なら19になるわけです。逆にもしcnt++と書けば1を足します。 onClick="命令文"でクリックしたら"命令文"を実行するという意味です

ここでは、onClick="takuWin()"で関数takuWin()のなかに書かれた命令を実行します


Contents
| CONTENTS
| PART1 これだけ知っていれば大丈夫
| PART2 サンプルの紹介
| PART3 JavaScript言語仕様
| PART4 JavaScriptクイック書式一覧
| PART5 JavaScriptサイト
| オンラインサポートページ(回線をつないでください)


Maintained by
tato@fureai.or.jp works1997 Toshirou Takahashi