快捷搜索:

【web前端面试题整理01】各位加班累了吧,来做点前端面试题吧

前言

最近小叶子有点疲惫,主要是在外地工作生活上不太适应,吃一样的东西,我居然会拉肚子,而且是一个星期一个星期的。。。。

脸上长了一个豆豆一个星期还没消,我那个去啊。

昨天上午上班后,本来想继续研究javascript方面的东西的,但是下午要开会,结果一开就是4.5小时,哎哟,我那个怎么感觉很累啊,

明明是坐着的啊,开完会腰酸背痛的,回来吃过饭,本来想接着学习,却迷迷糊糊的睡着了......

按照进度我们本来想要开始做小窗口的,但是也碰到点问题,除了各大微博,其它数据全部是RSS,与我想象的数据源不一样,所以这块还需要点时间,加之今天起来还是有点疲惫,那我们不如这个周末就休息下吧,来做几道有意思的面试题好了,当是对前面学习的总结好了。

事情不顺利不要紧,我们一步一步来,没有什么事情做不完的。

布局类

我们前面已经学了很多CSS方面的东西了,我们现在来看看这道题,我们会怎么做呢?

这道题限制了只能使用三个div,并且我多float布局比较厌恶,所以第一步应该不会采用float,但是也必须考虑各个浏览器的兼容性,于是我第一份答案出来了:

 
 
     
     
  
  
  
  
   
         
     
 
 
          
          
          
 
 

各位看到了,虽然我比较像用inline-block,但是实施起来时候发现有点困难,并且我这里想到了其它东西:

,不管是怎样的布局,我的main内容皆应该放到最前面,优先加载,这也对后面将之改成响应式布局有好处。

这样做还有一个好处便是,我们主要内容若是临时要在左边的话,改起来也必将方便,不要动到html结构。

好了,我们现在来看看有没有其它方法,比如float:

 
 
     
     
  
  
  
  
   
         
     
 
 
          
          
          
 
 

有以下几个问题:

① 因为我们主要区域在前,所以后面两个浮动元素要改变位置才行,这与我们主要内容在前规则违背

② 若是此处主要内容要显示在左边的话,原来的CSS与HTML结构皆需改变

③ 浏览器兼容问题,原来的做法是没有兼容问题的,这里使用float不久后IE6下又会莫名其妙的搞好多问题出来(IE3像素,清楚浮动)

所以就这块布局来说,我是不会使用float布局的。

PS:哪位大哥有不同的意见请一定留言

于是我们来看看这道题第二个需求,他要鼠标划上扩大25%,根据我们布局1的话,这个题应该比较简单,而且某些情况下也许链js都不必使用了,但是我们这里不管他:

PS:

View Code

这个代码有很多问题,其实我本意也不完全是这个意思啦,其实要做好这道题我觉得应该做好以下几个事情:

① 封装获取dom的函数

② 封装操作dom属性的函数

③ 封装操作class的函数

④ 封装事件绑定的函数

有了以上几块后,这道题便很简单了,所以我们这里还是来封装以下吧。。。虽说我还真没全部写过,没有jquery操作dom真讨厌。。。

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
 }

以下附上实现的代码:

首先来几个简单的:

       id ? document.getElementById(id) :   
                        
          
                arr = el.className.split(' '          arrClass =          isExist =           ( i = 0, len = arr.length; i < len; i++              (arr[i] != ''              (arr[i] ==                 isExist =                              (isExist ==                cls = arrClass.join(' '             el.className =             setAttr(el, 'class'    
                arr = el.className.split(' '          arrClass =          ( i = 0, len = arr.length; i < len; i++              (arr[i] != '' && arr[i] !=  
          cls = arrClass.join(' '         el.className =         setAttr(el, 'class'  }

我们看到,firefox可以获取class列表,而ie几个浏览器只有className这一属性,所以操作class时候我们要用到AAAAAAAA align="left">但是获取当前样式却比较麻烦,还需要计算各个样式表的比重,我们这里用不到就暂时忽略了。

以上简单测试了一番,基本没有问题,我最后加上事件绑定,便暂时告一段落。

                            el.attachEvent('on' +         }              el.addEventListener(type , func,     
                            el.detachEvent('on' + 
         }              el.removeEventListener(type, func,    }

以上是很简陋的做法,若是要完全解决兼容性方法,需要call篡改IE事件中this指向,以及传入的e参数,但是那样对删除事件有提出了麻烦,我们这里便不管他了。

结语

今天状态不佳,暂时这样了吧,先去吃个饭再说。

http://www.bkjia.com/HTML_CSS/441277.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML_CSS/441277.htmlTechArticle前言 最近小叶子有点疲惫,主要是在外地工作生活上不太适应,吃一样的东西,我居然会拉肚子,而且是一个星期一个星期的。。。。 脸...

本文源自: AG88环亚

您可能还会对下面的文章感兴趣: