123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126 |
- const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
- let dom1 = document.getElementById('color')
- let dom2 = document.getElementById('humanColor')
- let switchTraffic = true
- async function trafficLight(dom) {
- let red = document.getElementById('red')
- let yellow = document.getElementById('yellow')
- let green = document.getElementById('green')
- let redTimer = document.getElementById('redTimer')
- let greenTimer = document.getElementById('greenTimer')
- while (true) {
- await delay(500)
- .then(() => red.style.opacity = 1)
- await delay(10000)
- .then(() => red.style.opacity = 0.3)
- .then(timer(10, redTimer))
- await delay(500)
- .then(() => yellow.style.opacity = 1)
- await delay(1000)
- .then(() => yellow.style.opacity = 0.3)
- await delay(500)
- .then(() => green.style.opacity = 1)
- await delay(10000)
- .then(() => green.style.opacity = 0.3)
- .then(timer(10, greenTimer))
- await delay(500)
- .then(() => yellow.style.opacity = 1)
- await delay(1000)
- .then(() => yellow.style.opacity = 0.3)
- }
- }
- let btn = document.getElementById('btn')
- async function humanTrafficLight(dom) {
- //добавил обертку в html, указал параметр ради задания
- let red = document.getElementById('humanRed')
- let green = document.getElementById('humanGreen')
- let redTimer = document.getElementById('humanRedTimer')
- let greenTimer = document.getElementById('humanGreenTimer')
- if (switchTraffic) {
- while (true) {
- await delay(500)
- .then(() => green.style.opacity = 1)
- await delay(10000)
- .then(() => green.style.opacity = 0.3)
- .then(timer(10, greenTimer))
- await delay(1500)
- await delay(500)
- .then(() => red.style.opacity = 1)
- await delay(10000)
- .then(() => red.style.opacity = 0.3)
- .then(timer(10, redTimer))
- await delay(1500)
- }
- }
- else {
- while (true) {
- await delay(500)
- .then(() => red.style.opacity = 1)
- await delay(10000)
- .then(() => red.style.opacity = 0.3)
- .then(timer(10, redTimer))
- await delay(1500)
- await delay(500)
- .then(() => green.style.opacity = 1)
- await delay(10000)
- .then(() => green.style.opacity = 0.3)
- .then(timer(10, greenTimer))
- await delay(1500)
- }
- }
- }
- async function timer(time, value) {
- for (time; time > 0; time--) {
- value.innerHTML = time
- await delay(1000)
- value.innerHTML = ""
- }
- }
- trafficLight(dom1)
- humanTrafficLight(dom2)
- function domEventPromise(click, eventName) {
- return new Promise((resolve) => {
- click.addEventListener(eventName, (e) => {
- switchTraffic = !switchTraffic
- humanTrafficLight(dom2)
- resolve(e)
- })
- click.removeEventListener(eventName, (e) => {
- resolve(e)
- })
- })
- }
- btn.onclick = () => domEventPromise(btn, 'click').then(e => console.log('event click happens', e))
|