web前端校招笔试题集锦
写一个求和的函数sum，达到下面的效果
// Should equal 15 sum(1, 2, 3, 4, 5); // Should equal 0 sum(5, null, -5); // Should equal 10 sum('1.0', false, 1, true, 1, 'A', 1, 'B', 1, 'C', 1, 'D', 1, 'E', 1, 'F', 1, 'G', 1); // Should equal 0.3, not 0.30000000000000004 sum(0.1, 0.2);
function sum() { var nResult = 0; for (var i = 0, l = arguments.length; i < l; i++) { nResult += window.parseFloat(arguments[i]) || 0; } return nResult.toFixed(3) * 1000 / 1000; }
请写一个表格以及对应的CSS，使表格奇数行为白色背景，偶数行为灰色背景，鼠标移上去时为黄色背景。
<table class="table"> <tr><td>第一行</td></tr> <tr><td>第二行</td></tr> <tr><td>第三行</td></tr> <tr><td>第四行</td></tr> </table> <style> .table tr:nth-child(2n-1){ background-color:white; } .table tr:nth-child(2n){ background-color:grey; } .table tr:hover{ background-color:yellow; } </style>
写一个traverse函数，输出所有页面宽度和高度大于50像素的节点。
function traverse(oNode) { var aResult = []; oNode = oNode || document.body; if (oNode.style) { var nWidth = window.parseInt(oNode.style.width, 10) || 0; var nHeight = window.parseInt(oNode.style.height, 10) || 0; if (nWidth > 50 && nHeight > 50) { aResult.push(oNode); } } var aChildNodes = oNode.childNodes; if (aChildNodes.length > 0) { for (var i = 0, l = aChildNodes.length; i < l; i++) { var oTmp = aChildNodes[i]; aResult = aResult.concat(traverse(oTmp)); } } return aResult; }
左图右文如何实现
<div class="item"> <div class="pic">...</div> <div class="content">...</div> </div> css实现： .item .pic { float:left;margin-right:10px; } .item .content { overflow:hidden;zoom:1; } /* 或用display:table-cell */
输入一个文件名，输出它相应的后缀 如输入 abc.txt 输出 txt
1 <script type="application/javascript"> 2 function getText(){ 3 //获取input的值 4 var testName = document.getElementsByTagName("input")[0].value; 5 //<p>节点 6 var pNode = document.getElementsByTagName("p")[0]; 7 8 var newArray = new Array(); 9 10 //拆分之后的字符串存入到arryStr中 11 var arryStr = testName.split(""); 12 //循环判断 13 for(var i=0;i<arryStr.length;i++){ 14 //当判断第i个字符串不等于"."的时候，就将数组中最后一个字符pop()出来，push()到newArray数组中 15 if(arryStr[i]!="."){ 16 newArray.push(arryStr.pop()); 17 } 18 } 19 //将newArray中的每个字符都连接连接成一个字符串，并且反转，复制给p节点的文本 20 pNode.textContent = newArray.reverse().join(""); 21 } 22 </script> 23 24 <body> 25 文件名：<input type="text" value=""/><br> 26 文件格式：<p> </p><br> 27 <button id="btn" onclick="getText()">点击</button> 28 </body>
输出效果：
一开始没有考虑到反转的问题，由于pop()是从后往前删除的，所以如果不进行反转，输出的文件格式是倒置过来的。而且我一开始就是用abc.txt来测试，输出结果尽管是错的但是也都是”txt“。
这道题目考察了比较多js对象的方法：
例如String对象的split()方法,是用于将字符串分割成字符串数组的；
Array对象的pop()方法，是用于删除并返回数组的最后一个元素的；
Array对象的push()方法,是向数组的末尾添加一个或多个元素，并返回新的长度的；
Array对象的join()方法，是把数组的所有元素放入一个字符串，然后元素通过指定的分隔符进行分隔；
Array对象的reverse()方法，用于颠倒数组中元素的顺序。
同时还考察了一些js操作dom的最基本的语法，例如getElementsByTagName什么的。
请给Array本地对象增加一个原型方法，它用于删除数组条目中重复的条目(可能有多个)，返回值是一个包含被删除的重复条目的新数组。
Array.prototype.distinct = function() { var ret = []; for (var i = 0; i < this.length; i++) { for (var j = i+1; j < this.length;) { if (this[i] === this[j]) { ret.push(this.splice(j, 1)[0]); } else { j++; } } } return ret; } //for test alert(['a','b','c','d','b','a','e'].distinct());
JS异步加载
function loadScript(url,callback){ var script=document.creatElement("script"); script.type="text/javascript"; if(script.readyState){ script.onreadystatechange=function(){
if(script.readyState=="loaded" || script.readyState=="complete"){ script.onreadystatechange=null; callback(); } } }else{ script.onload=function(){ callback(); } } script.src=url; document.getElementsByName("head")[0].appendChild(script); }
