在页面上生成 200 行50 列共 10000 个按钮,点击按后弹出消息框,显示被点击按钮在“某行某列2要求使用原生JS,优先考虑运行性能 写一段代码
时间: 2024-05-02 16:19:50 浏览: 11
我理解你的要求,下面是一个简单的实现方式:
```javascript
// 获取页面元素
var container = document.getElementById('container');
// 储存按钮的位置信息
var data = [];
// 循环生成按钮
for (var i = 0; i < 200; i++) {
var row = document.createElement('div');
row.classList.add('row');
for (var j = 0; j < 50; j++) {
var btn = document.createElement('button');
btn.innerText = 'Button ' + (i * 50 + j + 1);
btn.dataset.row = i + 1;
btn.dataset.col = j + 1;
// 点击按钮时记录位置并弹出消息框
btn.addEventListener('click', function () {
var row = this.dataset.row;
var col = this.dataset.col;
alert('Row ' + row + ', Column ' + col + ' clicked!');
});
row.appendChild(btn);
data.push({ row: i + 1, col: j + 1 });
}
container.appendChild(row);
}
```
这段代码通过原生JS生成了 200 行 50 列共 10000 个按钮,并且在点击按钮时弹出消息框,显示该按钮的位置信息。为了提高运行性能,我们先将按钮的位置信息存储在一个数组中,再在点击事件里使用该数组中的数据,避免了在触发事件时进行 DOM 操作的影响。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)