效果圖：
代碼如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>隨機抽獎</title> <style> *{margin: 0;padding: 0;} body{ background:darksalmon; } h1,#ks,#js{ text-align: center; } #ks{ width: 100px; height: 70px; background: blueviolet; border-radius: 10px; line-height: 70px; margin:3% 0 0 40%; } #ks:hover{ width: 100px; height: 70px; background: tomato; border-radius: 10px; line-height: 70px; } #js{ width: 100px; height: 70px; background: blueviolet; border-radius: 10px; line-height: 70px; margin:-5% 0 0 50%; } #js:hover{ width: 100px; height: 70px; background: tomato; border-radius: 10px; line-height: 70px; } .jp{ border:3px solid #CD5C5C; border-radius:10px; width:95px; height:23px; background:#ff3030; padding-top:5px; text-align:center; color: #ff7ee1; } #jp{ width: 100%; height: 200px; background: orangered; position: absolute; margin-top: 300px; } #jp span{ font-size: 30px; } #tx{ font-size: 60px; color: #fff; } </style></head><body> <h1>抽獎了</h1> <div id="ks" onclick="ks()">開始抽獎</div><!--如何通過一個按鈕實現開始和關閉？--> <div id="js" onclick="gb()">停止抽獎</div> <div id="jp"><span>恭喜你獲得了：</span><span id="tx"></span></div><script> var arr=["三星","蘋果","華為?榮耀","小米","魅族","中興?努比亞","酷派","vivo（藍廠）","oppo(綠廠)"]; //循環添加的數組 var lieshu=3;//列數 console.log(arr.length); console.log("可以分："+arr.length/lieshu+"行"); for(var i=0;i<arr.length/lieshu;i++){//控制行數 for(var j=0;j<lieshu;j++){//控制列 if(i*lieshu+j<arr.length){ console.log("循環最內層："+i*lieshu+j); document.write("<div id=/"jiang"+(i*lieshu+j)+"/" class=/"jp/" style =/"" + "position:absolute;left:"+(j*110+500)+"px;" +"top:" +(i*50+200)+"px;/">"+ arr[i*lieshu+j]+"</div>"); /* document.write 網頁內寫文件 i*lieshu+j 為個數 * (j*110+500) 110 為列邊距 500為整個表格；列偏移 * (i*40+300) 40 行間距 300為整個表格；列偏移 * * */ } } } var bs=-1;//用于循環過后變色 var t; function ks(){ /* 開始變色的方法*/ if(bs!=-1){ document.getElementById("jiang"+bs).style.background="#ff3030"; } var shuijisu=Math.floor(Math.random()*arr.length);//生成arr.length個 隨機數向下取證 document.getElementById("jiang"+shuijisu).style.background="#3500cc"; bs =shuijisu;//shuijisu 代指添加元素的下表 t =setTimeout("ks()",100); }function gb() { clearTimeout(t); document.getElementById("tx").innerHTML =document.getElementById("jiang"+bs).innerHTML;//修改id="tx"類的值}</script></body></html>以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
