一个抽奖网页代码
时间: 2024-02-13 22:06:35 浏览: 161
以下是一个简单的抽奖网页代码示例:
HTML文件:
```html
<!DOCTYPE html>
<html>
<head>
<title>抽奖</title>
<meta charset="utf-8">
<style type="text/css">
.container {
margin: 100px auto;
text-align: center;
}
.title {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #3498db;
color: #fff;
font-size: 18px;
border-radius: 5px;
cursor: pointer;
}
.result {
font-size: 18px;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="title">抽奖活动</div>
<div class="btn" onclick="startLottery()">开始抽奖</div>
<div class="result">抽奖结果将显示在这里</div>
</div>
<script type="text/javascript" src="lottery.js"></script>
</body>
</html>
```
JavaScript文件:
```javascript
// 奖项列表
var prizeList = [
{name: "一等奖", level: 1, rate: 0.01},
{name: "二等奖", level: 2, rate: 0.02},
{name: "三等奖", level: 3, rate: 0.05},
{name: "四等奖", level: 4, rate: 0.1},
{name: "五等奖", level: 5, rate: 0.2},
{name: "谢谢参与", level: 0, rate: 0.62}
];
// 抽奖函数
function startLottery() {
var random = Math.random(); // 生成一个随机数
var rate = 0; // 中奖概率计数器
var prize = null; // 中奖奖项
for (var i = 0; i < prizeList.length; i++) {
if (random >= rate && random < rate + prizeList[i].rate) { // 判断是否中奖
prize = prizeList[i];
break;
}
rate += prizeList[i].rate;
}
if (prize) {
var result = "恭喜您获得了" + prize.name;
} else {
var result = "很遗憾,您未中奖";
}
document.querySelector(".result").innerHTML = result; // 更新页面显示
}
```
这个示例代码实现了一个简单的抽奖功能,包括奖项列表、抽奖函数、随机数生成、中奖概率计算等功能。当用户点击开始抽奖按钮时,会触发抽奖函数,根据概率生成随机数并判断中奖与否,最后更新页面显示中奖结果。您可以根据需要进行修改和优化。
阅读全文