anton123
/
Anton.Homework


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Светофор для пешеходов</title>
</head>
<body>
    
    <main id="main" style="width: max-content;">Светофор для пешеходов</main>
    
    <script>
        const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))

        let divGreen = document.createElement('div')
        let divRed = document.createElement('div')
        divGreen.innerText='Зеленый'
        divRed.innerText='Красный'
        let greenOn =()=> divGreen.style="background-color: rgb(0, 216, 0) ;"
        let greenOf =()=> divGreen.style="background-color: rgb(12, 105, 12) ;"
        let redOn =()=> divRed.style="background-color: rgb(216, 0, 0) ;"
        let redOf =()=> divRed.style="background-color: rgb(139, 7, 7);"
        
        let animation = true
        
        async function trafficLight(timeGreen,timeRed){
            greenOf()
            redOf()
            
            while (animation){
                redOf()
                greenOn()
                await delay(timeGreen)
                greenOf()
                redOn()
                await delay(timeRed)
            }
        }
        

        trafficLight(5000,6000)

        let knopka = document.createElement('button')
        knopka.innerText='Кнопка'
        document.body.append(knopka)
        function domEventPromise(element, eventName) {
            function executor(resolve) {
                async function handler(event) {
                    animation=false
                    redOf()
                    greenOn()
                    await delay(5000)
                    greenOf()
                    animation=true
                    trafficLight(5000,6000)
                    resolve(event);
                }
                element.addEventListener(eventName, handler);
            }
            return new Promise(executor);
        }
        domEventPromise(knopka, 'click').then(e => e);

        document.getElementById('main').append(divGreen,divRed)

    </script>
</body>
</html>