请用代码实现前端定义九个箱子位置的界面,然后一进入页面后端返回某些箱子坐标,前端就直接展示对应箱子的位置,所在的箱子变色,而且点击箱子可以获取箱子的一些信息
时间: 2023-04-05 19:04:46 浏览: 47
以下是一个简单的实现:
HTML:
```html
<div class="container">
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="box" id="box4"></div>
<div class="box" id="box5"></div>
<div class="box" id="box6"></div>
<div class="box" id="box7"></div>
<div class="box" id="box8"></div>
<div class="box" id="box9"></div>
</div>
```
CSS:
```css
.container {
display: flex;
flex-wrap: wrap;
width: 300px;
height: 300px;
}
.box {
width: 100px;
height: 100px;
border: 1px solid black;
}
.active {
background-color: yellow;
}
```
JavaScript:
```javascript
// 获取所有箱子元素
const boxes = document.querySelectorAll('.box');
// 向后端请求箱子坐标
fetch('/get-boxes')
.then(response => response.json())
.then(data => {
// 遍历返回的箱子坐标
for (let i = 0; i < data.length; i++) {
const box = data[i];
// 根据坐标找到对应的箱子元素
const boxElement = document.getElementById(`box${box.id}`);
// 给对应的箱子元素添加信息
boxElement.dataset.info = box.info;
// 给对应的箱子元素添加点击事件
boxElement.addEventListener('click', () => {
// 将所有箱子元素的样式重置
boxes.forEach(box => box.classList.remove('active'));
// 将当前点击的箱子元素变色
boxElement.classList.add('active');
// 获取当前点击的箱子元素的信息
const info = boxElement.dataset.info;
// 处理信息
console.log(info);
});
}
});
```
这段代码实现了一个简单的前端界面,向后端请求箱子坐标,展示对应箱子的位置,并且点击箱子可以获取箱子的信息。