@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找到对应的正方形块,并改变其背景颜色为红色

1在HTML页面中生成26个长宽高分别为80px的正方形块块的内容依次是a-z2 捕捉用户的键盘输入当用户输入字母时对应色块的颜色改变

原文地址: https://www.cveoy.top/t/topic/iqkx 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录