首页九宫格抽奖html源码

九宫格抽奖html源码

时间: 2024-12-17 16:13:34 浏览: 29

九宫格抽奖HTML源码通常用于网页互动游戏中，创建一个网格布局，用户可以点击每个格子来参与抽奖。这里是一个简单的示例，展示如何基本构建这种结构： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>九宫格抽奖</title> <style> .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 400px; margin: auto; } .box { border: 1px solid #ccc; padding: 15px; cursor: pointer; text-align: center; } </style> </head> <body> <div class="grid-container"> <div class="box" onclick="drawPrize(this)">奖品1</div> <div class="box" onclick="drawPrize(this)">奖品2</div>  </div> <script> function drawPrize(box) { // 这里可以编写逻辑来随机选择并显示中奖信息 let prize = box.innerText; // 假设奖品已经预先设置好 alert(`恭喜您，抽到了：${prize}!`); } </script> </body> </html> ``` 在这个例子中，`.grid-container`定义了九宫格，每个`.box`代表一个格子，点击后触发`drawPrize`函数，显示相应的奖品。实际应用中，你需要配合JavaScript来实现真正的随机抽取功能。

阅读全文