1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283 |
- const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
- let div = document.createElement('div')
- document.body.append(div)
- //domEventPromise
- let btn = document.createElement('button')
- btn.innerText = 'click'
- document.body.append(btn)
- function domEventPromise(elem, eventName) {
- let prom = new Promise((resolve, reject) => {
- function doAndRemove(event) {
- elem.removeEventListener(eventName, doAndRemove)
- resolve(event)
- }
- elem.addEventListener(eventName, doAndRemove)
- })
- return prom
- }
- domEventPromise(btn, 'click').then((event) => console.log('event click happens', event))
- async function pedestrianTrafficLight(parent, redTime = 4000, yellowTime = 2000, greenTime = 2000) {
- let container = document.createElement('div')
- container.style.backgroundColor = 'grey'
- container.style.width = 'fit-content'
- container.style.padding = '5px'
- let btn = document.createElement('button')
- btn.innerText = 'pedestrian button'
- let colors = []
- for(let i = 0; i < 3; i++) {
- let color = document.createElement('div')
- color.style.backgroundColor = 'black'
- color.style.width = '100px'
- color.style.height = '100px'
- color.style.borderRadius = '100%'
- color.style.margin = '10px'
- container.append(color)
- colors.push(color)
- }
- container.append(btn)
- parent.append(container)
- while (true) {
- let pressed = false
- btn.disabled = false
- switch ('red') {
- case 'red':
- colors[0].style.backgroundColor = 'red'
- colors[0].style.boxShadow = '0px 2px 10px red'
- await Promise.race([delay(redTime), domEventPromise(btn, 'click')]).then((e) => {
- if (typeof e === 'object') {
- pressed = true
- }
- })
- colors[0].style.boxShadow = 'none'
- colors[0].style.backgroundColor = 'black'
- case 'yellow':
- if (pressed === true) break;
- colors[1].style.backgroundColor = 'yellow'
- colors[1].style.boxShadow = '0px 2px 10px yellow'
- await Promise.race([delay(yellowTime), domEventPromise(btn, 'click')]).then((e) => {
- if (typeof e === 'object') {
- pressed = true
- }
- })
- colors[1].style.boxShadow = 'none'
- colors[1].style.backgroundColor = 'black'
- }
- colors[2].style.backgroundColor = 'lightgreen'
- colors[2].style.boxShadow = '0px 2px 10px lightgreen'
- btn.disabled = true
- await delay(greenTime)
- colors[2].style.boxShadow = 'none'
- colors[2].style.backgroundColor = 'black'
- }
- }
- pedestrianTrafficLight(div, 3000, 3000, 3000)
|