前端笔试题目tuniu

最新推荐文章于 2024-04-18 16:22:07 发布

原创最新推荐文章于 2024-04-18 16:22:07 发布 · 402 阅读

1 ·

CC 4.0 BY-SA版权

前端面试题目汇总专栏收录该内容

4 篇文章

订阅专栏

本文是一份关于前端技术的基础测试题解析，包含了HTML、CSS布局、JavaScript基础操作及JSON转换等内容，适合初学者进行自我评估。

tuniu
http://www.cnblogs.com/qzsonline/archive/2012/08/22/2651237.html

请在15分钟内完成如下基础测试题：
●请自行新建一个空文本文档答题。
●请使用原生javascript语法答题，禁止使用Jquery等框架语法
●请注意有的题目是两个问题，请回答完全，否则答对一半题
●需要写代码的地方，请写完整包括大小写，否则算错
●描述性的题目写清楚主要的意思就可以了

1.如下两个div元素垂直距离是多少？

1 <</span>div style="margin-bottom:20px"></</span>div>


2 <</span>div style="margin-top:10px"></</span>div>

答案：20px

2.编写css让div2在div1的右下角？

1 <</span>div id="div1">


2         <</span>div id="div2"></</span>div>


3 </</span>div>

1 #div1{position:relative;}


2 #div2{right:0px;bottom:0px;position:absolute;}

父对象相对定位，子对象以父对象为参考点绝对定位；
外层的div设置为相对定位，内层的div设置为绝对定位；

3.怎么样让一个已知宽高的div元素水平居中？

答案：

1 margin:0 auto;

4.以下的div背景是什么颜色的？

1 .a{background-color:#FF0000;}


2 .b{background-color:#00FF00;}

1 <</span>div class="b a"></</span>div>

答案：#00ff00;

5.用css给如下按钮设置背景图片bg.jpg，并隐藏按钮上的文字？

1 <</span>input type="button" value="提交" />

答案：

1 input{


2 background:url(bg.jpg) no-repeat;


3 overflow:hidden;


4 width:px;height:px;


5 font-size:0;


6 line-height:0;


7 text-indent:-9999px;


8 }

6.将如下字符串转变成json对象

1 var str = "{a:1,b:2,c:true,d:'hello'}";

2

3 //答案


4 var json1 = eval_r('(' + str + ')');

5 var json2 = json2 = JSON.parse(str);
6 console.log(json1.value);

7 console.log(json2.value);

7.在如下数组第二个元素后插入一个元素3

1 var ar = [1, 2, 4, 5, 6];

2 


3 //答案


4 ar.splice(2, 0, 3);

8.请根据每个元素的i属性，由小到大，排序如下数组

1 var ar = [{i: 5,v: 1}, {i: 2,v: 4}, {i: 3,v: 2}, {i: 1,v: 5}, {i: 4,v: 3}];

2 


3 //答案


4 ar.sort(function(a, b) {

5 return a.i - b.i;


6 });

9.以空格字符串作为分隔字符串，将如下字符串拆分成数组（每个元素不能含有空格字符）

1 var str = 'a b c 20 d e f g 123';


2 


3 //答案


4 str.split(/\s+/);

10.请将如下数据库表的记录用json表示出来
id name city
--------------------------
1 Tom London
2 John Newyork
3 Alice Paris

1 [{"id":"1","name":"Tom","city":"London"},

2 ...


3 ]

11.编写代码让f1继承f2的所有成员

 1 function f1() {

 2 this.a1 = 1;
 

3 this.b1 = 2;
 

4 }
 

5 
 

6 function f2() {

 7 this.a2 = 3;
 

8 this.b2 = 4;
 

9 }


10 


11 //答案


12 f1.prototype = new f2();

13 f1.prototype.constructor = f1;

12.把16进制颜色转变成rgb颜色，如:#FFFFFF等同rgb(255,255,255)

1 function exChange(color) {


2 return 'rgb(' + parseInt(color.substr(1, 2), 16) + ',' + parseInt(color.substr(3, 2), 16) + ',' + parseInt(color.substr(5, 2), 16) + ')';

3 }

分类: js/jq