表白：黑白圣堂血天使，天剑鬼刀阿修罗。
讲解对象：/JS 实现随机抽奖小游戏
作者：融水公子 rsgz
===
JavaScript 9999案例
JS 实现随机抽奖小游戏<!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()">启动</button>
<script type="text/javascript" src="js/jquery-1.12.3.min.js">
</script>
<script type="text/javascript">
function start() {
// 获取一段范围的随机整数
getRandomInt=(min, max)=>{return Math.floor(Math.random() * (max - min + 1)) + min;}
var count = getRandomInt(6,12)
var i=0
// 每间隔100毫秒 跳动一下
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 ["梦幻","迷你龙","超梦","索罗亚","宝贝龙","铁哑铃","拉鲁拉丝","利欧路"][id-1]}
</script>
</body>
</html>这是目录结构 
界面效果：
=== 公众号：不浪仙人 谢谢大家的支持！可以点击我的头像，进入我的空间浏览更多文章呢。建议大家360doc[www.360doc.com]注册一个账号登录，里面真的有很多优秀的文章，欢迎大家的到来。
--- ';
|
