ブラウザオブジェクト1

2024年01月16日(火) 09時36分更新 icon 項目のみ表示/展開表示の切り替え

インターバルタイマー(setInterval,clearInterval)

タイマー起動ボタンをクリックするとインターバルタイマーを起動し1秒置きに時刻を表示します。タイマー解除ボタンをクリックするとインターバルタイマーを解除します。
ボタンを押す前 
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  
  <span id="id1">ボタンを押す前</span>
  <script type="text/javascript">
  var timerID0=null;
  function test1(){
     if(timerID0==null)
       timerID0=setInterval('test2()',1000);
  }
  function test2(){
     var o=document.getElementById('id1');
     o.innerText=new Date;
  }
  function test3(){
     if(timerID0!=null){
       clearInterval(timerID0);
       timerID0=null;
     }
  }
  </script>
  <form name="test1Form">
    <input type="button" value="タイマー起動" onclick="test1()" />
    <input type="button" value="タイマー解除" onclick="test3()" />
  </form>
</body>
</html>

タイマー(setTimeout,clearTimeout)

タイマー起動ボタンをクリックするとタイマーを起動し3秒後に時刻を表示します。タイマー解除ボタンをクリックするとタイマーを解除します。
ボタンを押す前 
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <span id="id2">ボタンを押す前</span>
  <script type="text/javascript">
  var timerID1=null;
  function test4(){
     if(timerID1==null)
       timerID1=setTimeout('test5()',3000);
  }
  function test5(){
     var o=document.getElementById('id2');
     o.innerText=new Date;
  }
  function test6(){
     if(timerID1!=null){
       clearTimeout(timerID1);
       timerID1=null;
     }
  }
  </script>
  <form name="test2Form">
    <input type="button" value="タイマー設定" onclick="test4()" />
    <input type="button" value="タイマー解除" onclick="test6()" />
  </form>
</body>
</html>