用js实现一个抽奖系统一等奖二等奖三等奖抽过的不能再抽
以下是一个简单的抽奖系统,其中包含一等奖、二等奖和三等奖,抽过的奖项将被标记为已抽取,不能再次抽取。
HTML代码:
<div class="prize" id="first-prize">
<div class="prize-name">一等奖</div>
<div class="prize-count">剩余数量:<span id="first-prize-count">1</span></div>
<button class="draw-btn" onclick="draw('first-prize')">抽奖</button>
</div>
<div class="prize" id="second-prize">
<div class="prize-name">二等奖</div>
<div class="prize-count">剩余数量:<span id="second-prize-count">3</span></div>
<button class="draw-btn" onclick="draw('second-prize')">抽奖</button>
</div>
<div class="prize" id="third-prize">
<div class="prize-name">三等奖</div>
<div class="prize-count">剩余数量:<span id="third-prize-count">5</span></div>
<button class="draw-btn" onclick="draw('third-prize')">抽奖</button>
</div>
<div id="result"></div>
JavaScript代码:
// 初始化奖项数量
var firstPrizeCount = 1;
var secondPrizeCount = 3;
var thirdPrizeCount = 5;
// 标记已抽取的奖项
var firstPrizeDrawn = false;
var secondPrizeDrawn = false;
var thirdPrizeDrawn = false;
// 抽奖函数
function draw(prizeId) {
var prizeCountId, prizeName, prizeCount, prizeDrawn;
switch(prizeId) {
case 'first-prize':
prizeCountId = 'first-prize-count';
prizeName = '一等奖';
prizeCount = firstPrizeCount;
prizeDrawn = firstPrizeDrawn;
break;
case 'second-prize':
prizeCountId = 'second-prize-count';
prizeName = '二等奖';
prizeCount = secondPrizeCount;
prizeDrawn = secondPrizeDrawn;
break;
case 'third-prize':
prizeCountId = 'third-prize-count';
prizeName = '三等奖';
prizeCount = thirdPrizeCount;
prizeDrawn = thirdPrizeDrawn;
break;
default:
return;
}
if(prizeCount > 0 && !prizeDrawn) {
// 随机生成中奖号码
var luckyNumber = Math.floor(Math.random() * 1000000);
// 显示中奖结果
document.getElementById('result').innerHTML = '恭喜您获得了' + prizeName + ',您的中奖号码是:' + luckyNumber;
// 更新奖项数量和标记已抽取
document.getElementById(prizeCountId).innerHTML = --prizeCount;
switch(prizeId) {
case 'first-prize':
firstPrizeCount = prizeCount;
firstPrizeDrawn = true;
break;
case 'second-prize':
secondPrizeCount = prizeCount;
secondPrizeDrawn = true;
break;
case 'third-prize':
thirdPrizeCount = prizeCount;
thirdPrizeDrawn = true;
break;
}
} else {
alert('很遗憾,' + prizeName + '已经被抽完了!');
}
}
注:此代码仅为参考,实际应用中需要做更多的优化和安全检查
原文地址: http://www.cveoy.top/t/topic/d1pW 著作权归作者所有。请勿转载和采集!