WEB前端笔试题（1）——狼厂

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

CSS3:
边框：border-radius、box-shadow、border-image

背景：background-clip、background-size、background-origin

文本：text-shadow、word-wrap、word-break、text-overflow:ellipsis

字体：@font-face   (使用的是Google Fonts API)

转换：transform、transform-origin

过度：transition

动画：@keyframes

多列：column-count、column-gap、column-rule、column-span

UI：resize、box-sizing、outline、outline-offset

HTML5:

<header>

网页和section的页眉，通常包含<hgroup>以及<h1>到<h6>作为整个页面或者一个内容块的标题

<header>
    <hgroup>
        <h1>网站标题</h1>
        <h1>网站副标题</h1>
    </hgroup>
</header>

<footer>

网页和section的页脚，通常包含一些基本信息如作者、版权、附录、索引等

<footer>
    COPYRIGHT@Yovnne冉冉
</footer>

<nav>

定义页面的主要导航部分，其他侧边栏面包屑等不属于主要导航

<nav>
    <ul>
        <li>HTML 5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
    </ul>
</nav>

<aside>、<article>

<article>表示文章，<aside>被用在其中表示一片文章的附属信息，如标签、相关资料、作者。

<aside>作用于整个页面时可以用作侧边栏，广告，其他导航

<section>

代表页面中的节，段。aside可以看做特殊的section

<section>
    <h1>section是啥？</h1>
    <article>
        <h2>关于section</h1>
        <p>section的介绍</p>
        <aside>
            <h3>关于其他</h3>
            <p>关于其他section的介绍</p>
        </aside>
    </article>
</section>

<address>

用在footer里，必须是联系信息等内容

用法和语义介绍：http://www.html5jscss.com/?p=30

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等）

function printOppo(){
    for(var i=10;i<10000;i++){
        var str=i.toString();
        var ibegin=0;
        var iend=str.length-1;
        
        while(ibegin<iend){
            if(str[ibegin] == str[iend]){
                flag=true;
                ibegin++;
                iend--;
            }else{
                flag=false;
                break;
            }
        }
        if(flag==true)
            console.log(i);
        
    }
}

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：

function controlInput(id,maxlen){
    var obj = document.getElementById(id);
    if("\v"=="v"){
        obj.onpropertychange = myFun(id,maxlen);
    }else{
        obj.addEventListener("input",function(){myFun(id,maxlen)},false);
    }
    function myFun(){
        var value = obj.value;
        if(value.length > maxlen){
            obj.style.border="1px solid red";
            obj.style.background="#FBE2E2";
            obj.style.color="red";
            if(!document.getElementById("span1")){
                var el = document.createElement("span");
                el.id="span1";
                el.innerText="请不要输入超过"+maxlen+"个字符！"
                el.style.color="red";
                el.style.fontSize="12px"
                obj.parentNode.appendChild(el);
            }
        }
    
    }
}

注：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"]+ ")");