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等)
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 = 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.浏览器上本地存储和缓存的一些相关知识点
本地存储技术:
- cookie(IE6<2K)
- Flash ShareObject(Flash支持)
- Google Gear(640K,Gear组件)
- userData(IE)
- globalStorage(Firefox)
- 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"]+ ")");