您的当前位置：首页正文

js 小练习—移动盒子

2024-11-07 来源：个人技术集锦

<!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>

转载于:https://www.cnblogs.com/chuangzi/p/6736175.html