<!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>
<style>
* {
margin: 0;
padding: 0;
}
p {
width: 750px;
height: 150px;
background-color: #008080;
text-align: center;
line-height: 150px;
font-size: 42px;
}
.box2 {
width: 750px;
text-align: center;
margin: 50px auto;
}
button {
margin-top: 50px;
width: 150px;
height: 75px;
font-size: 24px;
}
</style>
</head>
<body>
<div class="box2">
<p>苗苗</p>
<button>开始</button>
<button>停止</button>
</div>
<script>
var oP = document.getElementsByTagName("p")[0];
var btn = document.getElementsByTagName("button");
var arr = [
"苗1", "苗2", "苗3", "苗4", "苗5", "苗6", "苗7", "苗8", "苗9", "苗10", "苗12", "苗13", "苗14", "苗15", "苗16", "苗17", "苗18", "苗19", "苗20",
]
var timer;
// var n = 0;
btn[0].onclick = function () {
clearInterval(timer);
// n++;
// if (n > arr.length) {
// n = 0;
// }
timer = setInterval(function () {
var index = Math.floor(Math.random() * (arr.length - 1 - 0 + 1) + 0);
console.log(arr[index])
oP.innerHTML = arr[index]
}, 50)
}
btn[1].onclick = function (){
clearInterval(timer);
}
</script>
</body>
</html>
869
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
