键盘按下对应的数据的哪个键，页面中对应的那个数据的就会选中，添加背景色

最新推荐文章于 2024-07-10 16:22:27 发布

黄桃乳酪派

最新推荐文章于 2024-07-10 16:22:27 发布

阅读量121

点赞数

分类专栏： JavaScript webapi 文章标签： html5 javascript js

本文链接：https://blog.csdn.net/u012271799/article/details/115910798

版权

JavaScript 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

webapi

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      list-style: none;
    }

    ul {
      width: 800px;
      margin: 100px auto;
    }

    li {
      border: 1px solid #f00;
      width: 80px;
      float: left;
      text-align: center;
      height: 30px;
      line-height: 30px;
    }

    .active {
      background-color: #0F0
    }
  </style>
</head>

<body>
  <ul class="box">

  </ul>
  <script>
    // - 把给定的数据渲染到页面上
    //  - 键盘按下对应的数据的哪个键，页面中对应的那个数据的就会选中，添加背景色
    var allKey = ["1", '2', '3', '4', '5', '6', '7', '8', '9', '0', 'Q', 'W', 'E', 'R', 'T', 'Y', 'U',
      'I', 'O', 'P', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', 'Z', 'X', 'C', 'V', 'B', 'N', 'M'
    ];

    let ul = document.querySelector('ul');
    let index = 0

    ul.innerHTML = allKey.map(function (item) {
      return `<li>${item}</li>`;
    }).join('');

    document.addEventListener('keydown', function (e) {
      index > -1 && ul.children[index].classList.remove('active')
      index = allKey.indexOf(e.key.toUpperCase())
      index > -1 && ul.children[index].classList.add('active')
    })

  </script>
</body>

</html>

黄桃乳酪派

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
键盘按下对应的数据的哪个键，页面中对应的那个数据的就会选中，添加背景色

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { padding: 0; m
复制链接

扫一扫