html＋css＋javasc双色球用模态框选球和中奖提示代码

以下是一个简单的 HTML、CSS 和 JavaScript 实现双色球选球和中奖提示的模态框代码：

HTML 代码：

<div class="container">
  <h1>双色球选球</h1>
  <button class="btn" onclick="openModal()">选球</button>
</div>

<!-- 模态框 -->
<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close" onclick="closeModal()">&times;</span>
    <h2>请选择6个红球和1个蓝球</h2>
    <div class="balls">
      <div class="red-balls">
        <!-- 33个红球 -->
        <div class="ball" onclick="toggleBall(this)">1</div>
        <div class="ball" onclick="toggleBall(this)">2</div>
        <div class="ball" onclick="toggleBall(this)">3</div>
        <div class="ball" onclick="toggleBall(this)">4</div>
        <div class="ball" onclick="toggleBall(this)">5</div>
        <div class="ball" onclick="toggleBall(this)">6</div>
        <div class="ball" onclick="toggleBall(this)">7</div>
        <div class="ball" onclick="toggleBall(this)">8</div>
        <div class="ball" onclick="toggleBall(this)">9</div>
        <div class="ball" onclick="toggleBall(this)">10</div>
        <div class="ball" onclick="toggleBall(this)">11</div>
        <div class="ball" onclick="toggleBall(this)">12</div>
        <div class="ball" onclick="toggleBall(this)">13</div>
        <div class="ball" onclick="toggleBall(this)">14</div>
        <div class="ball" onclick="toggleBall(this)">15</div>
        <div class="ball" onclick="toggleBall(this)">16</div>
        <div class="ball" onclick="toggleBall(this)">17</div>
        <div class="ball" onclick="toggleBall(this)">18</div>
        <div class="ball" onclick="toggleBall(this)">19</div>
        <div class="ball" onclick="toggleBall(this)">20</div>
        <div class="ball" onclick="toggleBall(this)">21</div>
        <div class="ball" onclick="toggleBall(this)">22</div>
        <div class="ball" onclick="toggleBall(this)">23</div>
        <div class="ball" onclick="toggleBall(this)">24</div>
        <div class="ball" onclick="toggleBall(this)">25</div>
        <div class="ball" onclick="toggleBall(this)">26</div>
        <div class="ball" onclick="toggleBall(this)">27</div>
        <div class="ball" onclick="toggleBall(this)">28</div>
        <div class="ball" onclick="toggleBall(this)">29</div>
        <div class="ball" onclick="toggleBall(this)">30</div>
        <div class="ball" onclick="toggleBall(this)">31</div>
        <div class="ball" onclick="toggleBall(this)">32</div>
        <div class="ball" onclick="toggleBall(this)">33</div>
      </div>
      <div class="blue-balls">
        <!-- 16个蓝球 -->
        <div class="ball" onclick="toggleBall(this)">1</div>
        <div class="ball" onclick="toggleBall(this)">2</div>
        <div class="ball" onclick="toggleBall(this)">3</div>
        <div class="ball" onclick="toggleBall(this)">4</div>
        <div class="ball" onclick="toggleBall(this)">5</div>
        <div class="ball" onclick="toggleBall(this)">6</div>
        <div class="ball" onclick="toggleBall(this)">7</div>
        <div class="ball" onclick="toggleBall(this)">8</div>
        <div class="ball" onclick="toggleBall(this)">9</div>
        <div class="ball" onclick="toggleBall(this)">10</div>
        <div class="ball" onclick="toggleBall(this)">11</div>
        <div class="ball" onclick="toggleBall(this)">12</div>
        <div class="ball" onclick="toggleBall(this)">13</div>
        <div class="ball" onclick="toggleBall(this)">14</div>
        <div class="ball" onclick="toggleBall(this)">15</div>
        <div class="ball" onclick="toggleBall(this)">16</div>
      </div>
    </div>
    <button class="btn" onclick="checkBalls()">确认</button>
  </div>
</div>

<!-- 中奖提示框 -->
<div id="winModal" class="modal">
  <div class="modal-content">
    <span class="close" onclick="closeWinModal()">&times;</span>
    <h2>恭喜您中奖了！</h2>
    <p>您选中的号码是：<span id="winBalls"></span></p>
    <p>奖金金额为：<span id="winMoney"></span></p>
  </div>
</div>

CSS 代码：

.container {
  text-align: center;
}

.btn {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #4CAF50;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 600px;
  border-radius: 5px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.balls {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.red-balls .ball {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 50%;
  font-size: 16px;
  margin-bottom: 10px;
  cursor: pointer;
}

.blue-balls .ball {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 50%;
  font-size: 16px;
  margin-bottom: 10px;
  cursor: pointer;
  background-color: #3385FF;
  color: #fff;
}

.ball.selected {
  background-color: #4CAF50;
  color: #fff;
}

#winBalls {
  font-size: 18px;
  font-weight: bold;
}

#winMoney {
  font-size: 18px;
  font-weight: bold;
  color: #FF6600;
}

JavaScript 代码：

// 打开模态框
function openModal() {
  document.getElementById("myModal").style.display = "block";
}

// 关闭模态框
function closeModal() {
  document.getElementById("myModal").style.display = "none";
}

// 打开中奖提示框
function openWinModal(balls, money) {
  document.getElementById("winBalls").innerHTML = balls.join(", ");
  document.getElementById("winMoney").innerHTML = money;
  document.getElementById("winModal").style.display = "block";
}

// 关闭中奖提示框
function closeWinModal() {
  document.getElementById("winModal").style.display = "none";
}

// 切换选中状态
function toggleBall(ball) {
  ball.classList.toggle("selected");
}

// 随机生成6个红球和1个蓝球
function generateBalls() {
  var redBalls = [];
  var blueBall = Math.floor(Math.random() * 16) + 1;
  while (redBalls.length < 6) {
    var ball = Math.floor(Math.random() * 33) + 1;
    if (redBalls.indexOf(ball) === -1) {
      redBalls.push(ball);
    }
  }
  return {
    redBalls: redBalls.sort(function(a, b) {
      return a - b;
    }),
    blueBall: blueBall
  };
}

// 检查选择的球是否正确
function checkBalls() {
  var selectedBalls = document.querySelectorAll(".ball.selected");
  if (selectedBalls.length !== 7) {
    alert("请选择6个红球和1个蓝球！");
    return;
  }
  var redBalls = [];
  var blueBall = null;
  selectedBalls.forEach(function(ball) {
    var ballValue = parseInt(ball.innerHTML);
    if (ball.classList.contains("red-balls")) {
      redBalls.push(ballValue);
    } else {
      blueBall = ballValue;
    }
  });
  if (redBalls.length !== 6 || !blueBall) {
    alert("请选择6个红球和1个蓝球！");
    return;
  }
  var winBalls = generateBalls();
  var redHitCount = 0;
  var blueHitCount = 0;
  redBalls.forEach(function(ball) {
    if (winBalls.redBalls.indexOf(ball) !== -1) {
      redHitCount++;
    }
  });
  if (blueBall === winBalls.blueBall) {
    blueHitCount = 1;
  }
  var hitCount = redHitCount + blueHitCount;
  var money = null;
  switch (hitCount) {
    case 7:
      money = "一等奖";
      break;
    case 6:
      money = "二等奖";
      break;
    case 5:
      money = "三等奖";
      break;
    case 4:
      money = "四等奖";
      break;
    case 3:
      money = "五等奖";
      break;
    default:
      money = "未中奖";
  }
  openWinModal(winBalls.redBalls.concat(winBalls.blueBall), money);
}

以上代码实现了一个简单的双色球选球和中奖提示的模态框，包括随机生成中奖号码、切换选中状态、检查选择的球是否正确等功能。你可以根据自己的需要进行修改和完善。