在上周,给大家分享了第一部分的面试题,得到了小伙伴们的好评,也希望小伙伴们能够好好利用我整理的面试题,早日找到一份自己满意的工作!
好了,闲话少说,接招吧~
11、android 4.x bug
1.三星 Galaxy S4中自带浏览器不支持border-radius缩写
2.同时设置border-radius和背景色的时候,背景色会溢出到圆角以外部分
3.部分手机(如三星),a链接支持鼠标:visited事件,也就是说链接访问后文字变为紫色
4.android无法同时播放多音频audio
5.oppo 的border-radius 会失效
12、JS 判断设备来源
function deviceType(){
var ua = navigator.userAgent;
var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
for(var i=0; i<len,len = agent.length; i++){
if(ua.indexOf(agent[i])>0){
break;
}
}
}
deviceType();
window.addEventListener('resize', function(){
deviceType();
})
微信的 有些不太一样
function isWeixin(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=='micromessenger'){
return true;
}else{
return false;
}
}
13、audio元素和video元素在ios和andriod中无法自动播放
原因: 因为各大浏览器都为了节省流量,做出了优化,
在用户没有行为动作时(交互)不予许自动播放;
//音频,写法一
<audio src="music/bg.mp3" autoplay loop controls>
你的浏览器还不支持哦
</audio>
//音频,写法二
<audio controls="controls">
<source src="music/bg.ogg" type="audio/ogg"></source>
<source src="music/bg.mp3" type="audio/mpeg"></source>
优先播放音乐bg.ogg,不支持在播放bg.mp3
</audio>
//JS绑定自动播放(操作window时,播放音乐)
$(window).one('touchstart', function(){
music.play();
})
//微信下兼容处理
document.addEventListener("WeixinJSBridgeReady", function () {
music.play();
}, false);
//小结
//1.audio元素的autoplay属性在IOS及Android上无法使用,在PC端正常;
//2.audio元素没有设置controls时,在IOS及Android会占据空间大小,
而在PC端Chrome是不会占据任何空间;
//3.注意不要遗漏微信的兼容处理需要引用微信JS;
14、css实现单行文本溢出显示 ...
直接上效果:相对于多行文本溢出做处理, 单行要简单多,且更容易理解。
实现方法
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
当然还需要加宽度width属来兼容部分浏览。
15、实现多行文本溢出显示...
效果:
实现方法:
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
适用范围:
因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;
注:
1、-webkit-line-clamp用来限制在一个块元素显示的文本的行数。
为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
2、display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
3、-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
如果你觉着这样还不够美观, 那么就接着往下看:
效果:
这样 是不是你想要的呢?
实现方法:
div {
position: relative;
line-height: 20px;
max-height: 40px;
overflow: hidden;
}
div:after {
content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
不要只顾着吃,要注意胃口,此方法有个弊端
那就是 【未超出行的情况下也会出现省略号】 ,这样会不会很挫!!!
没办法,只能结合JS 进行优化该方法了。
注:
1、将height设置为line-height的整数倍,防止超出的文字露出。
2、给p::after添加渐变背景可避免文字只显示一半。
3、由于ie6-7不显示content内容,所以要添加标签兼容ie6-7
(如:<span>…<span/>);兼容ie8需要将::after替换成:after。
16、让图文不可复制
这点应该大家 都很熟悉了, 某些时候【你懂的】为了快捷搜索答案,可是打死也不让你复制
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
那有些网页为了尊重原创,复制的文本 都会被加上一段来源说明,是如何做到的呢?问的好! 等的就是你这个问题 -_- 。
大致思路:
1、答案区域监听copy事件,并阻止这个事件的默认行为。
2、获取选中的内容(window.getSelection())加上版权信息,
然后设置到剪切板(clipboarddata.setData())。
17、盒子垂直水平居中
这个问题好像面试必问的!反正我是必问的,哈哈!!! 其实无关多少种实现思路,只要你能实现就可以!
提供4种方法
1、定位 盒子宽高已知,
position: absolute;
left: 50%; top: 50%;
margin-left:-自身一半宽度;
margin-top: -自身一半高度;
2、table-cell布局
父级
display: table-cell;
vertical-align: middle;
子级
margin: 0 auto;
3、定位 + transform ; 适用于 子盒子 宽高不定时;
(这里是本人常用方法)
position: relative / absolute;
/*top和left偏移各为50%*/
top: 50%;
left: 50%;
/*translate(-50%,-50%) 偏移自身的宽和高的-50%*/
transform: translate(-50%, -50%);
注意这里启动了3D硬件加速哦 会增加耗电量的
(至于何是3D加速 请看浏览器进程与线程篇)
4、flex 布局
父级:
/*flex 布局*/
display: flex;
/*实现垂直居中*/
align-items: center;
/*实现水平居中*/
justify-content: center;
再加一种水平方向上居中 :
margin-left : 50% ;
transform: translateX(-50%);
18、改变placeholder的字体颜色大小
其实这个方法也就在PC端可以,真机上屁用都没有,当时我就哭了。 但 还是贴出来吧
input::-webkit-input-placeholder {
/* WebKit browsers */
font-size:14px;
color: #333;
}
input::-moz-placeholder {
/* Mozilla Firefox 19+ */
font-size:14px;
color: #333;
}
input:-ms-input-placeholder {
/* Internet Explorer 10+ */
font-size:14px;
color: #333;
}
19、最快捷的数组求最大值
var arr = [ 1,5,1,7,5,9];
Math.max(...arr) // 9
20、更短的数组去重写法
[...new Set([2,"12",2,12,1,2,1,6,12,13,6])]
// [2, "12", 12, 1, 6, 13]
21、 vue 父子组件嵌套时,组件内部的各个生命周期钩子触发先后顺序
首先 我们可以把 子组件当做function函数来看待,当父组件 import 子组件的时候, 就当是声明了 并加载了这个函数,在调用的时候才会去执行这个函数(子组件)。
那么父子组件中的各个声明周期钩子触发的先后顺序是怎样的呢?
如下图:
上图带222 的 是为子组件,所以一次顺序是为 先创建父组件,然后才穿件子组件,当子组件创建完成并且实体dom挂载完成后父组件才挂载完成。
转载自微信