const fillDOM = document.getElementById("fill"); const loaderDOM = document.getElementById("loader"); const filltextDOM = document.getElementById("fill-text"); console.log(filltextDOM,fillDOM); const updateFill = (percent) => { fillDOM.style.height = `${percent}%`; if (percent >= 100) { loaderDOM.classList.add("loaded"); } }; // Dummy loading let loadingPos = 0; let loop; const startLoop = () => { loop = setInterval(() => { if (loadingPos >= 80) { clearInterval(loop); loop = null; } else { loadingPos++; filltextDOM.innerHTML= loadingPos +'%' updateFill(loadingPos); } }, 200); }; startLoop();

这段代码是一个简单的加载动画效果实现。首先，通过`getElementById`方法获取到了三个DOM元素：`fillDOM`、`loaderDOM`和`filltextDOM`，分别代表要填充的进度条、加载器和进度文字。然后，定义了一个`updateFill`函数，用于更新进度条的高度，并在加载完成后添加`loaded`类名来显示加载完成的状态。

接下来，定义了一些变量和函数。`loadingPos`表示当前加载的进度，初始值为0。`loop`用于存储循环的定时器。

`startLoop`函数用于开始加载动画的循环。通过`setInterval`方法每200毫秒执行一次循环。在循环中，判断当前加载进度是否达到80%，如果达到则清除定时器并将循环变量置为null，否则递增加载进度并更新进度文字和进度条。

最后，调用`startLoop`函数开始加载动画的循环。

相关问题

const pauseBtn = document.getElementById('pause-btn'); const music = document.getElementById('music');

这两行代码的作用分别是什么？

第一行代码定义了一个名为`pauseBtn`的常量，使用`document.getElementById`方法获取页面上`id`为`pause-btn`的元素，也就是暂停按钮。

第二行代码定义了一个名为`music`的常量，使用`document.getElementById`方法获取页面上`id`为`music`的元素，也就是音乐播放器。获取到这个元素之后，你就可以使用HTML5的`<audio>`标签提供的方法，比如`play`和`pause`，来控制音乐的播放和暂停。

const fillDOM = document.getElementById("fill"); const loaderDOM = document.getElementById("loader"); const filltextDOM = document.getElementById("fill-text"); console.log(filltextDOM,fillDOM); const updateFill = (percent) => { fillDOM.style.height = ${percent}%; if (percent >= 100) { loaderDOM.classList.add("loaded"); } }; // Dummy loading let loadingPos = 0; let loop; const startLoop = () => { loop = setInterval(() => { if (loadingPos >= 80) { clearInterval(loop); loop = null; } else { loadingPos++; filltextDOM.innerHTML= loadingPos +'%' updateFill(loadingPos); } }, 200); }; startLoop();转化为vue3的写法

在Vue 3中，可以将上述代码转换为一个单文件组件的形式。首先，创建一个.vue文件，例如Loading.vue，然后将代码放入其中。代码如下所示：

<template>
  <div>
    <div id="fill" :style="{ height: fillHeight }"></div>
    <div id="loader" :class="{ loaded: isLoaded }"></div>
    <div id="fill-text" ref="fillText"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loadingPos: 0,
      loop: null,
    };
  },
  computed: {
    fillHeight() {
      return this.loadingPos + "%";
    },
    isLoaded() {
      return this.loadingPos >= 100;
    },
  },
  methods: {
    updateFill(percent) {
      this.$refs.fillText.innerHTML = percent + "%";
    },
    startLoop() {
      this.loop = setInterval(() => {
        if (this.loadingPos >= 80) {
          clearInterval(this.loop);
          this.loop = null;
        } else {
          this.loadingPos++;
          this.updateFill(this.loadingPos);
        }
      }, 200);
    },
  },
  mounted() {
    this.startLoop();
  },
};
</script>

<style>
#fill {
  background-color: blue;
  width: 100%;
}

#loader {
  background-color: gray;
  width: 100%;
}

.loaded {
  background-color: green;
}
</style>

在这个Vue组件中，模板部分使用了Vue的模板语法，将原来的DOM元素结构转换为Vue的模板结构。通过`:style`绑定动态样式来实现进度条的高度更新，通过`:class`绑定动态类名来切换加载完成的状态。

在脚本部分，使用了Vue的响应式数据和计算属性来管理加载进度和状态。`updateFill`方法用于更新进度文字，`startLoop`方法用于开始加载动画的循环。在`mounted`钩子中调用`startLoop`方法初始化加载动画。

样式部分保持不变，只是将选择器的写法改为了CSS的写法。注意，样式部分需要通过`<style>`标签包裹起来。

最后，在需要使用该Loading组件的地方，可以使用`<Loading></Loading>`标签来引入和使用这个组件。