Home Explore Help
Sign In
GennadySht
/
HomeWork
Watch 1
Star 0
Fork 0
Files Issues 4 Pull Requests 0 Wiki
Browse Source

HW<18>done

Gennadysht 2 years ago
parent
e3f5ac2b61
commit
11bd8da7eb
2 changed files with 49 additions and 35 deletions
Split View Show Diff Stats
  1. 49 0
      js/18Rest_Graph/hw_18_02_PedestrianTrafficLight.html
  2. 0 35
      js/18Rest_Graph/hw_18_02_flash_people.html

+ 49 - 0
js/18Rest_Graph/hw_18_02_PedestrianTrafficLight.html
View File 

@@ -0,0 +1,49 @@
 
+<header>PedestrianTrafficLight</header>
 
+
 
+<body>
 
+    <div id="red" style="background-color: red">Red</div><br>
 
+    <div id="green" style="background-color: black;">Green</div><br>
 
+    <button id="btn">GO</button>
 
+
 
+    <script>
 
+        const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
 
+        async function trafficLight(red, green, goBtn, cycDelay, pressPeriod) {
 
+            let isRed = true;
 
+            let lastBtnPress = undefined;
 
+            let btnPress = domEventPromise(goBtn, 'click');
 
+            function domEventPromise(element, eventName) {
 
+                function executor(resolve) {
 
+                    function myOnClick(event) {
 
+                        element.removeEventListener(eventName, myOnClick);
 
+                        btnPress = domEventPromise(goBtn, 'click');
 
+                        resolve({ isRed: false, isButton: true });
 
+                    }
 
+                    element.addEventListener(eventName, myOnClick);
 
+                }
 
+                return new Promise(executor);
 
+            }
 
+            while (true) {
 
+                let cycle = new Promise(
 
+                    async resolve => {
 
+                        await delay(cycDelay);
 
+                        resolve({ isRed: !isRed, isButton: false });
 
+                    });
 
+                let res = await Promise.race([cycle, btnPress]);
 
+                if (res.isButton) {
 
+                    let isSkipButton = !isRed || (lastBtnPress && (new Date() - lastBtnPress) < pressPeriod);
 
+                    if (isSkipButton)
 
+                        res = await cycle;
 
+                    lastBtnPress = new Date();
 
+                }
 
+                isRed = res.isRed;
 
+                isRed ? enableLight(red, "red", green) : enableLight(green, "green", red);
 
+            }
 
+        }
 
+        const enableLight = (fireElement, color, disFlashElement) => {
 
+            fireElement.style.backgroundColor = color;
 
+            disFlashElement.style.backgroundColor = "black";
 
+        }
 
+        let cycDelay = 5000;
 
+        trafficLight(red, green, btn, cycDelay, cycDelay / 2 * 3);
 
+    </script>
 
+</body>

+ 0 - 35
js/18Rest_Graph/hw_18_02_flash_people.html
View File 

@@ -1,35 +0,0 @@
 
-<header>Flash people</header>
 
-
 
-<body>
 
-    <div id="red">Red</div><br>
 
-    <div id="yellow">Yellow</div><br>
 
-    <div id="green">Green</div><br>
 
-
 
-    <script>
 
-        const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
 
-        function domEventPromise(elem, event) {
 
-            return new Promise((resolve, reject) => {
 
-                elem.addEventListener(event, () => resolve(true))
 
-            })
 
-        }
 
-        async function trafficLight(...lights) {
 
-            let prevLight = undefined;
 
-            let i = 0;
 
-            let direction = 1;
 
-            while (true) {
 
-                let light = lights[i];
 
-                if (prevLight)
 
-                    prevLight.el.style.backgroundColor = "black";
 
-                light.el.style.backgroundColor = light.color;
 
-                prevLight = light;
 
-                await delay(light.delay);
 
-                if (i == lights.length - 1) 
-                    direction = -1;
 
-                else if (i == 0) 
-                    direction = 1; 
-                i += direction;
 
-            }
 
-        }
 
-        trafficLight({ el: red, color: "red", delay: 2000 }, { el: yellow, color: "yellow", delay: 1000 }, { el: green, color: "green", delay: 3000 });
 
-    </script>
 
-</body>