js方格抽奖
时间: 2023-07-23 09:05:07 浏览: 64
以下是一个简单的 JavaScript 方格抽奖的示例代码:
HTML 代码:
```html
<div id="lottery">
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>
<button onclick="startLottery()">开始抽奖</button>
```
CSS 代码:
```css
#lottery {
display: flex;
flex-wrap: wrap;
width: 400px;
height: 400px;
border: 1px solid black;
}
.row {
display: flex;
flex-grow: 1;
}
.col {
flex-grow: 1;
border: 1px solid gray;
text-align: center;
}
```
JavaScript 代码:
```javascript
const rows = 4;
const cols = 4;
function startLottery() {
const luckyRow = Math.floor(Math.random() * rows);
const luckyCol = Math.floor(Math.random() * cols);
const lotteryGrid = document.getElementById("lottery");
const rows = lotteryGrid.children;
for (let i = 0; i < rows.length; i++) {
const row = rows[i];
const cols = row.children;
for (let j = 0; j < cols.length; j++) {
const col = cols[j];
if (i === luckyRow && j === luckyCol) {
col.innerHTML = "中奖";
} else {
col.innerHTML = "";
}
}
}
}
```
该示例使用了一个 4x4 的方格布局作为抽奖的界面。每次点击“开始抽奖”按钮,随机选择一个方格作为中奖的位置,并将该方格的内容设置为“中奖”。其他方格的内容则清空。
你可以根据需要自定义界面样式和抽奖逻辑。