<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>移動盒子</title>
</head>
<body>
<!--第二題：移動盒子-->
<div id="box" style="width: 200px;height: 200px; background: #0f0;position: relative;left: 0;"></div>
<button id="btn1">左移動200px</button>
<button id="btn2">右移動200px</button>
<script>
/**
* 第二題：移動盒子
*/
var box = document.getElementById('box');
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
btn1.addEventListener('click', function () {
box.style.left = parseInt(box.style.left) + 200 + 'px';
})
btn2.addEventListener('click', function () {
box.style.left = parseInt(box.style.left) - 200 + 'px';
})
</script>
</body>
</html>
