参加完触宝的前端笔试,总结一下笔试的题
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;
}