首页 > 代码库 > WEB前端笔试题(1)——狼厂

WEB前端笔试题(1)——狼厂

1.至少写出3个css3新增的属性,HTML5强调标签的语义化,写出5个HTML5的语义化标签。

边框:border-radius、box-shadow、border-image背景:background-clip、background-size、background-origin文本:text-shadow、word-wrap、word-break、text-overflow:ellipsis字体:@font-face转换:transform、transform-origin过度:transition动画:@keyframes多列:column-count、column-gap、column-rule、column-spanUI:resize、box-sizing、outline、outline-offset 
<header>、<hgroup>、<nav>、<aside>、<article>、<section>、<footer>、<address>

2.使用javascript实现,将文档中className有“test”的li标签背景色设为黄色。

        var testElement = getElByTagClass("li","test");        for(var i=0;i<testElement.length;i++){            if(testElement[i].tagName.toLowerCase()=="li"){                testElement[i].style.backgroundColor="yellow";            }        }        function getElByTagClass(tagname,classname){            if(document.getElementsByClassName){                return document.getElementsByClassName(classname);            }            else{                var objs = document.getElementsByTagName(tagname);                var els = new Array();                for(var i=0;i<objs.length;i++){                    if(objs[i].className == classname){                        els.push(objs[i]);                    }                }                return els;            }        }

注:兼顾到了getElementByClassName方法的浏览器兼容性,以及tagName的大小写问题,不过好像逻辑上有点乱=0=

3.使用Javascript打印出1-10000之间的所有对称数(例如 121 1331等)

 1 function printOppo(){ 2     for(var i=10;i<10000;i++){ 3         var str=i.toString(); 4         var ibegin=0; 5         var iend=str.length-1; 6          7         while(ibegin<iend){ 8             if(str[ibegin] == str[iend]){ 9                 flag=true;10                 ibegin++;11                 iend--;12             }else{13                 flag=false;14                 break;15             }16         }17         if(flag==true)18             console.log(i);19         20     }21 }

4.使用Javascript打印出1-10000之间的所有素数

function printSushu(){    var i=3,sqrtVal,flag,result=[2];    while(i<10000){        sqrtVal = Math.floor(Math.sqrt(i));        flag = false;        for(var stack in result){            if(result[stack]<=sqrtVal && i%result[stack] == 0){                flag = true;                break;            }        }        if(!flag) {            result.push(i);        }        i += 2;    }    console.log(result);}

 

5.用javascript实现控制一个文本框的输入字数限制,超出字数限制文本框飘红显示。

解1:

 1 function controlInput(id,maxlen){ 2     var obj = document.getElementById(id); 3     if("\v"=="v"){ 4         obj.onpropertychange = myFun(id,maxlen); 5     }else{ 6         obj.addEventListener("input",function(){myFun(id,maxlen)},false); 7     } 8     function myFun(){ 9         var value =http://www.mamicode.com/ obj.value;10         if(value.length > maxlen){11             obj.style.border="1px solid red";12             obj.style.background="#FBE2E2";13             obj.style.color="red";14             if(!document.getElementById("span1")){15                 var el = document.createElement("span");16                 el.id="span1";17                 el.innerText="请不要输入超过"+maxlen+"个字符!"18                 el.style.color="red";19                 el.style.fontSize="12px"20                 obj.parentNode.appendChild(el);21             }22         }23     24     }25 }

注:IE没有Input事件,用onpropertychange代替,因为onchange事件要焦点离开才会触发

<input id="input1"/><script>controlInput("input1",5)</script>

解2(在网上查到的人家的写法):

<input type="text" onkeyup="javascript:this.style.border=(this.value.length>10?‘1px solid #F00‘:‘‘)"/>

6.当你打开浏览器输入http://www.baidu.com/在搜索框中输入“HTML5”的,然后返回结果,在这个过程中计算机与网络发生了什么?你有什么建议?

输入框挂载 onchange 事件,获取客户端输入
通过ajax 传回后台,查数据库,查出 若干匹配项,装进 list,返回给 jsp 输出
ajax 回调方法接收 jsp 的输出,将输出转为一段段字符串,装进输入框下方的 table 或 div 里。

7.浏览器上本地存储和缓存的一些相关知识点 

本地存储技术:

  1. cookie(IE6<2K)
  2. Flash ShareObject(Flash支持)
  3. Google Gear(640K,Gear组件)
  4. userData(IE)
  5. globalStorage(Firefox)
  6. localStroage(HTML5,Firefox 3.5、Safari 4和IE8+)

  总结:Flash shareobject  或者  结合使用userData(IE6+)和globalStorage(Firefox2+)和localStorage(chrome3+)实现跨浏览器。

  链接:http://daybook.diandian.com/post/2013-05-23/40050598904

缓存:为了提高访问网页的速度,浏览器会采用累积式加速的方法,将你曾经访问的网页内容(包括图片JS以及cookie文件等)存放在电脑里。这个存放空间,我们就称它为缓存。以后我们每次访问网站时,浏览器会首先搜索这个目录,如果其中已经有访问过的内容,那就不必再发起HTTP请求来下载资源,而直接从缓存中调出来,从而提高了访问网站的速度。

  HTML5:sessionStorage

  链接:http://www.cnblogs.com/yuzhongwusan/archive/2011/12/19/2293347.html

P.S:正好最近做了个WEB小游戏,本地存储的时候将一个对象用localStorage的方法存储了,然后取出来的时候就无法解析了,最后还是将对象转化成json存储

localStorage["key1"] = JSON.stringify(Object); 

Object=eval("(" + localStorage["key1"]+ ")");

 

WEB前端笔试题(1)——狼厂