播放计时器

最新推荐文章于 2025-07-30 16:36:32 发布

小陈同学，，

最新推荐文章于 2025-07-30 16:36:32 发布

阅读量145

点赞数 2

CC 4.0 BY-SA版权

分类专栏：项目问题文章标签： javascript vue.js 前端倒计时

本文链接：https://blog.csdn.net/ping_lvy/article/details/147745098

项目问题专栏收录该内容

12 篇文章

订阅专栏

template模块

<div style="width: 200px; display: inline-block">
    <div class="slider-demo-block">
      <el-slider
        v-model="progress"
        :min="0"
        :show-tooltip="false"
        :max="maxTime"
      />
    </div>
    <span>{{ formattedCurrentTime }}</span> / <span>{{ formattedMaxTime }}</span>
    <el-button v-if="isOpen" @click="togglePlayPause" class="_buttonIcon">
      <el-icon><VideoPlay /></el-icon>
    </el-button>
    <el-button v-else @click="stop" class="_buttonIcon">
      <el-icon><VideoPause /></el-icon>
    </el-button>
    <el-button @click="fastForward" class="_buttonIcon">
      <el-icon><DArrowRight /></el-icon>
    </el-button>
  </div>

js模块

// 假设这里引入对应的图标组件，实际需根据你的图标库正确引入
const VideoPlay = () => {}; 
const VideoPause = () => {}; 
const DArrowRight = () => {}; 

// 定义进度相关变量
const progress = ref(0);
const maxTime = ref(100); // 假设最大时间为100，可根据实际调整
const formattedCurrentTime = ref('0:00');
const formattedMaxTime = ref('0:00');

// 播放状态相关变量
const isOpen = ref(true);
const speed = ref(1);
const intervalId = ref(null);

// 播放/暂停切换方法
const togglePlayPause = () => {
  isOpen.value =!isOpen.value;
  speed.value = 1;
  onPlay();
};

// 停止方法
const stop = () => {
  clearInterval(intervalId.value);
  intervalId.value = null;
  isOpen.value = false;
};

// 快进方法
const fastForward = () => {
  speed.value = 2;
  isOpen.value = false;
  onPlay();
};

// 播放核心逻辑方法
const onPlay = () => {
  if (intervalId.value) return;
  intervalId.value = setInterval(() => {
    if (progress.value < maxTime.value) {
      progress.value += speed.value;
    } else {
      progress.value = maxTime.value;
      clearInterval(intervalId.value);
      intervalId.value = null;
    }
  }, 1000);
};