如何用html+css+javascript写一个简易红绿灯 _利用windows自带记事本

用html+css+javascript写一个简略单纯红绿灯

需要这些哦
利用windows自带记事本
方式/
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>