1.填空题
（1）获取随机数的方法：Math.random
（2）JS中奖一个变量前置强制改成浮点类型的方法：parseFloat(String)
（3）根据id获取元素的原生js方法：getElementById();
（4）将文档声明为HTML5文档类型，需要在文档头添加：<!DOCTYPE html>
（5）Chrome浏览器的私有样式前缀：-webkit-
（6）CSS3设置圆角的属性名：border-radius
（7）CSS中，#是根据id来选择元素的，.是根据类名来选择元素的。
（8）form标签特有的属性请列举三个：method、action、enctype、target
（9）正则表达式中，$是什么意思：结尾位置
（10）typeof ‘123‘返回：number
2.简答题
（1）自定义一个浏览器兼容的事件绑定方法需要注意哪些问题？(答案不确定)
对以存在的事件绑定方法进行判断。
能兼容各主流浏览器。
IE中没有捕获阶段，只能处理冒泡阶段。
IE里事件触发的顺序和标准浏览器相反（现在一致了）
（2）设计一个布局方案，使得页面在pc端和pad端显示为一行三列，在手机端为一列三行。
样式：
.parent-fix {
margin-left:-20px;
}
.parent {
display:table;
width:100%;
table-layout:fixed;
}
.column {
display:table-cell;
padding-left:20px;
}
@media screen and (max-width:320px){
.parent-fix {
margin-left: 0;
}
.parent {
display:block;
width:100%;
}
.column {
display:block;
padding-left:0;
}
}
结构：
<div class="parent-fix">
<div class="parent">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
</div>
（3）请解释JSONP的工作原理
JSONP是处理跨域资源访问的。
JSONP的原理是利用html页面中的script标签可跨域的原理，利用<script>标签向服务器端请求一段JS代码，
然后，执行这段js代码，实现跨域的过程。
（4）display和position都有哪些值？分别列举一下这些值的用途？
display：block/inline/inline-block /table/table-cell/none
position: relative/absolute/fixed/static
display:block;/*当前元素以块级形式显示，默认宽度为父元素，可设定宽高，换行显示*/
display:inline;/*当前元素以行内形式显示，默认宽度为内容宽度，不可设宽高，同行显示*/
display:inline-block;/*显示时，默认宽度为内容宽度，可设宽高，同行显示*/
display:table;/*显示规则和block相同，但是样式为table的样式*/
display:table-cell;/*以table 单元格的样式显示*/
display:none;/*元素小时，位置也不占*/
position:relative;/*当前元素被设为相对定位，元素在文档流中，百分比的参照物是元素本身*/
position:absolute;/*当前元素被设为绝对定位，元素脱离文档流，定位参照物：第一个定位祖先/根元素*/
position:fixed;/*当前元素被设为固定定位，默认宽度为内容宽度，脱离文档流，参照物是视窗*/
（5）地址栏输入一个地址后，输入回车，描述一下这是开始，浏览器做什么。
1.在浏览器中输入要的网址：例如：facebook.com
2.浏览器查找域名的IP地址
导航的第一步是通过访问的域名找出其IP地址。DNS查找过程如下：
浏览器缓存--浏览器会缓存DNS记录一段时间。但操作系统没有告诉浏览器存储的时间，这样各个浏览器会存储各自的
一个固定的时间（2分钟到30分钟不等）。
系统缓存--如果在浏览器缓存里没有找到需要的记录，浏览器会做一个系统调用（windows里是gethostbyname）。这样便能获得系统缓存中 的记录。
路由器缓存--接着，前面的查询请求发向路由器，它一般有自己的DNS缓存。
ISP（互联网服务提供商） DNS缓存--接下来要检测的就是ISP的缓存DNS的服务器。在这一般都能找到相应的缓存记录。
递归搜索--你的ISP的DNS服务器从根域名服务器开始进行递归搜索，从.com顶级域名服务器到facebook的域名服务器。一般DNS的缓存
中会有.com域名服务器中的域名，所以到顶级服务器的匹配过程不是那么必要了。
但是，DNS有一点令人担忧，像wikipedia.org或者facebook.com这样的整个域名看上去就对应着一个单独的IP地址，还好有几种方法可以消除这个瓶颈：
循环DNS：是DNS查找时返回多个IP时的解决方案。举例来说，facebook.com实际上就对应了4个IP地址。
负载平衡器：是以一个特定IP地址进行侦听并将网络请求转发到集群服务器上的硬件设备。一些大型的站点一般都会使用这种昂贵的高性能复杂平衡器。
地理DNS根据用户所处的地理位置，通过把域名映射到多个不同的IP地址提高可扩展性。这样不同的服务器不能够更新同步状态，但映射静态内容的话非常好。
Anycast 是一个IP地址映射到多个物理主机的路由技术。美中不足，Anycast与TCP协议适应的不是很好，所以很少应用在那些方案中。
大多数DNS服务器使用Anycast来请求高效低延迟的DNS查找。
3.浏览器给web服务器发送一个HTTP请求
因为像Facebook主页这样的动态页面，打开后在浏览器缓存中很快甚至马上就会过期，毫无疑问他们不能从缓存中读取，所以，浏览器将把一个请求发送到Facebook所在的服务器：
4.facebook服务的永久重定向响应
5.浏览器跟踪重定向地址
6.服务器“处理”请求
7.服务器发回一个HTML响应
8.浏览器开始显示HTML
9.浏览器发送获取嵌入在HTML中的对象
10.浏览器发送异步（Ajax）请求
5.应用题
（1）创建一个js类，模拟实现方法的重载。
function A(){
this.a=null;
this.b=null;
}
var pro = A.prototype;
//模拟重载
pro.add = function(){
if(arguments.length==1){
console.log(arguments[0]);
}
if(arguments.length==2){
result = arguments[0]+arguments[1];
console.log(result);
}
}
var a = new A();
a.add(1);
a.add(1,2);
(2)JS中会有排序的需求，用jS实现一个标准的排序算法，对一个数字数组进行由小到大的排列。
var b = [2,3,8,3,1,5];
sort1(b);
console.log(b);
function sort1(a){
var i,j;
for(i=0;i<a.length;i++){
var temp;
var flag=0;
for(j=0;j<a.length;j++){
if(a[j]>a[j+1]){
temp = a[j+1];
a[j+1]=a[j];
a[j]=temp;
flag=1;
}
}
if(flag==0)break;
}
return a;
}
4.编程题
用HTML、css和js魔力实现下拉框，使得下拉框在各个浏览器的样式和行为完全一致。说出你的设计方案，并且重点说明功能设计实现时要考虑的因素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
p,ul {
margin: 0;
}
ul {
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
.btn {
border: 1px solid #000;
width: 100px;
text-align: center;
margin-bottom: 0.5px;
cursor: pointer;
padding: 2px 0;
}
.down {
width: 100px;
border: 1px solid #000;
text-align: center;
display: block;
}
.l_sm {
border: 1px solid grey;
list-style: none;
padding: 2px 0;
cursor: pointer;
}
.l_sm:hover {
}
</style>
</head>
<body>
<p class="btn" id="btn">点击</p>
<ul class="down" id="show" >
<li class="l_sm"><a href="#">第一项</a></li>
<li class="l_sm"><a href="#">第二项</a></li>
<li class="l_sm"><a href="#">第三项</a></li>
<li class="l_sm"><a href="#">第四项</a></li>
</ul>
<script type="text/javascript">
var btn = document.getElementById("btn");
var show = document.getElementById("show");
btn.addEventListener("click",function(){
var style = window.getComputedStyle(show).display;
if(style=="block"){
show.style.display = "none";
}else{
show.style.display = "block";
}
});
</script>
</body>
</html>