|
|
@@ -0,0 +1,241 @@
|
|
|
+const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
|
|
|
+
|
|
|
+//trafficLight
|
|
|
+//1stage
|
|
|
+// let trafficLightContent = document.createElement('div')
|
|
|
+// let signals = document.createElement('div')
|
|
|
+// let red = document.createElement('img')
|
|
|
+// let yellow = document.createElement('img')
|
|
|
+// let green = document.createElement('img')
|
|
|
+// signals.append(red)
|
|
|
+// signals.append(yellow)
|
|
|
+// signals.append(green)
|
|
|
+
|
|
|
+// trafficLightContent.append(signals)
|
|
|
+// document.body.append(trafficLightContent)
|
|
|
+// red.hidden = 'true'
|
|
|
+// yellow.hidden = 'true'
|
|
|
+// green.hidden = 'true'
|
|
|
+
|
|
|
+// red.src = 'img/red.png'
|
|
|
+// red.style.width = '300px'
|
|
|
+// red.style.position = 'relative'
|
|
|
+// red.style.right = '31px'
|
|
|
+
|
|
|
+// yellow.src = 'img/yellow.png'
|
|
|
+// yellow.style.width = '190px'
|
|
|
+// green.src = 'img/green.png'
|
|
|
+// green.style.width = '200px'
|
|
|
+// green.style.position = 'relative'
|
|
|
+// green.style.right = '5px'
|
|
|
+// green.style.top = '-5px'
|
|
|
+
|
|
|
+// async function trafficLight(){
|
|
|
+// while (true){
|
|
|
+// redColor()
|
|
|
+// await delay(5000)
|
|
|
+// yellowColor()
|
|
|
+// await delay(3000)
|
|
|
+// greenColor()
|
|
|
+// await delay(5000)
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+
|
|
|
+// function cleaner () {
|
|
|
+// red.hidden = 'true'
|
|
|
+// yellow.hidden = 'true'
|
|
|
+// green.hidden = 'true'
|
|
|
+// }
|
|
|
+
|
|
|
+// function redColor() {
|
|
|
+// cleaner()
|
|
|
+// red.removeAttribute('hidden')
|
|
|
+// }
|
|
|
+
|
|
|
+// function yellowColor(){
|
|
|
+// cleaner()
|
|
|
+// yellow.removeAttribute('hidden')
|
|
|
+// }
|
|
|
+
|
|
|
+// function greenColor () {
|
|
|
+// cleaner()
|
|
|
+// green.removeAttribute('hidden')
|
|
|
+// }
|
|
|
+
|
|
|
+// trafficLight()
|
|
|
+
|
|
|
+//2stage
|
|
|
+
|
|
|
+//dom
|
|
|
+let trafficLightContent = document.createElement('div')
|
|
|
+let signals = document.createElement('div')
|
|
|
+let signalsPed = document.createElement('div')
|
|
|
+let btnContent = document.createElement('div')
|
|
|
+let br = document.createElement('br')
|
|
|
+btnContent.style.marginTop = '90px'
|
|
|
+signalsPed.style.marginTop = '100px'
|
|
|
+let red = document.createElement('img')
|
|
|
+let yellow = document.createElement('img')
|
|
|
+let green = document.createElement('img')
|
|
|
+let greenPed = document.createElement('img')
|
|
|
+greenPed.style.width = '180px'
|
|
|
+let redPed = document.createElement('img')
|
|
|
+redPed.style.width = '180px'
|
|
|
+greenPed.src = 'img/greenped.png'
|
|
|
+greenPed.hidden = 'true'
|
|
|
+greenPed.style.marginLeft = '10px'
|
|
|
+redPed.src = 'img/redped.png'
|
|
|
+let btn = document.createElement('button')
|
|
|
+btn.innerHTML = 'I want to cross <br \/> the pedestrian <br \/> crossing'
|
|
|
+signals.append(red)
|
|
|
+signals.append(yellow)
|
|
|
+signals.append(green)
|
|
|
+btnContent.append(btn)
|
|
|
+signalsPed.append(greenPed)
|
|
|
+signalsPed.append(redPed)
|
|
|
+
|
|
|
+//btnsettings
|
|
|
+btn.style.backgroundColor = 'red'
|
|
|
+btn.style.border = '2px solid black'
|
|
|
+btn.style.color = 'white'
|
|
|
+btn.style.padding = '20px'
|
|
|
+btn.style.textAlign = 'center'
|
|
|
+btn.style.textDecoration = 'none'
|
|
|
+btn.style.display = 'inline-block'
|
|
|
+btn.style.fontSize = '16px'
|
|
|
+btn.style.cursor = 'pointer'
|
|
|
+btn.style.borderRadius = '100%'
|
|
|
+btn.style.marginLeft = '20px'
|
|
|
+//btnsettingsend
|
|
|
+
|
|
|
+trafficLightContent.append(signals)
|
|
|
+trafficLightContent.append(btnContent)
|
|
|
+trafficLightContent.append(signalsPed)
|
|
|
+document.body.append(trafficLightContent)
|
|
|
+red.hidden = 'true'
|
|
|
+yellow.hidden = 'true'
|
|
|
+green.hidden = 'true'
|
|
|
+
|
|
|
+red.src = 'img/red.png'
|
|
|
+red.style.width = '300px'
|
|
|
+red.style.position = 'relative'
|
|
|
+red.style.right = '31px'
|
|
|
+
|
|
|
+yellow.src = 'img/yellow.png'
|
|
|
+yellow.style.width = '190px'
|
|
|
+green.src = 'img/green.png'
|
|
|
+green.style.width = '200px'
|
|
|
+green.style.position = 'relative'
|
|
|
+green.style.right = '5px'
|
|
|
+green.style.top = '-5px'
|
|
|
+
|
|
|
+//functions
|
|
|
+function randTime(min, max) {
|
|
|
+ min = Math.ceil(min);
|
|
|
+ max = Math.floor(max);
|
|
|
+ return Math.floor(Math.random() * (max - min)) + min; //Максимум не включается, минимум включается
|
|
|
+ }
|
|
|
+
|
|
|
+async function trafficLight(color, time){
|
|
|
+ while (true){
|
|
|
+ onColor(green)
|
|
|
+ let p = Promise.race([
|
|
|
+ new Promise((resolve,reject)=>{resolve(delay(5000))}),
|
|
|
+ new Promise((resolve,reject)=>{resolve(domEventPromise(btn,'click'))}),
|
|
|
+ ])
|
|
|
+ await p
|
|
|
+ onColor(yellow)
|
|
|
+ await delay(time = 3000)
|
|
|
+ onColor(red)
|
|
|
+ await delay(time = randTime(3000,10000))
|
|
|
+ onColor(yellow)
|
|
|
+ await delay(time = randTime(3000,5000))
|
|
|
+ disabler()
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const disabler = btn.onclick = function() {
|
|
|
+ btn.disabled = true
|
|
|
+ setTimeout(function() {
|
|
|
+ btn.disabled = false
|
|
|
+ }, 20000);
|
|
|
+};
|
|
|
+
|
|
|
+const domEventPromise = function (element , eventName){
|
|
|
+ return new Promise (function (resolve, reject) {
|
|
|
+ let someObject
|
|
|
+ element.addEventListener(eventName , someObject = (event) =>{
|
|
|
+ resolve(event)
|
|
|
+ element.removeEventListener(eventName,someObject)
|
|
|
+ } )
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+function cleaner () {
|
|
|
+ red.hidden = 'true'
|
|
|
+ yellow.hidden = 'true'
|
|
|
+ green.hidden = 'true'
|
|
|
+ greenPed.hidden = 'true'
|
|
|
+ redPed.removeAttribute('hidden')
|
|
|
+}
|
|
|
+
|
|
|
+function onColor (color) {
|
|
|
+ cleaner()
|
|
|
+ if (color === green) {
|
|
|
+ green.removeAttribute('hidden')
|
|
|
+ }
|
|
|
+ else if (color === yellow) {
|
|
|
+ yellow.removeAttribute('hidden')
|
|
|
+ }
|
|
|
+ else if(color === red){
|
|
|
+ red.removeAttribute('hidden')
|
|
|
+ redPed.hidden = 'true'
|
|
|
+ greenPed.removeAttribute('hidden')
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+trafficLight()
|
|
|
+
|
|
|
+//speedtest
|
|
|
+// async function speedtest(getPromise, count ,parallel=1){
|
|
|
+ // let duration
|
|
|
+// let querySpeed
|
|
|
+// let queryDuration
|
|
|
+// let parallelSpeed
|
|
|
+// let parallelDuration
|
|
|
+
|
|
|
+
|
|
|
+// let t0 = performance.now()
|
|
|
+// for (let i = 0; i < count; i++){
|
|
|
+// let promiseArr = []
|
|
|
+// for (let all = 0;all < parallel;all++){
|
|
|
+// promiseArr.push(getPromise())
|
|
|
+// }
|
|
|
+// await Promise.all(promiseArr)
|
|
|
+// console.log(promiseArr)
|
|
|
+// }
|
|
|
+// let t1 = performance.now()
|
|
|
+
|
|
|
+// duration = t1-t0
|
|
|
+// parallelSpeed = count*parallel / duration
|
|
|
+// parallelDuration = 1/parallelSpeed
|
|
|
+// queryDuration = duration/count
|
|
|
+// querySpeed = 1/queryDuration
|
|
|
+
|
|
|
+// return {
|
|
|
+// duration,
|
|
|
+// querySpeed, //средняя скорость одного запроса
|
|
|
+// queryDuration, //
|
|
|
+// parallelSpeed,
|
|
|
+// parallelDuration
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// // speedtest(() => delay(1000), 10, 10 ).then(result => console.log(result))
|
|
|
+// // {duration: 10000,
|
|
|
+// // querySpeed: 0.001, //1 тысячная запроса за миллисекунду
|
|
|
+// // queryDuration: 1000, //1000 миллисекунд на один реальный запрос в среднем
|
|
|
+// // parallelSpeed: 0.01 // 100 запросов за 10000 миллисекунд
|
|
|
+// // parallelDuration: 100 // 100 запросов за 10000 миллисекунд
|
|
|
+// speedtest(() => fetch('http://swapi.dev/api/people/1').then(res => res.json()), 10, 5).then(result => console.log(result))
|
Vadym Hlushko
