以下是一个简单的抽奖系统,其中包含一等奖、二等奖和三等奖,抽过的奖项将被标记为已抽取,不能再次抽取。

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 + '已经被抽完了!');
  }
}

注:此代码仅为参考,实际应用中需要做更多的优化和安全检查

用js实现一个抽奖系统一等奖二等奖三等奖抽过的不能再抽

原文地址: http://www.cveoy.top/t/topic/d1pW 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录