Home Explore Help
Register Sign In
nikita_kurochka
/
js_homeworks
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

first and half of second task from traffic light

kurkabein 2 years ago
parent
478a910521
commit
01a9d78d70
2 changed files with 79 additions and 0 deletions
Split View Show Diff Stats
  1. 26 0
      traffic_light_homework/index.html
  2. 53 0
      traffic_light_homework/main.js

+ 26 - 0
traffic_light_homework/index.html
View File 

@@ -0,0 +1,26 @@
 
+<!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>
 
+        .round {
 
+  width: 10em;
 
+  height: 10em;
 
+  border: 2px solid black;
 
+  border-radius: 50%;
 
+}
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="trafficlight">
 
+        <!-- <div id="red" class="round"></div>
 
+        <div id="yellow" class="round"></div>
 
+        <div id="green" class="round"></div>
 
+ -->    </div>
 
+    
+    <script src="main.js"></script>
 
+</body>
 
+</html>

+ 53 - 0
traffic_light_homework/main.js
View File 

@@ -0,0 +1,53 @@
 
+/* function green(){
 
+    console.log('green light');
 
+    let div = document.getElementById('green');
 
+    div.style.backgroundColor = 'green'
 
+    
+}
 
+function yellow(){
 
+    console.log('yellow light');
 
+    let div = document.getElementById('yellow');
 
+    div.style.backgroundColor = 'yellow'
 
+  
+}
 
+function red(){
 
+    console.log('red light');
 
+    let div = document.getElementById('red');
 
+    div.style.backgroundColor = 'red';
 
+   
+} */
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
 
+
 
+async function trafficLight(parent){
 
+    /* let parent = document.getElementById('trafficlight'); */
 
+    for(let i=0; i<3;i++){
 
+        let div = document.createElement('div')
 
+        div.classList = 'round';
 
+        parent.append(div);
 
+    }
 
+    while (true){
 
+       // включаем зеленый
 
+        parent.children[0].style.backgroundColor = 'green';
 
+        parent.children[2].style.backgroundColor = '';
 
+        await delay(4000)
 
+       // включаем желтый
 
+       parent.children[0].style.backgroundColor = '';
 
+       parent.children[1].style.backgroundColor = 'yellow';
 
+        await delay(3000)
 
+       // включаем красный
 
+       parent.children[1].style.backgroundColor = '';
 
+       parent.children[2].style.backgroundColor = 'red';
 
+        await delay(4000)
 
+    }
 
+}
 
+
 
+trafficLight(trafficlight);