1到10随机数展示,可暂停继续,空格控制。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body style="text-align:center;background:#ccc;padding-top:100px;"> <h2 id="box">0</h2> <button id="stop">停止</button> <button id="continue">继续</button> <p>记录:</p> <ul id="ul" style="width:100px;margin: 0 auto;"></ul> <script> ;(function(){ var remark = false; var s = setInterval(rand,30); function rand(){ //随机函数 var m = parseInt(Math.random() * 10) + 1; gets("box").innerHTML = m; } function gets(str){ //根据id获取元素 return document.getElementById(str); } function getBoxText(){ //获取box的值 return gets("box").innerHTML; } function setLiText(t){ //在ul中记录值 var li = document.createElement("li"); li.innerHTML = t; gets("ul").appendChild(li); } gets("continue").onclick = continueRandom; function continueRandom(){ //继续 if(!s){ s = setInterval(rand,30); } remark = false; this.blur(); }; gets("stop").onclick = stopRandom; function stopRandom(){ //停止 clearInterval(s); s = null; if(!remark){ setLiText(getBoxText()); remark = true; } this.blur(); }; document.onkeyup = function(event){ //空格键 event = event || window.event; if(event.keyCode === 32 && s){ stopRandom(); }else if(event.keyCode === 32 && !s){ continueRandom(); } }; })() </script> </body> </html>