<!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>
本文提供了一个简单的HTML示例，展示了如何使用JavaScript实现网页中盒子元素的左右移动功能。通过点击按钮，可以使得一个绿色的盒子在页面上左右移动200像素。
扫一扫
870
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
