触宝前端面试题

最新推荐文章于 2020-08-07 21:12:46 发布

weixin_34356138

最新推荐文章于 2020-08-07 21:12:46 发布

阅读量278

点赞数

文章标签：前端面试 ViewUI

原文链接：https://segmentfault.com/a/1190000002623096

版权

参加完触宝的前端笔试，总结一下笔试的题

1.一个页面上存储了10^n个按钮，请实现功能：点击按钮时，显示这是页面上的第几个按钮（alert即可）

代码如下：


window.onload=function(){
  var buttons=document.getElementsByTagName("button");
  for(var i=0;i<buttons.length;i++){
   buttons[i].index=i+1;
  }
  this.addEventListener('click',function(e){
     if(e.target.nodeType==1&&e.target.nodeName.toUpperCase()=="BUTTON")
       alert(e.target.index);
   },false);
}

2.用html+css实现如下框架：上方为四幅图片，实现其无缝连接，左边为导航栏，宽度固定为100px，右边长度可拉伸//图片没有，请自行脑补。。

主要代码如下：

html:


<body>
  <div class="top">
    <div class="photo"><img src="url"></div>
    <div class="photo"><img src="url"></div>
    <div class="photo"><img src="url"></div>
    <div class="photo"><img src="url"></div>
  </div>
  <div class="container">
  <div class="left">sidebar</div>
  <div class="right">content</div>
  </div>
</body>

css:


*{
    margin: 0;
    padding: 0;
}

.top{
  width:100%;
  height:50px;
  display:-moz-box;
  display:-webkit-box;
  display:box;
  padding:0;
  margin:0;

}
 
.top .photo{
    -moz-box-flex:1;
    -webkit-box-flex:1;
    box-flex:1;
}

.container{
  margin:0;
  padding:0;
}

.container::after,
.container::before{/*清除浮动*/
  content:"";
  display:table;
}

.container .left{
  width:100px;
  float:left;
}

.container .right{
  margin-left:100px;
}

weixin_34356138

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
触宝前端面试题

参加完触宝的前端笔试，总结一下笔试的题1.一个页面上存储了10^n个按钮，请实现功能：点击按钮时，显示这是页面上的第几个按钮（alert即可）代码如下：window.onload=function(){ var buttons=document.getElementsByTagName("button"); for...
复制链接

扫一扫