web前端面试

最新推荐文章于 2024-05-14 02:09:17 发布

qq_35727895

最新推荐文章于 2024-05-14 02:09:17 发布

阅读量252

点赞数

**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，唯一性

qq_35727895

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端面试

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 ，中间自适应...
复制链接

扫一扫