一、setInterval轮播
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
width: 200px;
height: 200px;
border: 1px solid black;
background-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
<script type="text/javascript">
var divEle = document.getElementsByTagName("div")[0];
var colors = ["red", "yellow", "blue"];
var count = 0;
setInterval(func, 1000);
function func() {
divEle.style.backgroundColor = colors[count++];
if (count === 3) count = 0;
}
</script>
</html>
二、setTimeout轮播
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
width: 200px;
height: 200px;
border: 1px solid black;
background-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
<script type="text/javascript">
var divEle = document.getElementsByTagName("div")[0];
func1();
function func1() {
divEle.style.backgroundColor = "red";
setTimeout(func2, 1000);
}
function func2() {
divEle.style.backgroundColor = "yellow";
setTimeout(func3, 1000);
}
function func3() {
divEle.style.backgroundColor = "blue";
setTimeout(func1, 1000);
}
</script>
</html>