首页数组中的数字用图形显示 2.加上鼠标的支持，鼠标左键单击方框数值加一，右键单击方框值减一

数组中的数字用图形显示 2.加上鼠标的支持，鼠标左键单击方框数值加一，右键单击方框值减一

时间: 2024-10-23 17:18:58 浏览: 11

在JavaScript中，我们可以结合HTML和JavaScript来实现这个功能。首先，我们需要创建一个HTML元素表示数组，并添加鼠标的点击事件监听。以下是基本的代码实现： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .grid { display: grid; gap: 5px; } .cell { width: 40px; height: 40px; text-align: center; cursor: pointer; } </style> </head> <body> <div class="grid"></div> <script> // 假设你有一个预先定义好的二维数组 let array = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]; // 将数组转换为DOM元素并绑定事件处理函数 function createGrid(array) { const container = document.querySelector('.grid'); array.forEach((row, rowIndex) => { row.forEach((value, colIndex) => { const cell = document.createElement('div'); cell.textContent = value === 0 ? '' : String(value); cell.classList.add('cell'); cell.addEventListener('mousedown', () => incrementValue(cell)); cell.addEventListener('mouseup', () => decrementValue(cell)); cell.addEventListener('contextmenu', (event) => { event.preventDefault(); // 阻止默认的右键菜单 if (value > 0) decrementValue(cell); }); container.appendChild(cell); }); }); } // 单击增加，右键减小 function incrementValue(cell) { if (parseInt(cell.textContent)) { cell.textContent = parseInt(cell.textContent) + 1; } } function decrementValue(cell) { if (parseInt(cell.textContent) > 0) { cell.textContent = parseInt(cell.textContent) - 1; } } createGrid(array); // 初始化网格 </script> </body> </html>

阅读全文