12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879 |
- // Async/Await Homework 2
- // Светофор
- const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
- const red = document.querySelector('.red')
- const yellow = document.querySelector('.yellow')
- const green = document.querySelector('.green')
- async function trafficLight() {
- while (true) {
- changeLight(green)
- await delay(3000)
- changeLight(red)
- await delay(3000)
- changeLight(yellow)
- await delay(3000)
- }
- }
- trafficLight()
- function changeLight(color) {
- if (color !== red && color !== yellow) {
- red.style.opacity = .2
- yellow.style.opacity = .2
- green.style.opacity = 1
- } if (color !== red && color !== green) {
- red.style.opacity = .2
- yellow.style.opacity = 1
- green.style.opacity = .2
- }
- if (color !== yellow && color !== green) {
- red.style.opacity = 1
- yellow.style.opacity = .2
- green.style.opacity = .2
- }
- }
- // PedestrianTrafficLight
- const red1 = document.querySelector('.red1')
- const green1 = document.querySelector('.green1')
- let btn1 = document.querySelector('.btn1')
- async function PedestrianTrafficLight() {
- while (true) {
- changePedestrianTrafficLight(red1)
- await Promise.race([delay(4100), new Promise((ok) => btn1.onclick = ok)])
- changePedestrianTrafficLight(green1)
- await Promise.race([delay(4100), new Promise((ok) => btn1.onclick = ok)])
- }
- }
- PedestrianTrafficLight()
- btn1.addEventListener('click', () => {
- changeLight(red);
- changePedestrianTrafficLight(green1);
- btn1.disabled = true;
- setTimeout(() => { btn1.disabled = false }, 10000);
- })
- function changePedestrianTrafficLight(color1) {
- if (color1 !== red1) {
- red1.style.opacity = .2
- green1.style.opacity = 1
- }
- if (color1 !== green1) {
- red1.style.opacity = 1
- green1.style.opacity = .2
- }
- }
- // domEventPromise
- let btn = document.querySelector('.btn')
- function domEventPromise(button, eventName) {
- return new Promise(res => {
- button.addEventListener(eventName, (e) => res(e))
- button.removeEventListener(eventName, (e) => res(e))
- });
- }
- domEventPromise(btn, 'click')
- .then(e => console.log('event click happens', e)).then(e => (btn.disabled = true, e))
|