|
|
@@ -0,0 +1,194 @@
|
|
|
+<!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 light2</title>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="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-green" class="oneColor"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <button id="knopka">knopka</button>
|
|
|
+ <div class="traffic-lightS">
|
|
|
+ <div id="pedestrian-light-async" class="lights">
|
|
|
+ <div id="pedestrian2-red" class="oneColor"></div>
|
|
|
+ <div id="pedestrian2-green" class="oneColor"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <button id="promise">promise</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 pedRed2 = document.getElementById("pedestrian2-red");
|
|
|
+ let pedGreen2 = document.getElementById("pedestrian2-green");
|
|
|
+ let promise = document.getElementById("promise")
|
|
|
+ let buttonPushed = 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);
|
|
|
+ }
|
|
|
+
|
|
|
+ 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";
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ setInterval(() => {
|
|
|
+ domEventPromise(knopka, 'click').then( e => addEventListener("click", greenOn()))
|
|
|
+ }, 20000);
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ async function PromiseTraffic() {
|
|
|
+ var flag = true;
|
|
|
+ let timeDelay = 15000;
|
|
|
+ while(true) {
|
|
|
+ pedRed2.style = "background-color: red";
|
|
|
+ pedGreen2.style = "background-color: black";
|
|
|
+
|
|
|
+ if(flag) {
|
|
|
+ var res = await Promise.race([delay(timeDelay), domEventPromise2(promise, 'click')]);
|
|
|
+ } else {
|
|
|
+ var res = await delay(timeDelay);
|
|
|
+ }
|
|
|
+
|
|
|
+ if(res != timeDelay) {
|
|
|
+ flag = false;
|
|
|
+ setTimeout(() => {
|
|
|
+ flag = true;
|
|
|
+ }, 20000);
|
|
|
+ }
|
|
|
+
|
|
|
+ pedRed2.style = "background-color: black";
|
|
|
+ pedGreen2.style = "background-color: green";
|
|
|
+
|
|
|
+ await delay(5000);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ PromiseTraffic()
|
|
|
+
|
|
|
+
|
|
|
+ function domEventPromise2(element, eventName) {
|
|
|
+ return new Promise(resolve => {
|
|
|
+ var fnc = event => {
|
|
|
+ resolve(event)
|
|
|
+ element.removeEventListener(eventName, fnc)
|
|
|
+ };
|
|
|
+
|
|
|
+ element.addEventListener(eventName, fnc);
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
