web前端校招笔试题集锦

时间:2021-08-26 16:27:43
写一个求和的函数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

  <script type="application/javascript">
function getText(){
//获取input的值
var testName = document.getElementsByTagName("input")[0].value;
//<p>节点
var pNode = document.getElementsByTagName("p")[0]; var newArray = new Array(); //拆分之后的字符串存入到arryStr中
var arryStr = testName.split("");
//循环判断
for(var i=0;i<arryStr.length;i++){
//当判断第i个字符串不等于"."的时候,就将数组中最后一个字符pop()出来,push()到newArray数组中
if(arryStr[i]!="."){
newArray.push(arryStr.pop());
}
}
//将newArray中的每个字符都连接连接成一个字符串,并且反转,复制给p节点的文本
pNode.textContent = newArray.reverse().join("");
}
</script> <body>
文件名:<input type="text" value=""/><br>
文件格式:<p> </p><br>
<button id="btn" onclick="getText()">点击</button>
</body>

输出效果:

web前端校招笔试题集锦

一开始没有考虑到反转的问题,由于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);
}