一个关于转盘抽奖程序的问题
在做一个转盘的抽奖程序，想请教一下如何控制指针只能有一次指向case，如果指向了已有的那么就指向下一个case？（本人小白）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jqueryrotate制作机锋网积分抽奖效果演示_dowebok</title>
<style>
/* 页面 css */
* { margin: 0; padding: 0;}
h1 { width: 900px; margin: 40px auto; font: 32px "Microsoft Yahei"; text-align: center;}
.vad { margin: 50px 0 5px; font-family: Consolas,arial,宋体; text-align:center;}
.vad a { display: inline-block; height: 36px; line-height: 36px; margin: 0 5px; padding: 0 50px; font-size: 14px; text-align:center; color:#eee; text-decoration: none; background-color: #222;}
.vad a:hover { color: #fff; background-color: #000;}
.thead { width: 728px; height: 90px; margin: 0 auto; border-bottom: 40px solid transparent;}
/* demo css */
#dowebok { position: relative; width: 780px; height: 390px; margin: 0 auto; padding: 20px; border: 1px solid #ddd; background: url(images/ly-plate-c.gif) 20px 20px no-repeat;}
.plate { position: relative; float: left; width: 390px; height: 390px; background-image: url(images/lyplate.png);}
.prize { float: right; width: 360px; height: 390px; font: 14px/1.5 "Microsoft Yahei";}
.prize h4 { margin: 80px 0 20px; padding: 10px; background-color: #eee;}
.prize ul { list-style-type: none;}
.prize li { margin: 10px;}
#plateBtn { position: absolute; left: 88px; top: 88px; width: 214px; height: 214px; background-image: url(images/rotate-static.png); text-indent: -9999px; overflow: hidden;}
#result { display: none; position: absolute; left: 65px; top: 155px; width: 300px; height: 120px; background-color: rgba(0,0,0,0.75); filter: alpha(opacity=90);}
#resultTxt { padding: 45px 15px 0; font: 16px "Microsoft Yahei"; color: #fff; text-align: center;}
#resultTxt em { color: #ffea76; font-style: normal;}
#resultBtn { position: absolute; right: 5px; top: 5px; width: 25px; height: 25px; text-indent: -100px; background-image: url(images/close.png); overflow: hidden;}
</style>
</head>
<body>
<h1>jqueryrotate制作机锋网积分抽奖效果演示</h1>
<div id="dowebok">
<div class="plate">
<a id="plateBtn" href="javascript:" title="开始抽奖">开始抽奖</a>
</div>
<div class="prize">
<h4>奖品设置</h4>
<ul>
<li><strong>一等奖：</strong>iPhone 6 Plus（1名）</li>
<li><strong>二等奖：</strong>iPhone 6（2名）</li>
<li><strong>三等奖：</strong>iPad Air 2（5名）</li>
<li><strong>参与奖：</strong>充电宝（20名）</li>
</ul>
</div>
<div id="result">
<p id="resultTxt"></p>
<a id="resultBtn" href="javascript:" title="关闭">关闭</a>
</div>
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.rotate.min.js"></script>
<script>
$(function(){
var $plateBtn = $('#plateBtn');
var $result = $('#result');
var $resultTxt = $('#resultTxt');
var $resultBtn = $('#resultBtn');
$plateBtn.click(function(){
var data = [0, 1, 2, 3, 4, 5, 6, 7，8, 9 , 10 ];
data = data[Math.floor(Math.random()*data.length)];
switch(data){
case 1:
rotateFunc(1,18,'恭喜你中了 <em>2等奖</em>');
break;
case 2:
rotateFunc(2,54,'恭喜你中了 <em>3等奖</em>');
break;
case 3:
rotateFunc(3,90,'恭喜你中了 <em>2等奖</em>');
break;
case 4:
rotateFunc(4,126,'恭喜你中了 <em>3等奖</em>');
break;
case 5:
rotateFunc(5,162,'恭喜你中了 <em>1等奖</em>');
break;
case 6:
rotateFunc(6,198,'恭喜你中了 <em>3等奖</em>');
break;
case 7:
rotateFunc(7,234,'恭喜你中了 <em>2等奖</em>');
break;
case 8:
rotateFunc(8,270,'恭喜你中了 <em>3等奖</em>');
break;
case 9:
rotateFunc(9,306,'恭喜你中了 <em>1等奖</em>');
break;
case 10:
rotateFunc(10,342,'恭喜你中了 <em>3等奖</em>');
break;
default:
rotateFunc(0,203,'恭喜你中了 <em>参与奖</em>');
}
});
var rotateFunc = function(awards,angle,text){ //awards:奖项，angle:奖项对应的角度
$plateBtn.stopRotate();
$plateBtn.rotate({
angle: 0,
duration: 5000,
animateTo: angle + 1440, //angle是图片上各奖项对应的角度，1440是让指针固定旋转4圈
callback: function(){
$resultTxt.html(text);
$result.show();
}
});
};
$resultBtn.click(function(){
$result.hide();
});
});
</script>
</body>
</html>
昵称什么DE2回答
-
kgd
再搞个数组把已有的存起来做判断，或者把出现过的从原数组里删了
随时随地看视频慕课网APP
相关分类
JavaScript