如何用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
- 閱讀 ( 913 )
- 分類：其他類型
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章