<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Светофор</title>
<style>
.container {
padding-top: 30px;
display: flex;
justify-content: center;
}
#trafficLightBlock {
background-color: black;
max-width: 200px;
height: 660px;
padding: 30px;
}
#trafficLightPedestrian {
margin-left: 100px;
background-color: black;
max-width: 200px;
height: 430px;
padding: 30px;
}
#red,
#Red {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: gray;
margin: 0;
margin-bottom: 30px;
}
#yellow {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: gray;
margin: 0;
margin-bottom: 30px;
}
#green,
#Green {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: gray;
margin: 0;
}
h1 {
font-size: 80px;
color: white;
text-align: center;
margin: 0;
padding-top: 50px;
}
#knopka {
margin-top: 50px;
width: 200px;
height: 50px;
background-color: grey;
color: white;
font-size: 20px;
}
</style>
</head>
<body>
<div class="container">
<div id="trafficLightBlock">
<div id="red">
<h1 id="redTimer"></h1>
</div>
<div id="yellow">
<h1 id="yellowTimer"></h1>
</div>
<div id="green">
<h1 id="greenTimer"></h1>
</div>
</div>
<div id="trafficLightPedestrian">
<div id="Red">
<h1 id="RedTimer"></h1>
</div>
<div id="Green">
<h1 id="GreenTimer"></h1>
</div>
<button id="knopka">Click to go</button>
</div>
</div>
<script>
const delay = (ms) =>
new Promise((ok) => setTimeout(() => ok(ms), ms));
async function timerShow(sec, id) {
for (sec; sec > 0; sec--) {
id.innerHTML = sec;
a = await delay(1000);
id.innerHTML = "";
}
}
async function trafficLight() {
while (true) {
// delay(1000).then(() => (document.getElementById("red").style.background = "red"))
// delay(2000).then(() => (document.getElementById("red").style.background = "grey"))
// delay(3000).then(() => (document.getElementById("yellow").style.background = "orange"))
// delay(4000).then(() => (document.getElementById("yellow").style.background = "grey"))
// delay(5000).then(() => (document.getElementById("green").style.background = "green"))
// delay(6000).then(() => (document.getElementById("green").style.background = "grey"))
let styleRed = (document.getElementById(
"red"
).style.background = "red");
timerShow(4, redTimer);
var awaitRedGrey = await delay(5000);
var styleGrey = (document.getElementById(
"red"
).style.background = "grey");
let styleYellow = (document.getElementById(
"yellow"
).style.background = "yellow");
var awaitRedGrey = await delay(2000);
var styleGrey = (document.getElementById(
"yellow"
).style.background = "grey");
let styleGreen = (document.getElementById(
"green"
).style.background = "green");
timerShow(4, greenTimer);
var awaitRedGrey = await delay(5000);
var styleGrey = (document.getElementById(
"green"
).style.background = "grey");
let styleYelloww = (document.getElementById(
"yellow"
).style.background = "orange");
var awaitRedGrey = await delay(2000);
var styleGrey = (document.getElementById(
"yellow"
).style.background = "grey");
}
}
function domEventPromise(btn, eventName) {
return new Promise((resolve, reject) => {
btn.addEventListener(eventName, (event) => {
resolve(event);
});
btn.removeEventListener(eventName, (event) => {
resolve(event);
});
});
}
async function pedestrianTrafficLight() {
while (true) {
if (true) {
Red.style.background = "red";
Green.style.background = "grey";
knopka.disabled = true;
await delay(3000);
knopka.disabled = false;
await Promise.race([
delay(4000),
domEventPromise(knopka, "click").then((e) =>
console.log("event click happens", e)
),
]);
}
if (true) {
knopka.disabled = true;
Green.style.background = "green";
Red.style.background = "grey";
await delay(5000);
}
}
}
trafficLight();
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>