前端3+1-47、48

最新推荐文章于 2025-12-18 10:02:55 发布

原创最新推荐文章于 2025-12-18 10:02:55 发布 · 272 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css #javascript

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引擎有多个线程，但只有一个主线程用于执行任务。
程序中的任务可以分为同步任务和异步任务。
同步任务不会被引擎挂起，直接进入主线程执行，只有该同步任务执行完才能继续往下执行；
异步任务会被引擎挂起，进入任务队列，等同步任务全部执行完毕，引擎会去查看任务队列的任务，如果队列中的异步任务满足执行条件了，才进入主线程执行，否则继续挂起，如此循环，直到队列清空，程序就执行完了。