1. 一个200*200的div在不同分辨率屏幕上下左右居中，用css实现
div
{
position:absolute;
width:200px;
height:200px;
top:50%;
left:50%;
margin-left:-100px;
height:-100px;
z-index:1000;
}
2. 写一个左中右布局占满屏幕，其中左右两块是固定宽度200 ，中间自适应宽，要求先加载中间块，请写出结构及样式：
<body>
<div id="left">我是左边</div>
<div id="right">我是右边</div>
<div id="center">我是中间</div>
</body>
html,body{
margin:0;
width: 100%;
}
#left,#right{
width: 200px;
height:200px;
background-color:pink;
position: absolute;
}
#left{
left: 0;
}
#right{
right: 0;
}
#center{
height: 200px;background-color: aqua;
margin: 0 200px;
}
3.清除浮动
<body>
<div id="parent">
<div class="child"></div>
<div class="child"></div>
</div>
<p>哈哈</p>
</body>
.child{
width: 100px;
height: 100px;
background-color: blueviolet;
float: left;
border:1px solid black;
}
方法一：使用overflow属性来清除浮动
#parent{
overflow: hidden;
}
方式二:使用额外标签法
<div id="parent">
<div class="child"></div>
<div class="child"></div>
<div style="clear: both"></div>
</div>
方法三:使用伪元素来清除浮动(after意思:后来,以后)
.clearfix:after{
content:"";
height:0;
line-height:0;
display:block;
visibility:hidden;
clear:both;
}
.clearfix{
zoom:1;
}
4.css sprites使用
ico {width: 16px;height:16px;background: url("bg_sprite.png") no-repeat 0 -234px;}
5.如何用原生js给一个按钮绑定两个onclick事件？
<script>
var el = document.getElementById('btn');
el.addEventListener('click',f1);
el.addEventListener('click',f2);
function f1(){
alert(11)
}
function f2(){
alert(22)
}
</script>
6. Javascript中的定时器有哪些？他们的区别及用法是什么？
setTimeout 只执行一次 setInterval 会一直重复执行
7.JS写倒计时
<div class="wrap">
<input type="tel" class="shuru" id="phone"/>
<button class="btn" id="send" onclick="time()">发送短信</button>
</div>
<script>
var wait=60;
function time(){
var btn=document.getElementById("send");
var str=btn.innerText;
if(wait==1){
btn.innerText="再次发送";
btn.removeAttribute("disabled");
wait=60;
}else{
wait--;
btn.innerText=wait+"s后重新获取";
btn.setAttribute("disabled",true);
setTimeout(function(){
time();
},1000);
}
}
</script>
8. 请描述一下 cookies sessionStorage和localstorage区别
相同点：都存储在客户端 不同点：
1.存储大小
· cookie数据大小不能超过4k。
· sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
2.有效时间
· localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
· sessionStorage 数据在当前浏览器窗口关闭后自动删除。
· cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
3. 数据与服务器之间的交互方式
· cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
· sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
9.使用ajax交互
$.ajax({
type: "POST",
url: "/login",
contentType: 'application/x-www-form-urlencoded;charset=utf-8',
data: {username:$("#username").val(), password:$("#password").val()},
dataType: "json",
success: function(data){
console.log(data);
}，
error:function(e){
console.log(e);
}
});
10.怎样添加、移除、移动、复制、创建和查找节点？
1）创建新节点
createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点
2）添加、移除、替换、插入 appendChild() //添加 removeChild() //移除 replaceChild() //替换 insertBefore() //插入
3）查找 getElementsByTagName() //通过标签名称 getElementsByName() //通过元素的Name属性的值 getElementById() //通过元素Id，唯一性
