如何用html+css+javascript写一个简易红绿灯
用html+css+javascript写一个简易红绿灯
操作方法
- 01
新建一个.html文件，用记事本打开。
- 02
在记事本中复制添加以下内容并保存： <html> <head> <title>红绿灯</title> <style> #div1 div{ width:200px; height:200px; background:pink; border:2px solid blue; float:left; margin:10px; border-radius:100%; } #div1{ width:680px; height:220px; background:pink; border:2px solid black; margin-left:25%; } </style> <script> window.onload = function(){ var divs = document.getElementById('div1').getElementsByTagName('div'); var index = 0; var color = ['red','yellow','green']; setInterval(f1,1000); f1(); function f1(){ for(var i = 0; i < 3; i++){ divs[i].style.background = 'gray'; } divs[index].style.background = color[index]; index == 2 ? index = 0 : index++; } } </script> </head> <body> <h1 style="text-align:center;margin-top:10%;">红绿灯</h1> <div id="div1"> <div></div> <div></div> <div></div> </div> </body> </html>
- 03
用浏览器打开此文件
- 04
效果截图：