SOURCE

console 命令行工具 X clear

                    
>
console
// 小練習需求&規格:
// 1. 模擬紅綠燈變化 LOOP
// 2. 紅燈時,黃燈介面要顯示紅燈當前倒數秒數
// 3. 限用 Vanilla JS 

const RED = 'RED'
const GREEN = 'GREEN'
const YELLOW = 'YELLOW'

let currentLight = RED

let rL = document.querySelector('.red_light')
let gL = document.querySelector('.green_light')
let yL = document.querySelector('.yellow_light')

let cS = document.querySelector('.counting_sec')

let sleep = (duration) => {
  return new Promise(resolve => {
    setTimeout(resolve, duration * 1000)
  })
}

let task = async (color, duration) => {
  currentLight = color
  
//   if (color === RED) {
//     gL.style.visibility = 'hidden'
//     yL.style.visibility = 'hidden'
    
//     rL.style.visibility = 'visible'
//   }
//   if (color === GREEN) {
//     yL.style.visibility = 'hidden'
//     rL.style.visibility = 'hidden'
    
//     gL.style.visibility = 'visible'
//   }
//   if (color === YELLOW) {
//     rL.style.visibility = 'hidden'
//     gL.style.visibility = 'hidden'
    
//     yL.style.visibility = 'visible'
//   }
  if (color === RED) {
    // console.log('RED ' + duration)
    cS.innerHTML = duration
    let timer = setInterval(() => {
      duration -= 1
      cS.innerHTML = duration
      if (duration <= 0) {
        clearInterval(timer)
      }
    }, 1000)
    gL.style.background = 'black'
    yL.style.background = 'black'
    
    rL.style.background = RED
  }
  if (color === GREEN) {
    yL.style.background = 'black'
    rL.style.background = 'black'
    
    gL.style.background = GREEN
    cS.innerHTML = ''
  }
  if (color === YELLOW) {
    rL.style.background = 'black'
    gL.style.background = 'black'
    
    yL.style.background = YELLOW
    cS.innerHTML = ''
  }

  await sleep(duration)
}

// let trafficLoop = async () => {
//   while (true) {
//     await task(RED, 4)
//     await task(GREEN, 2)
//     await task(YELLOW, 1)
//   }
// }
  
// trafficLoop()

(async () => {
  while (true) {
    await task(RED, 5)
    await task(GREEN, 3)
    await task(YELLOW, 2)
  }
})()
<div id="app">
  <div id="traffic_light">
    <div class="red_light light"></div>
    <div class="yellow_light light">
      <span class="counting_sec"></span>
    </div>
    <div class="green_light light"></div>
  </div>
</div>
html, body {
  padding: 0;
  margin: 0;
  background: wheat;
  font-family: 'Press Start 2P', cursive;
  #app {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    #traffic_light {
      padding: 15px;
      border: 1px solid;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(0, 0, 0, .9);
      border-radius: 15px;
      border: 4px solid gray;
      .light {
        margin: 0 5px;
        border: 4px solid gray;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        backgroud: black;
        &.red_light {
          background: red;
        }
        &.yellow_light {
          background: yellow;
          color: white;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 1.5rem;
          .counting_sec {
            margin-left: 3px;
            margin-top: 4px;
          }
        }
        &.green_light {
          background: green;
        }
      }
    }
  }
}