1在HTML页面中生成26个长宽高分别为80px的正方形块块的内容依次是a-z2 捕捉用户的键盘输入当用户输入字母时对应色块的颜色改变
@1 在HTML页面中生成26个长宽高为80px的正方形块,并设置内容为a-z,可以使用以下代码:
<!DOCTYPE html>
<html>
<head>
<style>
.square {
width: 80px;
height: 80px;
display: inline-block;
text-align: center;
line-height: 80px;
font-size: 18px;
}
</style>
</head>
<body>
<div id="container">
<div class="square">a</div>
<div class="square">b</div>
<div class="square">c</div>
<!-- ...依次添加剩下的字母块 -->
<div class="square">z</div>
</div>
</body>
</html>
这段代码使用了CSS的样式定义,将每个块的宽高设置为80px,并使用inline-block属性使它们水平排列。文字居中显示,设置了字体大小和行高。
@2 捕捉用户的键盘输入,并在用户输入字母时改变对应色块的颜色,可以使用以下JavaScript代码:
<!DOCTYPE html>
<html>
<head>
<style>
.square {
width: 80px;
height: 80px;
display: inline-block;
text-align: center;
line-height: 80px;
font-size: 18px;
}
</style>
</head>
<body>
<div id="container">
<div class="square">a</div>
<div class="square">b</div>
<div class="square">c</div>
<!-- ...依次添加剩下的字母块 -->
<div class="square">z</div>
</div>
<script>
// 获取所有的正方形块
var squares = document.getElementsByClassName('square');
// 监听键盘按下事件
document.addEventListener('keydown', function(event) {
// 获取按下的键盘字符
var key = event.key.toLowerCase();
// 判断字符是否为字母
if (key.match(/[a-z]/)) {
// 找到对应的正方形块
var square = document.getElementById(key);
// 改变颜色
square.style.backgroundColor = 'red';
}
});
</script>
</body>
</html>
这段代码通过document.getElementsByClassName获取到所有的正方形块,并使用document.addEventListener监听键盘按下事件。在事件处理函数中,通过event.key获取到按下的键盘字符,并使用toLowerCase转为小写字母。然后判断字符是否为字母,如果是,则通过document.getElementById找到对应的正方形块,并改变其背景颜色为红色
原文地址: https://www.cveoy.top/t/topic/iqkx 著作权归作者所有。请勿转载和采集!