您的位置：首页 > 职场人生

前端开发面试题（一）

2016-06-22 14:50 417 查看

一. html

1. 对html5、css3的理解，都有什么新增功能

html5和css3是对html4和css2的重大升级，增加了很多有用的新特性。

html5新特性：绘图（canvas）、离线式存储（localstorage、sessionstorage）、websocket、音视频增强标签（video、audio）。

css3新特性：css3选择器（selector）、字体（word-wrap、text-overflow、text-decoration、text-shadow）、多列布局（multi-column layout）、边框（border-radius）、变换（gradient、transform）、动画（transition、animation）

2. margin和padding的区别

margin是控件边缘相对父控件的边距。

padding是控件的内容相对控件的边缘的边距。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>The Olympic Flag</title>
<style>
body {
margin:20px;
background-color:#efefef;
}
ul.flag {
list-style-type:none;
position: relative;
margin: 20px auto;
}
.flag li, .flag li:before, .flag li:after {
-webkit-border-radius: 6em;
-moz-border-radius: 6em;
border-radius: 6em;
position: absolute;
}
.flag li {
width: 12em;
height: 12em;
left: 0;
top: 0;
font-size: 1em;
}
.flag li:after {
display: block;
content: "";
top: -0.1em;
left: -0.1em;
right: -0.1em;
bottom: -0.1em;
border: solid 1.4em black;
}
.flag .blue   { z-index: 10; left: 0; top: 0; }
.flag .yellow { z-index: 20; left: 6.8em;  top: 5.7em; }
.flag .black  { z-index: 21; left: 13.6em; top: 0; }
.flag .green  { z-index: 20; left: 20.4em; top: 5.7em; }
.flag .red    { z-index: 10; left: 27.2em; top: 0px; }
.flag .blue:after   { border-color: blue; }
.flag .yellow:after { border-color: yellow; }
.flag .black:after  { border-color: black; }
.flag .green:after  { border-color: green; }
.flag .red:after    { border-color: red; }
<!--蓝色压住黄色-->
.flag .blue.alt { z-index: 24; }
.flag .blue.alt,
.flag .blue.alt:before,
.flag .blue.alt:after {
border-top-color: transparent;
border-left-color: transparent;
border-bottom-color: transparent;
}
<!--黄色压住黑色-->
.flag .yellow.alt { z-index: 23; }
.flag .yellow.alt,
.flag .yellow.alt:before,
.flag .yellow.alt:after {
border-right-color: transparent;
border-left-color: transparent;
border-bottom-color: transparent;
}
<!--绿色压住黑色-->
.flag .green.alt { z-index: 23; }
.flag .green.alt,
.flag .green.alt:before,
.flag .green.alt:after {
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
}
<!--红色压住绿色-->
.flag .red.alt { z-index: 23; }
.flag .red.alt,
.flag .red.alt:before,
.flag .red.alt:after {
border-top-color: transparent;
border-right-color: transparent;
border-left-color: transparent;
}
</style>
</head>
<body>
<ul class="flag">
<li class="blue"></li>
<li class="blue alt"></li>
<li class="yellow"></li>
<li class="yellow alt"></li>
<li class="black"></li>
<li class="green"></li>
<li class="green alt"></li>
<li class="red"></li>
<li class="red alt"></li>
</ul>
</body>
</html>

View Code

二. js

1. js类型有哪些

字符串、数字、布尔、数组、对象、Null、Undefined

'1'+2+3=?  //123
'5'-3=?  //2

var a = {name:'xiaomin',age:20}
var b = a;
b.age=22;
a.name=?  //xiaomin
b.name=? //xiaomin
a.age=? //22
b.age=? //22

4. 使用原生js或者jquery给一个p标签设定一个点击事件用于获取自身的文本值

$(function(){
　　$("p").click(function(){
　　　　alert($(this).text());
　　});
})

5. 使用js遍历以下数据 var json={a:1,b:2,c:3}

var json={a:1,b:2,c:3};
for(var j in json){
　　document.writeln(j+":"+json[j]);
}

6. 编写一个数组去重的方法

Array.prototype.unique = function() {
　　var n = {}, r = [], len = this.length, val, type;
　　for (var i = 0; i < this.length; i++) {
　　　　val = this[i];
　　　　type = typeof val;
　　　　if (!n[val]) {
　　　　　　n[val] = [type];
　　　　　　r.push(val);
　　　　}

　　　　else if (n[val].indexOf(type) < 0) {
　　　　　　n[val].push(type);
　　　　　　r.push(val);
　　　　}
　　}
　　return r;
}

7. 编写一个方法，在数组中找到出现重复数字最多的元素

Array.prototype.repeatmax=function(){
var res = [];
this.sort();
for(var i = 0;i<this.length;i++){
var count = 0;
for(var j=i;j<this.length;j++)
{
if(this[i] == this[j])
{
count++;
}
}
res.push([this[i],count]);
i+=count;
}

var max = res[0][1];
var postion = 0 ;
for(var  i = 0 ;i<res.length;i++){
if(res[i][1]>max){
max = res[i][1];
postion = i;
}
}
return res[postion][0];
}

8. 请分析下面代码，给出执行结果，并分析为什么是这样的结果

var json={
name:'xiaomin',
sayName:function(){
alert(this.name)
}
}

function Foo(fn){
fn();
}

json.sayName(); //xiaomin

Foo(json.sayName); //空字符串

9.用原生js或者jquery写一个调用webservice(接口)的例子

a. 如何开发Web API? http://www.cnblogs.com/guwei4037/p/3603818.html

b. 如何跨域调用Web API? http://www.cnblogs.com/guwei4037/p/7193480.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航