<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html, body { 100%; height: 100%; font-size: 12px; } #wrap { 1064px; margin: 0 auto; height: 400px; border: 2px solid darkgray; } #wrap div { 110px; height: 110px; background-color: black; font-size: 2.0rem; color: white; display: inline-block; text-align: center; line-height: 110px; margin: 10px; } #btn { 100px; height: 40px; margin: 0 auto; background-color: red; color: white; font-size: 1.7rem; display: block; margin-top: 20px; } </style> </head> <body> <div id="wrap"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> <div>13</div> <div>14</div> <div>15</div> <div>16</div> <div>17</div> <div>18</div> <div>19</div> <div>20</div> <div>21</div> <div>22</div> <div>23</div> <div>24</div> </div> <input type="button" name="" id="btn" value="开始" /> </body> <script type="text/javascript"> var wrap = document.getElementById('wrap'); var btn = document.getElementById('btn'); var divs = document.querySelectorAll('#wrap>div'); // var timer = null; var result = true; btn.onclick = function() { result = !result; if (result != true) { btn.value = '停止' } else { btn.value = '开始' } var timer = setInterval(function() { for ( i = 0; i < 24; i++) { divs[i].style.backgroundColor = 'darkcyan'; } // console.log(n); if (result == true) { clearInterval(timer); } divs[parseInt(Math.random() * (23 - 1 + 1) + 1)].style.backgroundColor = 'red'; }, 100) } </script> </html>