Home > Developer > Web Develop
Last thing to does is the score box and input, also auto Foucs on input when click Start.
Const starters$ = Observable.merge ( start$.mapto), half$.mapto (+), Quarter$.mapto (+)); // Clear the score box input and focus on inputstarters$.subscribe (() = { Document.queryselector ( ' #score '). InnerHTML = ""; = ""; Input.focus ();})--------------------------
Const OBSERVABLE =Rx.observable;const Startbutton= Document.queryselector (' #start '); Const Halfbutton= Document.queryselector (' #half '); Const Quarterbutton= Document.queryselector (' #quarter '); Const Stopbutton= Document.queryselector (' #stop '); Const Resetbutton= Document.queryselector (' #reset '); const input= Document.queryselector (' #input '); Const start$= Observable.fromevent (Startbutton, ' click ')); Const half$= Observable.fromevent (Halfbutton, ' click ')); Const quarter$= Observable.fromevent (Quarterbutton, ' click ')); Const stop$= Observable.fromevent (Stopbutton, ' click ')); Const reset$= Observable.fromevent (Resetbutton, ' click ')); Const input$= Observable.fromevent (input, ' input '). Map (Event=event.target.value); Const data= {count:0};const Inc= (ACC) = ({Count:acc.count + 1}); const reset= (ACC) = =Data;const starters$=Observable.merge (Start$.mapto (1000), Half$.mapto (500), Quarter$.mapto (250));//Clear the score box input and focus on inputStarters$.subscribe (() ={document.queryselector (' #score '). InnerHTML = ""; Input.value= ""; Input.focus ();}) Const Intervalactions= (time) = =Observable.merge (Observable.interval (Time) Takeuntil (stop$). Mapto (inc), Reset$.mapto (reset), const TIM er$=starters$. Switchmap (intervalactions). Startwith (data). Scan (ACC, Curr)=Curr (ACC)) Const runninggame$=timer$. Do((x) =Console.log (x)). TakeWhile (data)= Data.count <= 3). Withlatestfrom (input$. Do((x) =Console.log (x)), (timer, input)=({count:timer.count, text:input}). Share ();//To clean the inputrunninggame$. Repeat (). Subscribe ((x)= = Input.value = ""); runninggame$. Filter (data)= = Data.count = = =parseint (Data.text)). Reduce ((ACC, Curr)= + ACC + 1, 0). Repeat (). Subscribe ((x)= = Document.queryselector (' #score '). InnerHTML =' ${x} ', Err=Console.log (Err), ()= = Console.log (' Complete ') );
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "Utf-8"> <Metaname= "Viewport"content= "Width=device-width"> <Scriptsrc= "https://npmcdn.com/@reactivex/[email protected]/dist/global/rx.umd.js"></Script> <title>JS Bin</title></Head><Body><ButtonID= "Start">Start</Button><ButtonID= "Half">Half</Button><ButtonID= "Quarter">Quarter</Button><ButtonID= "Stop">Stop</Button><ButtonID= "Reset">Reset</Button><HR><inputtype= "text"ID= "Input"><Div>Score:<spanID= "Score"></span></Div></Body></HTML>
[RxJS] Wrap up
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
