交通指示灯红绿灯自动切换动画
代码语言:html
所属分类:布局界面
代码描述:交通指示灯红绿灯自动切换动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html, body { padding: 0; margin: 0; background: wheat; font-family: 'Press Start 2P', cursive; } html #app, body #app { display: flex; justify-content: center; align-items: center; height: 100vh; } html #app #traffic_light, body #app #traffic_light { padding: 15px; border: 1px solid; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.9); border-radius: 15px; border: 4px solid gray; } html #app #traffic_light .light, body #app #traffic_light .light { margin: 0 5px; border: 4px solid gray; border-radius: 50%; width: 60px; height: 60px; backgroud: black; } html #app #traffic_light .light.red_light, body #app #traffic_light .light.red_light { background: red; } html #app #traffic_light .light.yellow_light, body #app #traffic_light .light.yellow_light { background: yellow; color: white; display: flex; justify-content: center; align-items: center; font-size: 1.5rem; } html #app #traffic_light .light.yellow_light .counting_sec, body #app #traffic_light .light.yellow_light .counting_sec { margin-left: 3px; margin-top: 4px; } html #app #traffic_light .light.green_light, body #app #traffic_light .light.green_light { background: green; } </style> </head> <body translate="no"> <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> <script> // 小練習需求&規格: // 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&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0