关于前端的碎碎念5-web前端常见面试问题总结(2)
【摘要】 web前端常见面试问题总结(2)
1.请描述一下 cookies、sessionStorage 和 localStorage 的区别？
2.如何在页面上实现一个圆形的可点击区域？
3.CSS3有哪些新特性？
1.请描述一下 cookies、sessionStorage 和 localStorage 的区别？
这是一种对比性比较强的问题，可以先说他们的相同点，然后就是要详细阐述他们的不同点，而不同点不要刻意去对比，只要说出各自的特点，自然他们的不同点就出来了。
相同点：都存储在客户端
不同点：
1.存储大小
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
2.有效时间
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
3. 数据与服务器之间的交互方式
cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
Cookie的操作（有点小难度）防止面试官细问cookie的操作。
设置Cookie
cookie的几个要素
cookie的内容：采用 key=value;key=value……存储，参数名自定义
cookie的过期时间：使用参数expires
cookie的路径：使用参数path，"/"表示这个网站的页面，不推荐!容易产生冲突
注意：形如“/pro/index.html”路径，在google浏览器正常，在IE浏览器得不到值
cookie的表示方式示例
var name = "jack"; var pwd = "123"; var now = new Date(); now.setTime(now.getTime() +1 * 24 * 60 * 60 * 1000);//转毫秒 var path = "/";//可以是具体的网页 document.cookie = "name=" + name + ";expires=" + now.toUTCString() + ";path=" + path;//姓名 document.cookie= "pwd=" + pwd + ";expires=" + now.toUTCString()+ ";path=" + path; //密码
读取cookie
获取cookie内容
vardata=document.cookie;//获取对应页面的cookie
解析cookie
方式1：截取字符串
function getKey(key) {
var data = document.cookie;
var findStr = key + "=";
//找到key的位置
var index = data.indexOf(findStr);
if (index == -1)
return null;
var subStr = data.substring(index +findStr.length);
var lastIndex = subStr.indexOf(";");
if (lastIndex == -1) {
return subStr;
} else {
return subStr.substring(0,lastIndex);
}
}
方式2：使用正则表达式+JSON
function getKey(key) {
return JSON.parse("{\"" +document.cookie.replace(/;\s+/gim, "\",\"").replace(/=/gim, "\":\"") + "\"}")[key];
}
清除cookie
var name = null; var pwd = null; var now = new Date(); var path = "/";//可以是具体的网页 document.cookie= "name=" + name + ";expires=" + now.toUTCString()+ ";path=" + path;//姓名 document.cookie = "pwd=" + pwd + ";expires=" + now.toUTCString()+ ";path=" + path; //密码
2.如何在页面上实现一个圆形的可点击区域？
这道题目是比较开放的题目，答案显然是不只一个的，以下给大家讲解三种解决方案。
map+area（使用Dreamweaver制作热点）
使用Dreamweaver制作热点会变得非常的容易，最终会形成下面的代码
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> </head> <body> <img src="C:/Users/coder/Desktop/586358ce77985.jpg" width="1366" height="768" border="0" alt="" usemap="#Map"> <map name="Map" id="Map"> <area shape="circle" coords="821,289,68" href="www.baidu.com" target="_blank" /> </map> </body> </html>
border-radius（H5）
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
.huawei{
width:100px;
height:100px;
background-color:dimgray;
border-radius: 50%;
cursor: pointer;
position: absolute;
left:50px;
top:50px;
line-height: 100px;
text-align: center;
color: white;
}
</style>
</head>
<body>
<div class="huawei">华为第三阶段前端课程</div>
</body>
</html>
纯js实现
需要求一个点在不在圆上简单算法、获取鼠标坐标等等
两点之间的距离计算公式
上面公式对于JavaScript代码如下：
|AB|=Math.abs(Math.sqrt(Math.pow(X2-X1),2)+Math.pow(Y2-Y1,2)))
Math.abs()求绝对值
Math.pow(底数,指数)
Math.sqrt()求平方根
示例：
假设圆心为（100,100）,半径为50，在圆内点击弹出相应的信息，在圆外显示不在圆内的信息
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
.huawei{
width:100px;
height:100px;
background-color:dimgray;
border-radius: 50%;
cursor: pointer;
position: absolute;
left:50px;
top:50px;
line-height: 100px;
text-align: center;
color: white;
}
</style>
<script>
document.onclick=function(e){
var r=50;//圆的半径
var x1=100,y1=100,x2= e.clientX;y2= e.clientY;
//计算鼠标点的位置与圆心的距离
var len=Math.abs(Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2)));
if(len<=50){
console.log("内")
}else{
console.log("外")
}
}
</script>
</head>
<body>
<div class="huawei">华为第三阶段前端课程</div>
</body>
</html>
3.CSS3有哪些新特性？
CSS3的特性那么多该从哪里说起了？很显然这道题目是有陷阱的，你不可能将所有的特性一个不漏的说出来，就算你说出来，别人还认为你是背的了！所以你主要讲一下在项目中经常用到的Css3的属性就可以，以第一人称来回答这个问题，例如：在我们的项目中经常用CSS3中的XX属性来实现XX特效。
CSS3的选择器
1）E:last-child 匹配父元素的最后一个子元素E。
2）E:nth-child(n)匹配父元素的第n个子元素E。
3）E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。
@Font-face 特性
Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。 以iconfont字体为例
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1597722251063'); /* IE9 */
src: url('iconfont.eot?t=1597722251063#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
url('iconfont.woff?t=1597722251063') format('woff'),
url('iconfont.ttf?t=1597722251063') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1597722251063#iconfont') format('svg'); /* iOS 4.1- */
}
/* Logo 字体 */
@font-face {
font-family: "iconfont logo";
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
}
.logo {
font-family: "iconfont logo";
font-size: 160px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.iconzhiduguanli:before {
content: "\e61e";
}
.iconhuabanfuben:before {
content: "\e652";
}
.iconwode:before {
content: "\e61f";
}
.iconyemian-copy-copy:before {
content: "\e600";
}
.iconxiaoshoufenxi:before {
content: "\e604";
}
.iconxiangmuguanli:before {
content: "\e601";
}
圆角
border-radius: 15px; 见问题2 圆形触控区域用法
多列布局 （multi-column layout） 兼容性不是很好，一般不推荐使用
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
.mul-col{
column-count: 3;
column-gap: 5px;
column-rule: 1px solid gray;
border-radius: 5px;
border:1px solid gray;
padding: 10px ;
}
</style>
</head>
<body>
<div class="mul-col">
<div>
<h3>阶段1</h3>
<p>html css</p>
</div>
<div>
<h3>阶段2</h3>
<p>JavaScript基础</p>
</div>
<div>
<h3>阶段3</h3>
<p>node vue</p>
</div>
</div>
</body>
</html>
阴影（Shadow）
.mul-col h3{
text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5);
}
CSS3 的渐变效果
.mul-col{
column-count: 3;
column-gap: 5px;
column-rule: 1px solid gray;
border-radius: 5px;
border:1px solid gray;
padding: 10px ;
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));
}
这里 linear 表示线性渐变，从左到右，由蓝色（#2A8BBE）到红色（#FE280E）的渐变。更多使用方法可以参考w3cshool css3手册
css弹性盒子模型
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
.boxcontainer {
width: 500px;
display: -webkit-box;
display: -moz-box;
-webkit-box-orient: horizontal;/*横排*/
-moz-box-orient: horizontal;
}
.item {
background: pink;
font-weight: bold;
margin: 2px;
padding: 20px;
color: #fff;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<div class="boxcontainer">
<div class="item">阶段1</div>
<div class="item">阶段2</div>
<div class="item">阶段3</div>
<div class="item">阶段4</div>
</div>
</body>
</html>
CSS3制作特效
Transition 对象变换时的过渡效果
transition-property 对象参与过渡的属性
transition-duration 过渡的持续时间
transition-timing-function 过渡的类型
transition-delay 延迟过渡的时间
缩写：transition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;
拆分：
transition-property:border-color, background-color, color;
transition-duration:.5s, .5s, .5s;
transition-timing-function:ease-in, ease-in, ease-in;
transition-delay:.1s, .1s, .1s;
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
.boxcontainer {
width: 600px;
display: -webkit-box;
display: -moz-box;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
}
.item {
background: pink;
font-weight: bold;
margin: 2px;
padding: 20px;
color: #fff;
font-family: Arial, sans-serif;
transition:background-color .6s ease-in 0s;
}
.item:hover{
background-color: red;
}
</style>
</head>
<body>
<div class="boxcontainer">
<div class="item">阶段1</div>
<div class="item">阶段2</div>
<div class="item">阶段3</div>
<div class="item">阶段4</div>
</div>
</body>
</html>
Transforms 2D转换效果
主要包括 translate（水平移动）、rotate（旋转）、scale（伸缩）、skew（倾斜）
.item {
background: pink;
font-weight: bold;
margin: 2px;
padding: 20px;
color: #fff;
font-family: Arial, sans-serif;
transition:background-color .6s ease-in 0s;
transition:transform .6s ease 0s;
transform: rotate(0deg);
}
.item:hover{
background-color: red;
transform: rotate(180deg);
}
Animation动画特效 自定义动画特效 更多使用可以看w3cshool手册
.boxcontainer:hover{
animation: animations 2s ease 0s;
}
@keyframes animations {
0%{
left: 10px;
opacity: 1;
}
50%,70%{
left: 50%;
opacity: .7;
margin-left:-150px;
}
100%{
left: 100%;
opacity: 0;
margin-left:-300px;
}
}
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）