Javascript 范围滑块值_Javascript

Javascript 范围滑块值

javascript

Javascript 范围滑块值,javascript,Javascript,我有一个简单的倒计时，每1秒从5到0： <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</butt

我有一个简单的倒计时，每1秒从5到0：

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


开始
倒计时：
1000
让start=document.getElementById（'start'）；
让start_click=rxjs.fromEvent（start，'click'）；
start_click.subscribe（x=>console.log（'click'））；
开始单击.pipe（rxjs.operators.tap（））。订阅(
()=> {
让time=rxjs.timer（0，1000）.pipe(
rxjs.operators.skip（0）
，rxjs.operators.take（6）
，rxjs.operators.map（x=>5-x）
);
订阅（x=>console.log（'instant'，x））；
let countdown=document.getElementById（'countdown'）；
订阅（x=>countdown.innerText=x）；
start.disabled=true；
let end=time.pipe(
rxjs.operators.last（）
，rxjs.operators.repeatWhen（（）=>start\u单击）
);
end.subscribe（x=>start.disabled=false）；
开始\单击.subscribe（x=>start.disabled=true）；
});

我想学习如何使用范围滑块更改值。例如，当我更改滑块时，

let time=rxjs.timer（0，1000）

更改为

let time=rxjs.timer（0，5000）

您可以尝试以下操作：

const timeDelay=document.querySelector（'time_delay'）；
const timeDelayView=document.querySelector（“#time_delay_view”）；
rxjs.fromEvent（timeDelay，'change'）。订阅（（）=>{
timeDelayView.innerText=timeDelay.value；
});
让start=document.getElementById（'start'）；
让start_click=rxjs.fromEvent（start，'click'）；
start_click.subscribe（x=>console.log（'click'））；
开始单击.pipe（rxjs.operators.tap（））。订阅(
()=> {
让time=rxjs.timer（0，timeDelay.value）.pipe(
rxjs.operators.skip（0）
，rxjs.operators.take（6）
，rxjs.operators.map（x=>5-x）
);
订阅（x=>console.log（'instant'，x））；
let countdown=document.getElementById（'countdown'）；
订阅（x=>countdown.innerText=x）；
start.disabled=true；
let end=time.pipe(
rxjs.operators.last（）
，rxjs.operators.repeatWhen（（）=>start\u单击）
);
end.subscribe（x=>start.disabled=false）；
开始\单击.subscribe（x=>start.disabled=true）；
});

开始
倒计时：


1000