1在HTML页面中生成26个长宽高分别为80px的正方形块块的内容依次是a-z2 捕捉用户的键盘输入当用户输入字母时对应色块的颜色改变。
- 在HTML页面中生成26个长宽高为80px的正方形块,并给每个块添加内容a-z。
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 80px;
height: 80px;
display: inline-block;
text-align: center;
line-height: 80px;
font-size: 24px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="box">a</div>
<div class="box">b</div>
<div class="box">c</div>
<!-- ... -->
<div class="box">z</div>
</body>
</html>
- 使用JavaScript捕捉用户的键盘输入,并根据输入的字母改变对应色块的颜色。
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 80px;
height: 80px;
display: inline-block;
text-align: center;
line-height: 80px;
font-size: 24px;
border: 1px solid black;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
var boxes = document.getElementsByClassName('box');
document.addEventListener('keydown', function(event) {
var key = event.key.toLowerCase();
if (key >= 'a' && key <= 'z') {
var index = key.charCodeAt(0) - 'a'.charCodeAt(0);
boxes[index].style.backgroundColor = 'red';
}
});
});
</script>
</head>
<body>
<div class="box">a</div>
<div class="box">b</div>
<div class="box">c</div>
<!-- ... -->
<div class="box">z</div>
</body>
</html>
这段代码使用了keydown事件来捕捉用户的键盘输入,并使用getElementsByClassName方法获取所有色块的引用。当用户按下字母键时,会将对应色块的背景颜色改为红色
原文地址: https://www.cveoy.top/t/topic/iqkv 著作权归作者所有。请勿转载和采集!