Как непрерывно увеличивать значение диапазона ввода (ползунка), пока оно не достигнет своего максимального значения в JavaScript? - PullRequest
Новая
       33

Как непрерывно увеличивать значение диапазона ввода (ползунка), пока оно не достигнет своего максимального значения в JavaScript?

0 голосов
/ 04 января 2019

Я работал над эталоном времени по нарисованным линиям (прямым или изогнутым), где пользователь может предварительно просмотреть время на графике (например, функции времени). Я пытаюсь добавить диапазон ввода (ползунок), который можно использовать для управления значением синхронизации на оси X графика, для которого я выбрал 5 секунд в качестве примера для конечной точки.

Вот базовый рисунок того, что я имею в виду (показана прямая линия). Предполагается, что ось X находится в диапазоне от 0 до 5 секунд, как и ползунок.

Graph showing the timings of a line

Идея состоит в том, что после нажатия кнопки воспроизведения значение ползунка будет плавно увеличиваться, пока не достигнет максимального значения (100% от 5 секунд). Затем, как только оно достигнет этого максимального значения, кнопка больше не увеличивает значение (если пользователь не перетаскивает назад и не щелкает его снова).

Я надеялся связать это значение, используя свойство time в Vue как для ползунка, так и для индикатора на графике, который мог перемещаться с помощью ползунка вдоль линии. Однако я не смог заставить другие попытки работать с stepUp () и setInterval () и clearInterval () . Я застрял на этом.

Я думал, что, может быть, метод .animate () в jQuery мог бы работать, если бы я использовал ту же продолжительность и добавил шаг, но я надеялся пока использовать ванильный JavaScript, как и остальные мои проект основан только на этом и Vue.js.

Пожалуйста, найдите код, который я написал для этого (я разбил его только на входы и ссылку на Vue).

Ползунок и кнопка воспроизведения 

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

Vue Reference 

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 секунд .

1 Ответ

0 голосов
/ 05 января 2019

Будет ли это работать для вас? Если вы хотите более плавный переход, вы можете просто уменьшить размер шага (например, 10 на 100 мс). Вам остается только привязать положение индикатора времени к пропеллу времени. 

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>
...