<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>17.8jQuery案例八抽奖</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
//抽奖数据
var arr = new Array("苹果","梨","香蕉","桔子","哈密瓜","葡萄","水蜜桃","榴莲");
//随机获取元素
//编写抽奖函数
function choujiang(){
var r = Math.random();
/*随机数的大小是[0,1),包括0但是不包括1*/
var size = arr.length;
//获取元素的个数
//数组下标：[0,size-1] 0 1 2 3 4 5 6 7
//计算数组下标
//对(size-1)*r进行四舍五入
var index = Math.round((size-1)*r);
//数组元素arr[index]
$('#div1').html(arr[index]);
}
//函数结束
//调用抽奖函数
//choujiang();
var timer = null;
$('#start').prop('disabled',false);
$('#end').prop('disabled',true);
//为开始按钮注册单击事件
$('#start').click(function(){
timer = setInterval(choujiang,30);
$('#end').prop('disabled',false);
$('#start').prop('disabled',true);
});
//为结束按钮注册单击事件
$('#end').click(function(){
clearInterval(timer);
alert("抽奖结果是" + $('#div1').html());
$('#end').prop('disabled',true);
$('#start').prop('disabled',false);
});
});
</script>
<style>
#div1{
width:200px;
height:200px;
background-color:#ccc;
border:#F00 2px solid;
border-radius:100px;
text-align:center;
line-height:200px;}
</style>
</head>
<body>
<div id="div1">
</div>
<input type="button" value="开始" id="start">
<input type="button" value="结束" id="end" >
</body>
</html>
效果图
单击开始按钮
单击结束按钮
/////////////////////////////////////////////////////////////////////////
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>8.8jQuery案例八抽奖举例</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
//基础执行次数
var count = 80;
var r = Math.round(Math.random()*7) +1;//随机数
var tatalCount = 80+r;
var speed = 30;
var i=1;
//转动函数
var timer = null;
$('#a9').click(function(){
timer = setTimeout(choujiang,speed);
});
function choujiang(){
if(i<=tatalCount){
if(i>64) speed = 50+i*5;
console.log(speed);
$('.a').css('background-color','#ccc');
index = i%8;
if(index==0){index=8;}
$('#choujiang').find('.a'+index).css('background-color','#F99');
i++;
timer =setTimeout(choujiang,speed);
}
}
});
</script>
<style>
table{
border:2px solid red;
border-collapse:collapse;
}
td{
width:100px;
height:100px;
background-color:#CCC;
border:2px solid red;
text-align:center;
}
#a9{
background-color:#F00;
cursor:pointer;
}
</style>
</head>
<body>
<table id="choujiang">
<tr>
<td class="a a1">1</td>
<td class="a a2">2</td>
<td class="a a3">3</td>
</tr>
<tr>
<td class="a a8">8</td>
<td id="a9">抽奖</td>
<td class="a a4">4</td>
</tr>
<tr>
<td class="a a7">7</td>
<td class="a a6">6</td>
<td class="a a5">5</td>
</tr>
</table>
</body>
</html>
初始效果
单击抽奖
