Browse Source

HW<14> done

Andrey 1 year ago
parent
commit
bb87a0c878
1 changed files with 296 additions and 0 deletions
  1. 296 0
      Dz14 js/Dz14 js.html

+ 296 - 0
Dz14 js/Dz14 js.html

@@ -0,0 +1,296 @@
+<!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>Document</title>
+    <style>
+        .container {
+            display: flex;
+            padding: 50px 0 0 100px;
+
+        }
+
+        #trafficLight {
+            max-width: 200px;
+            height: 700px;
+            background-color: black;
+        }
+
+        #Red {
+            width: 200px;
+            height: 200px;
+            border-radius: 50%;
+            background-color: gray;
+            margin: 0 0 30px 0;
+
+        }
+
+        #Yellow {
+            width: 200px;
+            height: 200px;
+            border-radius: 50%;
+            background-color: gray;
+            margin: 0 0 30px 0;
+
+        }
+
+        #Green {
+            width: 200px;
+            height: 200px;
+            border-radius: 50%;
+            background-color: gray;
+            margin: 0;
+        }
+
+        h3 {
+            padding: 90px 0 0 95px;
+
+        }
+
+        #pedestrianTrafficLight {
+            max-width: 200px;
+            height: 460px;
+            background-color: black;
+            margin-left: 100px;
+
+        }
+
+        #red {
+            width: 200px;
+            height: 200px;
+            border-radius: 50%;
+            background-color: gray;
+        }
+
+        #green {
+            width: 200px;
+            height: 200px;
+            border-radius: 50%;
+            background-color: gray;
+        }
+
+        button {
+            width: 150px;
+            height: 30px;
+            margin: 20px 0 0 420px;
+            display: inline;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <div id="trafficLight">
+            <div id="Red">
+                <h3 id="timerRed"></h3>
+            </div>
+            <div id="Yellow">
+                <h3 id="timerYellow"></h3>
+            </div>
+            <div id="Green">
+                <h3 id="timerGreen"></h3>
+            </div>
+        </div>
+        <div id="pedestrianTrafficLight">
+
+            <div id="red">
+                <h3 id="redTimer"></h3>
+            </div>
+            <div id="green">
+                <h3 id="greenTimer"></h3>
+            </div>
+
+
+        </div>
+
+    </div>
+    <button id="knopka">Сhange</button>
+    <script>
+        const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
+
+        async function timer(time, id) {
+            for (time; time >= 0; time--) {
+                id.innerHTML = time
+                sec = await delay(1000)
+                id.innerHTML = ''
+            }
+        }
+
+        function domEventPromise(button, eventName) {
+            return new Promise((resolve, reject) => {
+                button.addEventListener(eventName, (e) => {
+                    resolve(e);
+                });
+                button.removeEventListener(eventName, (e) => {
+                    resolve(e);
+                });
+            });
+        }
+        domEventPromise(knopka, 'click').then(e => console.log('event click happens', e))
+
+        async function trafficLight() {
+            while (true) {
+                if (true) {
+                    Green.style.background = "#00FF00";
+                    Red.style.background = "grey";
+                    knopka.disabled = true
+                    await delay(3000);
+                    knopka.disabled = false
+                    await Promise.race([
+                        delay(5000),
+                        domEventPromise(knopka, 'click').then((e) => console.log('event click happens', e))
+                    ])
+                }
+                
+                var styleYellow = (document.getElementById("Yellow").style.background = "#FFD700");
+
+                var awaitGrey = await delay(1000);
+                var styleGrey = (document.getElementById("Yellow").style.background = "grey");
+
+                if (true) {
+                    Red.style.background = "#FF0000";
+                    Green.style.background = "grey";
+                    knopka.disabled = true
+                    await delay(3000);
+                    knopka.disabled = false
+                    await Promise.race([
+                        delay(5000),
+                        
+                    ])
+                }
+                
+                var styleYellow = (document.getElementById("Yellow").style.background = "#FFD700");
+
+                var awaitGrey = await delay(2000);
+                var styleGrey = (document.getElementById("Yellow").style.background = "grey");
+            }
+            // var styleYellow = (document.getElementById("Yellow").style.background = "#FFD700");
+
+            // var awaitGrey = await delay(2000);
+            // var styleGrey = (document.getElementById("Yellow").style.background = "grey");
+
+            // var styleYeGreen = (document.getElementById("Green").style.background = "#00FF00");
+
+            // var awaitGrey = await delay(6000);
+            // var styleGrey = (document.getElementById("Green").style.background = "grey");
+
+            // var styleYellow = (document.getElementById("Yellow").style.background = "#FFD700");
+
+            // var awaitGrey = await delay(2000);
+            // var styleGrey = (document.getElementById("Yellow").style.background = "grey");
+
+
+
+        }
+        // }
+        trafficLight()
+
+
+        // async function trafficLight() {
+        //     while (true) {
+        //         var styleRed = (document.getElementById("Red").style.background = "#FF0000");
+        //         timer(5, timerRed)
+        //         var awaitGrey = await delay(6000);
+        //         var styleGrey = (document.getElementById("Red").style.background = "grey");
+
+        //         var styleYellow = (document.getElementById("Yellow").style.background = "#FFD700");
+        //         timer(1, timerYellow)
+        //         var awaitGrey = await delay(2000);
+        //         var styleGrey = (document.getElementById("Yellow").style.background = "grey");
+
+        //         var styleYeGreen = (document.getElementById("Green").style.background = "#00FF00");
+        //         timer(5, timerGreen)
+        //         var awaitGrey = await delay(6000);
+        //         var styleGrey = (document.getElementById("Green").style.background = "grey");
+
+        //         var styleYellow = (document.getElementById("Yellow").style.background = "#FFD700");
+        //         timer(1, timerYellow)
+        //         var awaitGrey = await delay(2000);
+        //         var styleGrey = (document.getElementById("Yellow").style.background = "grey");
+
+
+
+        //     }
+        // }
+        // trafficLight()
+
+
+
+
+
+
+        async function pedestrianTrafficLight() {
+            while (true) {
+                if (true) {
+                    red.style.background = "#FF0000";
+                    green.style.background = "grey";
+                    knopka.disabled = true
+                    await delay(3000);
+                    knopka.disabled = false;
+                    await Promise.race([
+                        delay(5000),
+                        domEventPromise(knopka, 'click').then((e) => {
+                            console.log('event click happens', e)
+
+                        })
+                    ])
+                    if (true) {
+                        await delay(1000)
+                        knopka.disabled = true
+                        green.style.background = " #00FF00"
+                        red.style.background = "grey"
+                        await delay(8000)
+                        red.style.background ="grey"
+                        green.style.background = "grey"
+                        await delay(2000)
+                    }
+                }
+            }
+        }
+        pedestrianTrafficLight()
+
+
+        async function speedtest(getPromise, count, parallel = 1) {
+                let duration = performance.now();
+                let initParallel = parallel;
+                let promisArray = [];
+                for (let i = 0; i < count; i++) {
+                    promisArray[i] = getPromise();
+                    parallel -= 1;
+                    await Promise.all(promisArray);
+                }
+
+                console.log(promisArray);
+
+                duration = performance.now() - duration;
+                console.log(duration);
+                console.log(initParallel * count);
+
+                return {
+                    duration: duration,
+                    querySpeed: count / duration,
+                    queryDuration: duration / count,
+                    parallelSpeed: (count / duration) * initParallel,
+                    parallelDuration: duration / (initParallel * count),
+                };
+            }
+
+            speedtest(() => delay(1000), 10, 10).then((result) =>
+                console.log(result)
+            );
+            speedtest(
+                () =>
+                    fetch("http://swapi.dev/api/people/1").then((res) =>
+                        res.json()
+                    ),
+                1,
+                2
+            );
+    </script>
+
+</body>
+
+</html>