|
|
@@ -0,0 +1,226 @@
|
|
|
+<!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>
|
