<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Svetophor</title>
</head>
<body>
<style>
.wrapper{
background:#333;
width: 150px;
height: 440px;
border-radius: 10px;
font-size: 70px;
text-align:center;
padding: 1px 0;
border: 6px solid #000;
margin: auto;
}
.wrapper2 {
background:#333;
width: 150px;
height: 299px;
border-radius: 10px;
font-size: 70px;
text-align:center;
padding: 1px 0;
border: 6px solid #000;
margin: auto;
}
#circle1, #circle2, #circle3, #cir1, #cir2{
background:grey;
width: 120px;
height: 120px;
border-radius: 50%;
margin-left: 15px;
margin-top: 20px;
line-height: 120px;
}
#btn{
border-radius: 50%;
width: 40px;
height: 40px;
margin-left: 47%;
margin-top: 15px;
margin-bottom: 100px;
}
#btn:hover{
opacity: 0.6;
}
p{
margin: 60px;
}
</style>
<div class="wrapper">
<div id="circle1">
</div>
<div id="circle2">
</div>
<div id="circle3">
</div>
</div>
<p></p>
<div class="wrapper2">
<div id="cir1">
</div>
<div id="cir2">
</div>
</div>
<input type="submit" id="btn" value="☃" />
<script>
//----------------------------светофор
const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
function timer(elem,ms){
let count=ms;
let number=document.createElement('span');
number.innerHTML=count;
number.style.color='blue';
elem.append(number);
let h=setInterval(()=>{
number.innerHTML=--count;
if(count==0){
clearInterval(h);
number.remove();
}
},1000);
}
function g1(){
timer(circle3,6);
circle3.style.background='green';
}
function g2(){
circle3.style.background='grey';
}
function y1(){
timer(circle2,2);
circle2.style.background='yellow';
}
function y2(){
circle2.style.background='grey';
}
function r1(){
timer(circle1,10);
circle1.style.background='red';
}
function r2(){
circle1.style.background='grey';
}
async function trafficLight(delayGreen,delayYellow,delayRed){
while (true){
y2()
g1()
await delay(delayGreen)
g2()
y1()
await delay(delayYellow)
y2()
r1()
await delay(delayRed)
r2()
y1()
await delay(delayYellow)
}
}
(async()=>{
await trafficLight(6000,2000,10000);
})();
//----------------------domEventPromise
async function domEventPromise(knopka,event){
return new Promise((resolve,reject)=>{
try{
knopka.addEventListener(event,async(e)=>{
resolve(e);
knopka.removeEventListener(event,this);
})
}catch(e){
reject(e);
}
})
}
//domEventPromise(btn, 'click').then(e => console.log('event click happens', e));
//--------------PedestrianTrafficLight
async function PedestrianTrafficLight(){
while(true){
cir1.style.backgroundColor = 'red';
await Promise.race([
domEventPromise(btn, 'click').then(async (e) => {
cir1.style.backgroundColor = 'grey';
cir2.style.backgroundColor = 'green';
timer(cir2,4);
await delay(4000);
cir2.style.backgroundColor = 'grey';
cir1.style.backgroundColor = 'red';
timer(cir1,7);
}, err => console.log(err))
]);
await delay(7000);
}
}
(async () => await PedestrianTrafficLight())();
//-----------speedTest
async function speedTest(getPromise, count, parallel=1){
let duration, querySpeed, queryDuration, parallelSpeed, parallelDuration;
let start = performance.now();
let arr = [];
await (async () => {
for (let i=0;i<count;i++) {
let arrPromise = []
for (let j=0;j<parallel;j++) {
arrPromise.push(getPromise);
}
let querySpeedItemStar=performance.now();
await Promise.all([...arrPromise.map(item => item())]);
arr.push(performance.now()-querySpeedItemStart);
}
})()
duration = Math.round(performance.now() - start);
querySpeed = (count*parallel)/100000;
queryDuration = arr.reduce((a,b)=>(a+b))/arr.length;
parallelSpeed = duration/(count*parallel)/10000;
parallelDuration = duration/(count*parallel);
return{
duration,
querySpeed,
queryDuration,
parallelSpeed,
parallelDuration
}
}
speedTest(()=>delay(1000),10,10).then(result=>console.log(result));
speedTest(()=>fetch('http://swapi.dev/api/people/1').then(res => res.json()), 10, 5)
</script>
</body>
</html>