1在HTML页面中 生成 26个长宽高分别为80px的正方形块块的内容依次是a-z2 捕捉用户的键盘输入当用户输入字母时对应色块的颜色改变。
- 首先,在HTML页面中创建一个div容器来放置这些正方形块:
<div id="square-container"></div>
- 使用JavaScript代码生成26个正方形块,并设置它们的样式和内容:
// 获取容器元素
const container = document.getElementById("square-container");
// 生成26个正方形块
for (let i = 0; i < 26; i++) {
// 创建div元素作为正方形块
const square = document.createElement("div");
// 设置正方形块的样式
square.style.width = "80px";
square.style.height = "80px";
square.style.backgroundColor = "white";
square.style.border = "1px solid black";
square.style.display = "inline-block";
square.style.textAlign = "center";
square.style.fontSize = "20px";
// 设置正方形块的内容
square.innerText = String.fromCharCode(97 + i); // a的Unicode编码是97
// 将正方形块添加到容器中
container.appendChild(square);
}
- 添加键盘事件监听器,捕捉用户的键盘输入,并根据输入的字母改变对应色块的颜色:
// 添加键盘事件监听器
document.addEventListener("keydown", function(event) {
const key = event.key; // 获取用户按下的键
// 判断按下的键是否为字母
if (/[a-z]/i.test(key)) {
// 获取对应的正方形块
const square = document.getElementById("square-container").children[key.toLowerCase().charCodeAt(0) - 97];
// 改变正方形块的颜色
square.style.backgroundColor = "red";
}
});
以上代码将在HTML页面中生成26个长宽高为80px的正方形块,并且当用户输入字母时,对应色块的颜色会改变为红色。注意,这里假设用户只会输入小写字母。如果需要支持大写字母,可以对输入的字母进行大小写转换
原文地址: https://www.cveoy.top/t/topic/iqly 著作权归作者所有。请勿转载和采集!