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>