|
|
@@ -0,0 +1,94 @@
|
|
|
+const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
|
|
|
+
|
|
|
+async function trafficLight(dom){
|
|
|
+ dom = document.getElementById('color')
|
|
|
+ let red = document.getElementById('red')
|
|
|
+ let yellow = document.getElementById('yellow')
|
|
|
+ let green = document.getElementById('green')
|
|
|
+ let redTimer = document.getElementById('redTimer')
|
|
|
+ let greenTimer = document.getElementById('greenTimer')
|
|
|
+
|
|
|
+ while (true){
|
|
|
+ await delay(500)
|
|
|
+ .then(() => red.style.opacity = 1)
|
|
|
+
|
|
|
+ await delay(10000)
|
|
|
+ .then(() => red.style.opacity = 0.3)
|
|
|
+ .then(timer(10, redTimer))
|
|
|
+
|
|
|
+ await delay(500)
|
|
|
+ .then(() => yellow.style.opacity = 1)
|
|
|
+
|
|
|
+ await delay(1000)
|
|
|
+ .then(() => yellow.style.opacity = 0.3)
|
|
|
+
|
|
|
+ await delay(500)
|
|
|
+ .then(() => green.style.opacity = 1)
|
|
|
+
|
|
|
+ await delay(10000)
|
|
|
+ .then(() => green.style.opacity = 0.3)
|
|
|
+ .then(timer(10, greenTimer))
|
|
|
+
|
|
|
+ await delay(500)
|
|
|
+ .then(() => yellow.style.opacity = 1)
|
|
|
+
|
|
|
+ await delay(1000)
|
|
|
+ .then(() => yellow.style.opacity = 0.3)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+async function humanTrafficLight(dom){
|
|
|
+ dom = document.getElementById('humanColor')
|
|
|
+ let red = document.getElementById('humanRed')
|
|
|
+ let green = document.getElementById('humanGreen')
|
|
|
+ let btn = document.getElementById('btn')
|
|
|
+ let redTimer = document.getElementById('humanRedTimer')
|
|
|
+ let greenTimer = document.getElementById('humanGreenTimer')
|
|
|
+
|
|
|
+ while (true){
|
|
|
+ await delay(500)
|
|
|
+ .then(() => green.style.opacity = 1)
|
|
|
+
|
|
|
+ await delay(10000)
|
|
|
+ .then(() => green.style.opacity = 0.3)
|
|
|
+ .then(timer(10, greenTimer))
|
|
|
+
|
|
|
+ await delay(1500)
|
|
|
+
|
|
|
+ await delay(500)
|
|
|
+ .then(() => red.style.opacity = 1)
|
|
|
+
|
|
|
+ await delay(10000)
|
|
|
+ .then(() => red.style.opacity = 0.3)
|
|
|
+ .then(timer(10, redTimer))
|
|
|
+
|
|
|
+ await delay(1500)
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+async function timer(time, value) {
|
|
|
+ for (time; time> 0; time--){
|
|
|
+ value.innerHTML = time
|
|
|
+ await delay(1000)
|
|
|
+ value.innerHTML = ""
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+trafficLight()
|
|
|
+humanTrafficLight()
|
|
|
+
|
|
|
+function domEventPromise(click, eventName) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ click.addEventListener(eventName, (e) => {
|
|
|
+ resolve(e)
|
|
|
+ })
|
|
|
+ click.removeEventListener(eventName, (e) => {
|
|
|
+ resolve(e)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+btn.onclick = () => domEventPromise(btn, 'click').then( e => console.log('event click happens', e))
|
|
|
+
|
|
|
+
|
|
|
+
|
