表白：黑白圣堂血天使，天劍鬼刀阿修羅。';
講解對(duì)象：/JS 實(shí)現(xiàn)隨機(jī)抽獎(jiǎng)小游戲
作者：融水公子 rsgz
===
JavaScript 9999案例
JS 實(shí)現(xiàn)隨機(jī)抽獎(jiǎng)小游戲<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { width: 627px; height: 210px; } img { float: left; border: 1px solid black; margin-right: 5px; margin-top: 5px; } #img4 { float: right; } img { height: 200px; width: 200px; } button { position: absolute; top: 300px; left: 270px; width: 80px; height: 40px; } </style> </head> <body> <div> <img src="img/1.png" id="img1"/> <img src="img/2.png" id="img2"/> <img src="img/3.png" id="img3"/> </div> <div> <img src="img/8.png" id="img8"/> <img src="img/4.png" id="img4"/> </div> <div> <img src="img/7.png" id="img7"/> <img src="img/6.png" id="img6"/> <img src="img/5.png" id="img5"/> </div> <button onclick="start()">啟動(dòng)</button> <script type="text/javascript" src="js/jquery-1.12.3.min.js"> </script> <script type="text/javascript"> function start() { // 獲取一段范圍的隨機(jī)整數(shù) getRandomInt=(min, max)=>{return Math.floor(Math.random() * (max - min + 1)) + min;} var count = getRandomInt(6,12) var i=0 // 每間隔100毫秒 跳動(dòng)一下 var loop = setInterval(function () { var id = i%8+1 // 1-8 if(i<count){ $('#img' + String(id)).css('background', 'red'); $('#img' + String(id-1)).css('background', 'white'); if(id==1){$('#img' + String(8)).css('background', 'white');} i++; }else{ if(id==1){id=9} $('#img' + String(id-1)).css('background', 'white'); alert(getName(id-1)); clearInterval(loop); } }, 100); } var getName=(id)=>{return ["夢(mèng)幻","迷你龍","超夢(mèng)","索羅亞","寶貝龍","鐵啞鈴","拉魯拉絲","利歐路"][id-1]} </script> </body> </html>這是目錄結(jié)構(gòu)
界面效果：
===公眾號(hào)：不浪仙人謝謝大家的支持！可以點(diǎn)擊我的頭像，進(jìn)入我的空間瀏覽更多文章呢。建議大家360doc[www.360doc.com]注冊(cè)一個(gè)賬號(hào)登錄，里面真的有很多優(yōu)秀的文章，歡迎大家的到來(lái)。
---
聯(lián)系客服
