47
html
题目:h5如何使用音频视频
答案:
视频 - video
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
音频 - audio
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
video和audio都可以通过js获取元素,调用相应方法来进行播放暂停等控制
css
题目:如何抽离样式模块
答案:
一般分成公共样式和业务样式。
业务样式放在对应的业务功能模块。
公共样式放在公共模块。公共样式一般包含基础公共样式(标签的默认样式重置并统一、功能性且复用性高的样式-flex布局等等),可能还有特殊样式(业务模块自己的公共样式)、主题样式等。
js
题目:对事件冒泡机制的理解
答案:
事件冒泡 - 事件由下而上的触发,可以用e.stopPropagation()来禁止
事件捕获 - 事件由下而上的触发
默认冒泡,可以用ele.addEventListener(‘click’, fun, true)来指定事件为捕获模式
48
html
题目:对WEB标准和W3C标准的理解认识
答案:
网页分为解构 - html、表现 - css、行为 - js,web标准就是将3者独立分开,使其更有模块化。而w3c标准是对web标准更具体的规范,比如结构规范 - 标签要小写、要闭合、不允许随意嵌套、尽量语义化;样式和行为规范 - 尽量使用外联css和js脚本,用导入的方式,降低耦合度等。
css
题目:全屏滚动的原理是啥,用到css的哪些属性
答案:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全屏滚动</title>
<style>
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
.box {
position: relative;
top: 0;
transition: all 100ms ease;
}
.page1,
.page2,
.page3 {
width: 100%;
height: 100%;
}
.page1 {
background-color: lightblue;
}
.page2 {
background-color: lightgoldenrodyellow;
}
.page3 {
background-color: lightpink;
}
</style>
</head>
<body>
<div class="box">
<div class="page-item page1"></div>
<div class="page-item page2"></div>
<div class="page-item page3"></div>
</div>
</body>
<script>
var container = document.querySelector('.box');
// 获取根元素高度, 页面可视高度
var viewHeight = document.documentElement.clientHeight;
// 获取滚动的页数
var pageNum = document.querySelectorAll('.page-item').length;
// 初始化当前位置, 距离原始顶部距离
var currentPosition = 0;
// 设置页面高度
container.style.height = viewHeight + 'px';
// 向下滚动页面
function goDown() {
if (currentPosition > -viewHeight * (pageNum - 1)) {
currentPosition = currentPosition - viewHeight;
container.style.top = currentPosition + 'px';
}
}
// 向上滚动页面
function goUp() {
if (currentPosition < 0) {
currentPosition = currentPosition + viewHeight;
container.style.top = currentPosition + 'px';
}
}
// 防止多次请求
function throttle(fn, delay) {
let baseTime = 0;
return function () {
const currentTime = Date.now();
if (baseTime + delay < currentTime) {
fn.apply(this, arguments);
baseTime = currentTime;
}
}
}
var handlerWheel = throttle(scrollMove, 1000)
// https://developer.mozilla.org/en-US/docs/Web/API/Element/mousewheel_event#The_detail_property
// firefox的页面滚动事件其他浏览器不一样
if (navigator.userAgent.toLowerCase().indexOf('firefox') === -1) {
document.addEventListener('mousewheel', handlerWheel)
} else {
document.addEventListener('DOMMouseScroll', handlerWheel)
}
function scrollMove(e) {
if (e.deltaY > 0) {
goDown()
} else {
goUp()
}
}
var touchStartY = 0
document.addEventListener('touchstart', event => {
touchStartY = event.touches[0].pageY
})
var handleTouchEnd = throttle(touchEnd, 500)
document.addEventListener('touchend', handleTouchEnd)
function touchEnd(e) {
var touchEndY = e.changedTouches[0].pageY
if (touchEndY - touchStartY < 0) { // 向上滑动, 页面向下滚动
goDown()
} else {
goUp()
}
}
</script>
</html>
js
题目:对事件循环的了解
答案:
js引擎有多个线程,但只有一个主线程用于执行任务。
程序中的任务可以分为同步任务和异步任务。
同步任务不会被引擎挂起,直接进入主线程执行,只有该同步任务执行完才能继续往下执行;
异步任务会被引擎挂起,进入任务队列,等同步任务全部执行完毕,引擎会去查看任务队列的任务,如果队列中的异步任务满足执行条件了,才进入主线程执行,否则继续挂起,如此循环,直到队列清空,程序就执行完了。