main.js 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
  1. const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
  2. //trafficLight
  3. //1stage
  4. // let trafficLightContent = document.createElement('div')
  5. // let signals = document.createElement('div')
  6. // let red = document.createElement('img')
  7. // let yellow = document.createElement('img')
  8. // let green = document.createElement('img')
  9. // signals.append(red)
  10. // signals.append(yellow)
  11. // signals.append(green)
  12. // trafficLightContent.append(signals)
  13. // document.body.append(trafficLightContent)
  14. // red.hidden = 'true'
  15. // yellow.hidden = 'true'
  16. // green.hidden = 'true'
  17. // red.src = 'img/red.png'
  18. // red.style.width = '300px'
  19. // red.style.position = 'relative'
  20. // red.style.right = '31px'
  21. // yellow.src = 'img/yellow.png'
  22. // yellow.style.width = '190px'
  23. // green.src = 'img/green.png'
  24. // green.style.width = '200px'
  25. // green.style.position = 'relative'
  26. // green.style.right = '5px'
  27. // green.style.top = '-5px'
  28. // async function trafficLight(){
  29. // while (true){
  30. // redColor()
  31. // await delay(5000)
  32. // yellowColor()
  33. // await delay(3000)
  34. // greenColor()
  35. // await delay(5000)
  36. // }
  37. // }
  38. // function cleaner () {
  39. // red.hidden = 'true'
  40. // yellow.hidden = 'true'
  41. // green.hidden = 'true'
  42. // }
  43. // function redColor() {
  44. // cleaner()
  45. // red.removeAttribute('hidden')
  46. // }
  47. // function yellowColor(){
  48. // cleaner()
  49. // yellow.removeAttribute('hidden')
  50. // }
  51. // function greenColor () {
  52. // cleaner()
  53. // green.removeAttribute('hidden')
  54. // }
  55. // trafficLight()
  56. //2stage
  57. //dom
  58. let trafficLightContent = document.createElement('div')
  59. let signals = document.createElement('div')
  60. let signalsPed = document.createElement('div')
  61. let btnContent = document.createElement('div')
  62. let br = document.createElement('br')
  63. btnContent.style.marginTop = '90px'
  64. signalsPed.style.marginTop = '100px'
  65. let red = document.createElement('img')
  66. let yellow = document.createElement('img')
  67. let green = document.createElement('img')
  68. let greenPed = document.createElement('img')
  69. greenPed.style.width = '180px'
  70. let redPed = document.createElement('img')
  71. redPed.style.width = '180px'
  72. greenPed.src = 'img/greenped.png'
  73. greenPed.hidden = 'true'
  74. greenPed.style.marginLeft = '10px'
  75. redPed.src = 'img/redped.png'
  76. let btn = document.createElement('button')
  77. btn.innerHTML = 'I want to cross <br \/> the pedestrian <br \/> crossing'
  78. signals.append(red)
  79. signals.append(yellow)
  80. signals.append(green)
  81. btnContent.append(btn)
  82. signalsPed.append(greenPed)
  83. signalsPed.append(redPed)
  84. //btnsettings
  85. btn.style.backgroundColor = 'red'
  86. btn.style.border = '2px solid black'
  87. btn.style.color = 'white'
  88. btn.style.padding = '20px'
  89. btn.style.textAlign = 'center'
  90. btn.style.textDecoration = 'none'
  91. btn.style.display = 'inline-block'
  92. btn.style.fontSize = '16px'
  93. btn.style.cursor = 'pointer'
  94. btn.style.borderRadius = '100%'
  95. btn.style.marginLeft = '20px'
  96. //btnsettingsend
  97. trafficLightContent.append(signals)
  98. trafficLightContent.append(btnContent)
  99. trafficLightContent.append(signalsPed)
  100. document.body.append(trafficLightContent)
  101. red.hidden = 'true'
  102. yellow.hidden = 'true'
  103. green.hidden = 'true'
  104. red.src = 'img/red.png'
  105. red.style.width = '300px'
  106. red.style.position = 'relative'
  107. red.style.right = '31px'
  108. yellow.src = 'img/yellow.png'
  109. yellow.style.width = '190px'
  110. green.src = 'img/green.png'
  111. green.style.width = '200px'
  112. green.style.position = 'relative'
  113. green.style.right = '5px'
  114. green.style.top = '-5px'
  115. //functions
  116. function randTime(min, max) {
  117. min = Math.ceil(min);
  118. max = Math.floor(max);
  119. return Math.floor(Math.random() * (max - min)) + min; //Максимум не включается, минимум включается
  120. }
  121. async function trafficLight(color, time){
  122. while (true){
  123. onColor(green)
  124. let p = Promise.race([
  125. new Promise((resolve,reject)=>{resolve(delay(5000))}),
  126. new Promise((resolve,reject)=>{resolve(domEventPromise(btn,'click'))}),
  127. ])
  128. await p
  129. onColor(yellow)
  130. await delay(time = 3000)
  131. onColor(red)
  132. await delay(time = randTime(3000,10000))
  133. onColor(yellow)
  134. await delay(time = randTime(3000,5000))
  135. disabler()
  136. }
  137. }
  138. const disabler = btn.onclick = function() {
  139. btn.disabled = true
  140. setTimeout(function() {
  141. btn.disabled = false
  142. }, 20000);
  143. }
  144. const domEventPromise = function (element , eventName){
  145. return new Promise (function (resolve, reject) {
  146. let someObject
  147. element.addEventListener(eventName , someObject = (event) =>{
  148. resolve(event)
  149. element.removeEventListener(eventName,someObject)
  150. } )
  151. })
  152. }
  153. function cleaner () {
  154. red.hidden = 'true'
  155. yellow.hidden = 'true'
  156. green.hidden = 'true'
  157. greenPed.hidden = 'true'
  158. redPed.removeAttribute('hidden')
  159. }
  160. function onColor (color) {
  161. cleaner()
  162. if (color === green) {
  163. green.removeAttribute('hidden')
  164. }
  165. else if (color === yellow) {
  166. yellow.removeAttribute('hidden')
  167. }
  168. else if(color === red){
  169. red.removeAttribute('hidden')
  170. redPed.hidden = 'true'
  171. greenPed.removeAttribute('hidden')
  172. }
  173. }
  174. trafficLight()
  175. //speedtest
  176. // async function speedtest(getPromise, count ,parallel=1){
  177. // let duration
  178. // let querySpeed
  179. // let queryDuration
  180. // let parallelSpeed
  181. // let parallelDuration
  182. // let t0 = performance.now()
  183. // for (let i = 0; i < count; i++){
  184. // let promiseArr = []
  185. // for (let all = 0;all < parallel;all++){
  186. // promiseArr.push(getPromise())
  187. // }
  188. // await Promise.all(promiseArr)
  189. // console.log(promiseArr)
  190. // }
  191. // let t1 = performance.now()
  192. // duration = t1-t0
  193. // parallelSpeed = count*parallel / duration
  194. // parallelDuration = 1/parallelSpeed
  195. // queryDuration = duration/count
  196. // querySpeed = 1/queryDuration
  197. // return {
  198. // duration,
  199. // querySpeed, //средняя скорость одного запроса
  200. // queryDuration, //
  201. // parallelSpeed,
  202. // parallelDuration
  203. // }
  204. // }
  205. // // speedtest(() => delay(1000), 10, 10 ).then(result => console.log(result))
  206. // // {duration: 10000,
  207. // // querySpeed: 0.001, //1 тысячная запроса за миллисекунду
  208. // // queryDuration: 1000, //1000 миллисекунд на один реальный запрос в среднем
  209. // // parallelSpeed: 0.01 // 100 запросов за 10000 миллисекунд
  210. // // parallelDuration: 100 // 100 запросов за 10000 миллисекунд
  211. // speedtest(() => fetch('http://swapi.dev/api/people/1').then(res => res.json()), 10, 5).then(result => console.log(result))