タイマーを使って一定時間ごとに動かす

タイマーを使って一定時間ごとに動かす

タイマーを使う
  1. setTimeout関数(一定時間後に、指定した処理を1回実行します)
  2. setInterval関数(一定時間ごとに、指定した処理を繰り返し実行します、やめるときには、clearInterval関数を実行します)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>要素を動かす</title>
<style>
.box {
  position: absolute;
  left: 50px;
  top: 50px;
  width: 100px;
  height: 100px;
  background: #8EDED4;
  text-align: center;
  line-height: 100px;
}
</style>
</head>
<body>
<div class="box" id="mydiv">要素</div>
<script>
var i = 50;
function move() {
  var divelement = document.getElementById('mydiv');
  divelement.style.left = i + 'px';
    i += 2;
  }

window.addEventListener('load',
  function() {
    // タイマーを設定する
    setInterval('move()', 20);
  },
false);
</script>
</body>
</html>
setInterval関数
setInterval('move()', 20);
  • move():実行したい関数名
  • 20:実行間隔 0.02秒(100ミリ秒=100/1000=0.1秒)ごとに「move()」という関数を実行する
var i = 50;
function move() {
  var divelement = document.getElementById('mydiv');
  divelement.style.left = i + 'px';
    i += 2;
  }
  • 左から50pxからスタートする
  • 左からの位置が、2pxずつ追加されていく
  • 0.02秒ごとに繰り返し実行する
タイマーを停止する
  • clearInterval関数を使います
  • 変数「timerid」を用意し、setInterval関数でタイマーをセットしたとき「タイマーID」と呼ばれるタイマーを識別する戻り値を「timerid」に設定するようにしました
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>要素を動かす</title>
<style>
.box {
  position: absolute;
  left: 50px;
  top: 50px;
  width: 100px;
  height: 100px;
  background: #8EDED4;
  text-align: center;
  line-height: 100px;
}
</style>
</head>
<body>
<div class="box" id="mydiv">要素</div>
<button onclick="stop()">停止</button>
<script>
var i = 50;
var timerid;
function move() {
  var divelement = document.getElementById('mydiv');
  divelement.style.left = i + 'px';
    i += 2;
  }

window.addEventListener('load',
  function() {
    // タイマーを設定する
    timerid = setInterval('move()', 20);
  },
false);
function stop() {
  // タイマを停止する
  clearInterval(timerid);
}
</script>
</body>
</html>
再生・停止
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>要素を動かす</title>
<style>
.box {
  position: absolute;
  left: 50px;
  top: 50px;
  width: 100px;
  height: 100px;
  background: #8EDED4;
  text-align: center;
  line-height: 100px;
}
</style>
</head>
<body>
<div class="box" id="mydiv">要素</div>
<button id="mybtn">再生</button>
<button onclick="stop()">停止</button>
<script>
var i = 50;
var timerid;
function move() {
  var divelement = document.getElementById('mydiv');
  divelement.style.left = i + 'px';
    i += 2;
  }

window.addEventListener('load',
 function() {
  var btn = document.getElementById('mybtn');
  btn.addEventListener('click',
    function() {
      // タイマーを設定する
     timerid = setInterval('move()', 20);
   },
    false);
  },
false);
function stop() {
  // タイマを停止する
  clearInterval(timerid);
}
</script>
</body>
</html>
広告を非表示にする