Web前端最新HTML+CSS+JS+Vue实现点击开始滚动数字暂停则停止，高级web前端开发面试解答问题

文末

js前端的重头戏，值得花大部分时间学习。

推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。

学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

这是288页的前端面试题

v1.0实现功能：

按下开始后从1到12顺时针循环，再次按则暂停，再次开始则从按暂停的那个格子开始循环。
实现代码

//HTML代码
<template>
  <div class="box">
    <ul>
      <li v-for="(item, index) in itemList" :key="index" ref="arr">
        {{ item }}
      </li>
      <el-button type="primary" class="btn" round @click="beginAgain(istrue)">{{
        istrue == true ? "开始" : "暂停"}}</el-button>
    </ul>
  </div>
</template>
//js代码
export default {
  name: "box",
  data() {
    return {
      itemList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      istrue: true,  //判断是否按下显示暂停再次按则开始
      time: null,   //定时器
      newNum: null, //暂停时的数字
    };
  },
  methods: {
    beginAgain(bool) {
      let newArr = this.$refs.arr; //获取所有li的dom
      let num = 0;  //时间初次赋值
      if (this.newNum) { //暂定后再次赋值
        num = this.newNum - 1;
      }
      let timeOut = 500; //速度
      let that = this;

      //循环选择数字
      function rotate() {
        num = ++num;
        if (num > newArr.length - 1) {
          num = 0;
        }
        // console.log("%c ======>>>>>>>>", "color:orange;", num);

        that.itemList.forEach((e) => {
          if (e - 1 != num) {
            newArr[e - 1].style.backgroundColor = "white";
          } else {
            newArr[e - 1].style.backgroundColor = "red";
          }
        });
      }
      //按下了开始
      if (bool) {
        this.istrue = false;
        this.time = setInterval(rotate, timeOut); //循环定时器
      } else {
        this.istrue = true;
        clearInterval(this.time); //清除定时器
        this.time = null;

        newArr.map((res) => {
          if (res.style.backgroundColor == "red") {
            this.newNum = Number(res.innerText);
          }
        });
      }
    },
  },
};
</script>

//CSS代码
<style lang="less" scoped>
.box {
  display: grid;
  align-items: center;
  justify-content: center;
  ul {
    margin-top: 100px;
    width: 50px;
    position: relative;
    .btn {
      position: absolute;
      top: 150px;
      left: -10px;
    }
    li {
      padding: 10px 20px;
      background: white;
      cursor: pointer;
      position: absolute;
    }
    li:first-child {
      top: 0;
      left: 0;
      background: red;
    }
    li:nth-child(2) {
      top: 50px;
      left: 80px;
    }
    li:nth-child(3) {
      top: 100px;
      left: 160px;
    }
    li:nth-child(4) {
      top: 150px;
      left: 240px;
    }
    li:nth-child(5) {
      top: 200px;
      left: 160px;
    }
    li:nth-child(6) {
      top: 250px;
      left: 80px;
    }
    li:nth-child(7) {
      top: 300px;
      left: 0;
    }
    li:nth-child(8) {
      top: 250px;
      left: -80px;
    }
    li:nth-child(9) {
      top: 200px;
      left: -160px;
    }
    li:nth-child(10) {
      top: 150px;
      left: -240px;
    }
    li:nth-child(11) {
      top: 100px;
      left: -160px;
    }


#### 专业技能

一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题

* HTML+CSS
* JavaScript
* 前端框架
* 前端性能优化
* 前端监控
* 模块化+项目构建
* 代码管理
* 信息安全
* 网络协议
* 浏览器
* 算法与数据结构
* 团队管理
* **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。



**其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等**

**由于文章篇幅有限，仅展示部分内容**

![](https://img-blog.csdnimg.cn/img_convert/ac0b1c2376da47d727e0dc8a77e76478.png)