如何用html+css+javascript写一个简易红绿灯
1、新建一个.html文件，用记事本打开。
2、在记事本中复制添加以下内容并保存：<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>
3、用浏览器打开此文件
4、效果截图：
