用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【如何用html+css+javascript寫一個簡易紅綠燈】結果截圖：
以上內容就是如何用html+css+javascript寫一個簡易紅綠燈的內容啦 ， 希望對你有所幫助哦！
猜你喜歡
- 如何不使用軟件給圖片加水印
- 如何使用div將水平線放置在頁面的絕對下方
- 如何在Edraw Max中創建平面鏡
- 長期吸煙后如何恢復
- 武松道你如何不肯賣酒給我吃改為轉述句武松道你如何不肯賣酒給我吃改成轉述句
- 淘寶的一鍵上下架工具如何復制店鋪商品鏈接
- 如何使用mybatis generator 生成java映射文件
- Excel表格太大時如何打印到一張紙上
- Excel表格如何讓單元格內容變成選擇填寫的方式
- PS如何添加Word藝術字