如何用html+css+javascript写一个简易红绿灯
用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>
- 3
用浏览器打开此文件
- 4
结果截图：
- 发表于 2018-08-22 00:00
- 阅读 ( 867 )
- 分类：其他类型
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章