代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } #box { width: 400px; height: 100px; border: 2px dashed #000; text-align: center; padding: 30px; margin: 50px auto; } </style> </head> <body> <div id="box"> <p>名字</p> <button id="start">开始</button> <button id="stop">停止</button> </div> <script> var txt = document.getElementsByTagName('p')[0]; var btn = document.getElementsByTagName('button'); var arr = ['孙悟空','猪八戒','红孩儿','蜘蛛精','铁扇公主','嫦娥']; var timer = null; timer = setInterval(auto,100) function auto(){ txt.innerHTML = arr[Math.floor(Math.random()*arr.length)]; } // 开始按钮 btn[0].onclick = function () { clearInterval(timer); timer = setInterval(auto,100) } // 停止按钮 btn[1].onclick = function () { clearInterval(timer); } </script> </body> </html>
效果
