<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
/*設置原始div大小*/
<style>
#div1{
width: 100px;
height: 100px;
}
</style>
</head>
<body onload="changered()"> <!--onload=""是body里的屬性，用於調方法-->
<div id="div1"></div>
</body>
<!--setTimeout()表示一次性定時器-->
<script>
setTimeout(changered,0); /*設置最開始時間間隔為0*/
function changered(){
var div=document.getElementById("div1");
div.style.backgroundColor="red";
setTimeout(changeyellow,7000);/*紅燈持續亮7秒*/
}
function changeyellow(){
var div=document.getElementById("div1");
div.style.backgroundColor="yellow";
setTimeout(changegreen,3000);
}
function changegreen(){
var div=document.getElementById("div1");
div.style.backgroundColor="green";
setTimeout(changered,5000);
}
</script>
</html>
