JavaScriptでタイマーを設定 - 久保清隆のブログ

どうしても眠いときのための JavaScript - IT戦記
を参考にしてタイマーを作ってみた。

残り時間によって文字の色が変わる。
途中で止めることができるし、再スタートもできる。
時間になると、指定したURLを開く。

使ったメソッド

timer = setTimeout(関数,ミリ秒) // ミリ秒後に関数を一度だけ実行する。 
例）timer = setTimeout("timers()", 1000)だと、1秒後に関数timers()が実行される。

clearTimeout(timer) // タイマーを解除する。
例）clearTimeout(timer)で、timerが解除される。timerは上記の例で使ったもの。

document.fgColor="#ffffff" // 文字の色を設定する。

document.body.innerHTML = "コード" // bodyにHTMLコードを埋め込む。

location.href='http://d.hatena.ne.jp/kiyo560808/' //指定したURLを開く

実際のコード

60秒をカウントダウンして、指定したWebページを開く。

<html>
<head>
  <title>タイマー</title>

  <script language="javascript">
  function stop(){
    clearInterval(timer);
  }
  
  function start(){
    timer=setInterval('timers()',1000);
  }
  
  function timers() {
 if(remain>20){
   document.fgColor="#ffccff";
  }else if(remain>10){
    document.fgColor="#ffcc22";
  }else{
    document.fgColor="#ff2222";
  } 
  document.body.innerHTML = "<h1>"+'残: ' + remain-- + ' 秒'+"</h1>"+
  "<div class='centering'><form name='form1'><input type='button' value='start' onClick='start()'><input type='button' value='stop' onClick='stop()'></form></div>";
  if (!remain) location.href='http://www.youtube.com/watch?v=b60YjaARb34'; }
  </script>

  <style type="text/css">
    body{ margin-top:150pt;
        }
    h1{font-size:40pt;
       text-align:center;
       }
   
   .centering{text-align:center;}
   
  </style>
</head>


<body>
<script language="javascript">
//<![CDATA[
document.bgColor="#000033";

var remain = 60 * 1;

timer=setInterval(timers(), 1000);
void(0);


//]]>
</script>


</body>
</html>

お読み頂きありがとうございます。
少しでもお役に立てたらクリックお願いします↓。