请对javascript编程题作答: 在页面上生成200行50列共10000个按钮,点击按钮后弹出消息框,显示被点击按钮在"某行某列",要求使用原生JS,优先考虑运行性能。
时间: 2024-03-05 11:47:55 浏览: 21
以下是使用原生JS生成10000个按钮并实现点击后弹出消息框的代码:
```javascript
const container = document.createElement('div');
container.style.display = 'flex';
container.style.flexWrap = 'wrap';
container.style.width = '100%';
container.style.height = '100%';
document.body.appendChild(container);
for (let i = 0; i < 200; i++) {
for (let j = 0; j < 50; j++) {
const button = document.createElement('button');
button.innerHTML = `Button ${i * 50 + j + 1}`;
button.style.width = 'calc(100% / 50)';
button.style.height = 'calc(100% / 200)';
button.style.border = 'none';
button.style.outline = 'none';
button.style.backgroundColor = '#eee';
button.style.cursor = 'pointer';
button.onclick = () => {
alert(`Button ${i * 50 + j + 1} in row ${i + 1}, column ${j + 1}`);
};
container.appendChild(button);
}
}
```
首先,我们创建一个div元素作为容器,并设置其样式为flex布局。然后,使用两个循环生成200行50列共10000个按钮,并设置每个按钮的样式和点击事件。注意,我们需要在点击事件中使用let定义i和j,以保证能够正确获取被点击按钮所在的行和列。最后,将生成的按钮添加到容器中即可。