2020百度前端笔试编程题简化版-前端实现js控制css样式

最新推荐文章于 2022-09-17 08:52:05 发布

lovelymonkey227

最新推荐文章于 2022-09-17 08:52:05 发布

阅读量204

点赞数

分类专栏：前端编程笔记文章标签： javascript css html

本文链接：https://blog.csdn.net/lovelymonkey227/article/details/108677623

版权

前端编程笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前端实现js控制css样式

原题里写的是会产生随机数，决定开始的格子是那一个，并且能根据按键来决定移动方向
37 左 38:上 39:右 40:下
以下为简化版的解法
html

<html>
  <table id="my_table">
    <tr><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td></tr>
  </table>
</html>

css

td{
  border:1px solid black;
  width:50px;
  height:50px;
}
.active{
  background-color:yellow;
}

js

function bind(){
  document.onkeydown=event=>{
    if(!event) return;
    var code=event.keyCode||' ';
    var row=0,col=0;
    var row_len=document.getElementById("my_table").rows.length;
    var col_len=document.getElementById("my_table").rows[0].cells.length;
    if(!{'37':1,'38':1,'39':1,'40':1}[code]) return;
    switch(code)
      {
        case 37:
          if(col-1>0){
            col--;
          }
          break; 
        case 38:
          if(row-1>0){
            row--;
          }
          break;
        case 39:
          if(col+1<col_len){
            col++;
          }
          break;
        case 40:
          if(row+1<row_len){
            row++;
          }
          break;
         
      }
    var obj = document.getElementById("my_table").rows[row].cells[col]; 
    obj.setAttribute("class", "active");   
event.preventDefault();
   
  };
}
bind();

具体效果展示在codepan:https://codepen.io/Skyeeee227/pen/ExKdvJJ

lovelymonkey227

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
2020百度前端笔试编程题简化版-前端实现js控制css样式

前端实现js控制css样式原题里写的是会产生随机数，决定开始的格子是那一个，并且能根据按键来决定移动方向37 左 38:上 39:右 40:下以下为简化版的解法html<html> <table id="my_table"> <tr><td></td><td></td><td></td><td></td><td></td></
复制链接

扫一扫