Блог

Главная - Вопросы по программированию - Значение ползунка диапазона

Значение ползунка диапазона

#javascript

#javascript

Вопрос:

У меня есть этот простой обратный отсчет, который идет от 5 до 0 каждые 1 секунду:

 <html>
 <head>
  <meta charset="utf-8"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.5/rxjs.umd.js">
  </script>
 </head>
 <body>
<button id="start">START</button>
COUNTDOWN:<span id="countdown"></span>
<input id="time_delay" type="range" min="1000" max="10000" value="1000" step="1000">
<span id="time_delay">1000</span>
  <script>
    let start = document.getElementById('start');
    let start_click = rxjs.fromEvent(start, 'click');
    start_click.subscribe(x => console.log('click'));

start_click.pipe(rxjs.operators.tap()).subscribe(
  ()=> {
    let time = rxjs.timer(0, 1000).pipe(
      rxjs.operators.skip(0)
    , rxjs.operators.take(6)
    , rxjs.operators.map(x => 5-x)
      );

    time.subscribe(x => console.log('instant', x));
    let countdown = document.getElementById('countdown');
    time.subscribe(x => countdown.innerText = x);
    start.disabled = true;

    let end = time.pipe(
    rxjs.operators.last()
    , rxjs.operators.repeatWhen(() => start_click)
    );

    end.subscribe(x=>start.disabled = false);
    start_click.subscribe(x => start.disabled = true);
    });
  </script>
 </body>
</html>

Я хотел бы узнать, как изменить значение с помощью моего ползунка диапазона. Например, когда я меняю ползунок, let time = rxjs.timer(0, 1000) изменение на let time = rxjs.timer(0, 5000)

Ответ №1:

вы можете попробовать что-то вроде:

 const timeDelay = document.querySelector('#time_delay');
const timeDelayView = document.querySelector('#time_delay_view');
rxjs.fromEvent(timeDelay, 'change').subscribe(() => {
  timeDelayView.innerText = timeDelay.value;
});

let start = document.getElementById('start');
let start_click = rxjs.fromEvent(start, 'click');
start_click.subscribe(x => console.log('click'));

start_click.pipe(rxjs.operators.tap()).subscribe(
  ()=> {
    let time = rxjs.timer(0, timeDelay.value).pipe(
      rxjs.operators.skip(0)
    , rxjs.operators.take(6)
    , rxjs.operators.map(x => 5-x)
      );

    time.subscribe(x => console.log('instant', x));
    let countdown = document.getElementById('countdown');
    time.subscribe(x => countdown.innerText = x);
    start.disabled = true;

    let end = time.pipe(
    rxjs.operators.last()
    , rxjs.operators.repeatWhen(() => start_click)
    );

    end.subscribe(x=>start.disabled = false);
    start_click.subscribe(x => start.disabled = true);
    }); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.5/rxjs.umd.js"></script>

<button id="start">START</button>
COUNTDOWN:<span id="countdown"></span>

<br>
<input id="time_delay" type="range" min="1000" max="10000" value="1000" step="1000">
<span id="time_delay_view">1000</span>

пожалуйста, также обратите внимание, что в вашем коде есть 2 элемента с одинаковым идентификатором time_delay , идентификатор должен быть уникальным для каждой страницы, поэтому я изменил идентификатор span на time_delay_view

Метки: