Начало Каталог Помощ
Вход
maryluis
/
homeworks_Second_modul
Наблюдаван 2
Харесван 1
Разклонения 0
Файлове Задачи 7 Заявки за сливане 0 Уики
Преглед на файлове

HW17 async traffic-lights

maryluis преди 4 години
родител
77f52b5c7e
ревизия
5fec53e991
променени са 2 файла, в които са добавени 169 реда и са изтрити 0 реда
Разделен изглед Покажи статистика за разликите
  1. 139 0
      homework17/async.html
  2. 30 0
      homework17/style.css

+ 139 - 0
homework17/async.html
Целия файл 

@@ -0,0 +1,139 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <link rel="stylesheet" href="./style.css">
 
+    <title>Traffic light</title>
 
+</head>
 
+<body>
 
+    <div id="traffic-lightS">
 
+        <div id="traffic-light" class="lights">
 
+            <div id="red" class="oneColor"></div>
 
+            <div id="yellow" class="oneColor"></div>
 
+            <div id="green" class="oneColor"></div>
 
+        </div>
 
+        <div id="pedestrian-light" class="lights">
 
+            <div id="pedestrian-red" class="oneColor"></div>
 
+            <!-- <div id="pedestrian-yellow" class="oneColor"></div> -->
 
+            <div id="pedestrian-green" class="oneColor"></div>
 
+        </div>
 
+    </div>
 
+    <button id="knopka">knopka</button>
 
+    <script>
 
+        const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
 
+        let red = document.getElementById("red");
 
+        let yellow = document.getElementById("yellow");
 
+        let green = document.getElementById("green");
 
+        let pedRed = document.getElementById("pedestrian-red");
 
+        let pedYellow = document.getElementById("pedestrian-yellow");
 
+        let pedGreen = document.getElementById("pedestrian-green");
 
+        let redlight;
 
+        let pressed = false;
 
+        async function trafficLight(){
 
+                while (true){
 
+                    
+                    red.style = "background-color: red";
 
+                    let redSec = 5;
 
+                    for (let i = redSec; i > 0; i--) {
 
+                        red.innerText = redSec;
 
+                        redSec -=1;
 
+                        await delay(1000);
 
+                    }
 
+
 
+                    yellow.style = "background-color: yellow";
 
+                    red.innerText = ""
 
+                    await delay(500);
 
+                    red.style = "background-color: black";
 
+                    await delay(500);
 
+
 
+                    yellow.style = "background-color: black"
 
+                    green.style = "background-color: green";
 
+                    let greenSec = 20;
 
+                    for(let i = greenSec; i > 0; i--) {
 
+                        green.innerText = greenSec;
 
+                        await delay(1000);
 
+                        greenSec -=1;
 
+                    }
 
+
 
+                    
+                    yellow.style = "background-color: yellow";
 
+                    green.innerText = "";
 
+                    await delay(500);
 
+                    green.style = "background-color: black";
 
+                    await delay(500);
 
+                    yellow.style = "background-color: black";
 
+            }
 
+        }
 
+        trafficLight()
 
+        async function pedestrianTrafficLight(msc){
 
+            while(true) {
 
+                if(redlight == false) {
 
+                    redlight = true;
 
+                    pedRed.style = "background-color: red";
 
+                    pedGreen.style = "background-color: black";
 
+                    await delay(21000)
 
+                } else {
 
+                    redlight = false;
 
+                    pedRed.style = "background-color: black";        
+                    pedGreen.style = "background-color: green";
 
+                    await delay(6000);
 
+                } 
+                
+                
+            }         
+        }
 
+        pedestrianTrafficLight()
 
+        function domEventPromise(element, eventName) {
 
+            return new Promise(resolve => {
 
+                element.addEventListener(eventName, ev => {
 
+                    resolve(ev)
 
+                    element.removeEventListener(eventName, this)
 
+                });              
+            }) 
+        }
 
+        async function greenOn() {
 
+            if(redlight == true) {
 
+                    pedRed.style = "background-color: black";                   
+                    pedGreen.style = "background-color: green";
 
+                    red.style = "background-color: red";
 
+                    green.style = "background-color: black; color: black";
 
+                    
+                    let redSec = 5;
 
+                    for (let i = redSec; i > 0; i--) {
 
+                        red.innerText = redSec;
 
+                        redSec -=1;
 
+                        await delay(1000);
 
+                    }
 
+
 
+                    //await delay(4000);
 
+                    red.innerText = "";
 
+                    yellow.style = "background-color: yellow";  
+                    await delay(500);
 
+                    red.style = "background-color: black";
 
+                    await delay(500);
 
+                    yellow.style = "background-color: black";
 
+                    green.style = "background-color: green";     
+                    pedRed.style = "background-color:red";
 
+                    pedGreen.style = "background-color: black";
 
+           
+         
+                }
 
+            }
 
+
 
+        
+
 
+        
+        
+         function trafficBotton() {
 
+            return Promise.race([greenOn(), redlight == false]);
 
+         }
 
+        
+        setInterval(() => {
 
+            domEventPromise(knopka, 'click').then( e => addEventListener("click", trafficBotton()))
 
+        }, 20000);
 
+
 
+        
+    </script>
 
+</body>
 
+</html>

+ 30 - 0
homework17/style.css
Целия файл 

@@ -0,0 +1,30 @@
 
+#traffic-lightS {
 
+    display: flex;
 
+}
 
+.lights {
 
+    margin: 20px;
 
+    height: 400px;
 
+    background-color: gray;
 
+    border-radius: 40%;
 
+    width: 150px;
 
+    display: flex;
 
+    flex-direction: column;
 
+    justify-content: center;
 
+    align-items: center;
 
+
 
+}
 
+.oneColor {
 
+    background-color: black;
 
+    width: 100px;
 
+    height: 100px;
 
+    border-radius: 50%;
 
+    margin: 10px;
 
+    font-size: 20px;
 
+    color: yellow;
 
+    display: flex;
 
+    justify-content: center;
 
+    align-items: center;
 
+}
 
+#knopka {
 
+    background-color: tomato;
 
+}