javascript - 如何在 JavaScript 中不断增加范围输入( slider )的值，直到达到最大值？

Question

我一直在研究沿绘制线(直线或曲线)的计时引用，用户可以在图形上预览计时(如计时函数)。我正在尝试添加一个范围输入( slider )，可用于控制图形 x 轴上的计时值，为此我选择了 5 秒作为终点的示例。

这是我的意思的基本绘图(显示一条直线)。这假设 x 轴的范围从 0 到 5 秒，就像 slider 一样。

这个想法是，一旦单击“播放”按钮， slider 值将平滑增加，直到达到最大值(5 秒的 100%)。然后，一旦达到该最大值，该按钮就不再增加该值(除非用户向后拖动并再次单击该值)。

我希望使用 Vue 中的 time 属性来绑定(bind)该值，用于 slider 和图表上的指示器，指示器可以随 slider 沿线移动。但是，我无法使用 stepUp() 、setInterval() 和 clearInterval() 进行其他尝试。我被这个问题困住了。

我在想如果我使用相同的持续时间并添加一个步骤，也许 jQuery 中的 .animate() 方法可以工作，但我希望像其余的那样暂时保留普通 JavaScript我的项目只是基于这个和Vue.js。

请找到我迄今为止为此编写的代码(我已将其分解为仅输入和 Vue 引用)。

slider 和播放按钮

<div id="app">
    <input v-model="time" type="range" min="0" max="5" step="any">
    <button v-on:click="play">Play</button>
</div>

Vue 引用

let app = new Vue({
    el: '#app',
    data: {
        time: 0,
    },
    methods: {
        play() {
            let vm = this;
            let duration = (5 - vm.time) * 1000;
        },
    }
});

我使用 0 和 5 作为最小值和最大值，并根据这些计算出持续时间，尽管我不知道使用 100(如 100%)代替后者并忽略 5 秒是否有效.

Answer 1

这对你有用吗？如果您想要更平滑的过渡，您可以减小步长(例如每 100 毫秒 0.10)。剩下的唯一一件事就是将时间指示器的位置绑定(bind)到 time Prop 。

new Vue({
  el: "#app",
  data: {
    time: 0,
    min: 0,
    max: 5,
  },
  methods: {
    play() {
      const interval = setInterval(() => {
        this.time < this.max ?
          this.time++ : clearInterval(interval)
      }, 1000);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  {{time}}
  
  <input v-model="time" type="range" :min="min" :max="max" step="1">

  <button type="button" @click="play()">Play</button>
</div>