记录一次笔试1

最新推荐文章于 2024-09-05 23:16:39 发布

vegetable_ji

最新推荐文章于 2024-09-05 23:16:39 发布

阅读量88

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/vegetable_ji/article/details/126791586

版权

博客作者分享了他在珠海找到的一个Web开发实习项目的经历，主要任务是实现一个允许用户最多选择四个选项的功能。他在CSS布局和JavaScript事件处理上遇到了挑战，特别是理解盒子模型、浮动和相对定位，以及处理checkbox的选择限制。代码中，他通过获取元素、监听点击事件和动态管理数组来实现功能，但遇到了点击后无法取消选择的bug。

摘要由CSDN通过智能技术生成

boss上找的，珠海web开发实习，要求24小时内做好打包发过去

如图

我写的

还原了70%吧，很多时间花在写css上，对盒子模型和浮动和相对定位那些还不是很熟悉

算法题，8会，g！

这道题一开始以为很简单，但是却花了很多时间

首先是<script>的位置，放在head和放在body前后是有区别的，放在head里的时候是在加载页面之前dom树就到那了，所有要写函数的话要加window.onload()
然后就是绑定checkbox的问题，不能用getElementsByid，所以只能用getElementsBytagname，getElementsBytagname也不能直接绑定div里面的checkbox，只能用div[0]来绑定
最后就是把点击过的checkbox放进数组里，然后把第四个选的放进数组，判断满四个之后删掉最后一个然后再把最后一个的checked状态改成false，但是不知道为什么点了就选择不能点回来，有bug= =

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">
        // ToDo: Add your code here
         window.onload=function(){
        var bb=document.getElementsByTagName("input");
        console.log(bb);
        var ary=[];
        bb[0].addEventListener('click',function(){
          if(bb[0].checked=true){
           ary.push(bb[0])
          }
    
          if(ary.length>3){
            
            ary[0].checked=false
            ary.pop();
         }
        },false)
         
        bb[1].addEventListener('click',function(){
          if(bb[1].checked=true){
           ary.push(bb[1])
          }
       
          if(ary.length>3){
            
            ary[0].checked=false
            ary.pop();
         }
        },false)
        bb[2].addEventListener('click',function(){
          if(bb[2].checked=true){
           ary.push(bb[2])
          }
          if(ary.length>3){
            
            ary[0].checked=false
            ary.pop();
         }
        },false)
           bb[3].addEventListener('click',function(){
          if(bb[3].checked=true){
           ary.push(bb[3])
          }
          if(ary.length>3){
            
            ary[0].checked=false
            ary.pop();
         }
        },false)
        bb[4].addEventListener('click',function(){
          if(bb[4].checked=true){
           ary.push(bb[4])
          }
          if(ary.length>3){
            
            ary[0].checked=false
            ary.pop();
         }
        },false)
    }
    </script>
</head>
<body>
    <div >
        <input type="checkbox"  />  check1
        <input type="checkbox" />  check2
        <input type="checkbox" />  check3
        <input type="checkbox" />  check4
    </div>
</body>
</html>