求職者支援訓練Webデザイン Webサイト制作科 白描

求職者支援訓練Webサイト制作科 補足メモ Web白描

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

要素を動かす

  • クリックイベントにより、X座標・Y座標の値を変更する
<!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>
<script>
function btnclick() {
  var divelement = document.getElementById('mydiv');
  divelement.style.left = '800px';
  divelement.style.top = '200px';
}
window.addEventListener('load',
  function() {
    var btndiv = document.getElementById('mybtn');
    btndiv.addEventListener('click', btnclick, false);
  },
false);
</script>
</body>
</html>
演習課題 CSS3 transformを使って移動
  • 右に「800px」移動するアニメーションを作りなさい
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>要素を動かす</title>
<style>
#box {
  position: absolute;
  left: 50px;
  top: 50px;
  width: 200px;
  height: 200px;
  background: #8EDED4;
  text-align: center;
  line-height: 200px;
  font-size: 24px;
  -webkit-transition: 1s;
  transition: 1s;
}
.trans01{
  -webkit-transform: translate(800px,0);
  transform: translate(800px,0);
}
</style>
</head>
<body>
<div id="box">要素</div>
<script>
window.addEventListener('load',
  function() {
    var element = document.getElementById('box');
    element.addEventListener('click',
      function() {
        element.classList.add( 'trans01' );
      }, false);
  },
false);
</script>
</body>
</html>

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

タイマーを使う
  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>
3つの命令で制御する
<!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;
  border-radius: 50%;
}
</style>
</head>
<body>
<div class="box" id="mydiv">要素</div>
<button id="mybtn">再生</button>
<button onclick="stop()">停止</button>
<button onclick="back()">戻す</button>
<script>
var i = 50;i = 50;
var timerid = 0;
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);
}
function back() {
  var divelement = document.getElementById('mydiv');
  divelement.style.left = '50px';
  i = 50;
}
</script>
</body>
</html>
3つの命令をload時に読み込む
<!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;
  border-radius: 50%;
}
</style>
</head>
<body>
<div class="box" id="mydiv">要素</div>
<button id="start">再生</button>
<button id="stop">停止</button>
<button id="back">戻す</button>
<script>
var i = 50;
var timerid = 0;

function move() {
  var element = document.getElementById('mydiv');
  element.style.left = i + 'px';
    i += 2;
}

window.addEventListener('load',
function() {
  
  var btnStr = document.getElementById('start');
  btnStr.addEventListener('click',
    function() {
     timerid = setInterval(move, 20);
   }, false);

  var btnStp = document.getElementById('stop');
  btnStp.addEventListener('click',
    function() {
      clearInterval(timerid);
    }, false);

  var btnBck = document.getElementById('back');
  btnBck.addEventListener('click',
    function() {
      var element = document.getElementById('mydiv');
      element.style.left = '50px';
      i = 50;
   }, false);

}, false);
</script>
</body>
</html>