类似轮播图
<input type="button" id="btn1" value="开始" />
<input type="button" id="btn2" value="暂停" />
<div id="yanse" style="width: 200px; height: 200px;border: dashed;">
</div>
<script type="text/javascript">
var obtn1=document.getElementById("btn1")
var obtn2=document.getElementById("btn2")
var oyanse=document.getElementById("yanse")
var timer=null
var n=0
var arr=["red","green","yellow","bule"]
obtn1.onclick=function () {
timer=setInterval(shijian,1000)
}
function shijian () {
clearInterval(timer)
oyanse.style.backgroundColor=arr[n]
n++
n=n%arr.length
}
obtn2.onclick=function () {
clearInterval(timer)
}
</script>
<input type="button" id="btn1" value="开始" />
<input type="button" id="btn2" value="暂停" />
<div id="yanse" style="width: 200px; height: 200px;border: dashed;">
</div>
<script type="text/javascript">
var obtn1 = document.getElementById("btn1")
var obtn2 = document.getElementById("btn2")
var oyanse = document.getElementById("yanse")
var timer = null
var n = 0
var arr = ["red", "green", "yellow", "bule"]
obtn1.onclick = function () {
timer = setInterval(shijian, 1000)
}
function shijian() {
//这一行删除
oyanse.style.backgroundColor = arr[n]
n++
n = n % arr.length
}
obtn2.onclick = function () {
clearInterval(timer)
}
</script>
参考这个，你代码有问题。
1.根本不会播放下一个，因为你shijian里写了清除 clearInterval(timer)
2.你arr里blue写错了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" id="btn1" value="开始" />
<input type="button" id="btn2" value="暂停" />
<div id="yanse" style="width: 200px; height: 200px;border: dashed;">
</div>
</body>
<script>
var obtn1 = document.getElementById("btn1")
var obtn2 = document.getElementById("btn2")
var oyanse = document.getElementById("yanse")
var timer = null
var n = 0
var arr = ["red", "green", "yellow", "blue"]
var len=arr.length;
obtn1.onclick = function () {
timer = setInterval(() => {
shijian();
}, 1000)
}
function shijian() {
oyanse.style.backgroundColor = arr[n];
++n
if(n==len){
n=0;
}
}
obtn2.onclick = function () {
clearInterval(timer)
}
</script>
</html>