suslov-dmytro 2 yıl önce
ebeveyn
işleme
a5bc7a0739
3 değiştirilmiş dosya ile 176 ekleme ve 0 silme
  1. 34 0
      14/index.html
  2. 78 0
      14/script.js
  3. 64 0
      14/styles.css

+ 34 - 0
14/index.html

@@ -0,0 +1,34 @@
+<!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">
+    <link rel="stylesheet" href="styles.css">
+    <title>Traffic lights</title>
+</head>
+
+<body>
+
+    <div id="first">
+        <div id="light1">
+            <div class="red" id="red"></div>
+            <div class="yellow" id="yellow"></div>
+            <div class="green" id="green"></div>
+        </div>
+    </div>
+
+    <div id="second">
+        <div id="light2">
+            <div class="red" id="red1"></div>
+            <div class="green" id="green1"></div>
+        </div>
+        <div class="btn" id="btn">PRESS</div>
+    </div>
+
+    <script src="script.js"></script>
+
+</body>
+
+</html>

+ 78 - 0
14/script.js

@@ -0,0 +1,78 @@
+const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
+
+async function trafficLight(dom) {
+
+    dom = document.getElementById('light1')
+    let green = document.getElementById('green')
+    let red = document.getElementById('red')
+    let yellow = document.getElementById('yellow')
+
+    while (true) {
+
+        red.style.visibility = 'visible'
+        green.style.visibility = 'hidden'
+        yellow.style.visibility = 'hidden'
+        await delay(3000)
+
+        yellow.style.visibility = 'visible'
+        green.style.visibility = 'hidden'
+        red.style.visibility = 'hidden'
+        await delay(1000)
+
+        green.style.visibility = 'visible'
+        red.style.visibility = 'hidden'
+        yellow.style.visibility = 'hidden'
+        await delay(3000)
+
+        yellow.style.visibility = 'visible'
+        green.style.visibility = 'hidden'
+        red.style.visibility = 'hidden'
+        await delay(1000)
+
+    }
+}
+
+trafficLight();
+
+//trafficLight2
+
+function domEventPromise(element, eventName) {
+    return new Promise((resolve, reject) => {
+        element.addEventListener(eventName, (e) => {
+            resolve(e)
+            trafficLight2(e)
+        })
+        element.removeEventListener(eventName, (e) => {
+            resolve(e)
+            trafficLight2(e)
+        })
+    })
+
+}
+
+async function trafficLight2() {
+
+    while (true) {
+        if (true) {
+            red1.style.visibility = "hidden";
+            green1.style.visibility = "visible";
+            btn.disabled = true;
+            await delay(4000);
+            btn.disabled = false;
+            await Promise.race([
+                delay(1000),
+                domEventPromise(btn, "click").then((e) =>
+                    console.log("event click happens", e)
+                ),
+            ]);
+        }
+        if (true) {
+            btn.disabled = true;
+            green1.style.visibility = "hidden";
+            red1.style.visibility = "visible";
+            await delay(5000);
+        }
+    }
+}
+
+trafficLight2()

+ 64 - 0
14/styles.css

@@ -0,0 +1,64 @@
+body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+#light1 {
+    width: 100px;
+    height: 300px;
+    padding: 10px;
+    border-radius: 40px;
+    display: flex;
+    flex-direction: column;
+    background-color: black;
+    margin: 10px;
+}
+
+#light2{
+    width: 100px;
+    height: 200px;
+    padding: 10px;
+    border-radius: 40px;
+    display: flex;
+    flex-direction: column;
+    background-color: black;
+    margin: 10px;
+}
+
+.red {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    background-color: red;
+    visibility: visible;
+}
+
+.yellow {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    background-color: yellow;
+    visibility: hidden;
+}
+
+.green {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    background-color: green;
+    visibility: hidden;
+}
+
+.btn {
+    background-color: coral;
+    border-radius: 50%;
+    width: 100px;
+    height: 100px;
+    display: flex;
+    text-transform: uppercase;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid black;
+    margin: 20px;
+}