用HTML写一个精美的抽奖页面
时间: 2023-03-24 16:01:53 浏览: 105
好的,以下是一个简单的HTML抽奖页面的示例代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>抽奖页面</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
margin-top: 50px;
}
#prize {
margin-top: 30px;
font-size: 36px;
font-weight: bold;
color: #FF0000;
}
#btn {
margin-top: 50px;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
font-size: 24px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>欢迎来到抽奖页面!</h1>
<p>请点击下面的按钮进行抽奖:</p>
<div id="prize"></div>
<button id="btn" onclick="draw()">开始抽奖</button>
<script>
function draw() {
var prizes = ['一等奖', '二等奖', '三等奖', '幸运奖'];
var index = Math.floor(Math.random() * prizes.length);
document.getElementById('prize').innerHTML = '恭喜您获得:' + prizes[index];
}
</script>
</body>
</html>
```
这个页面包含一个标题、一个提示信息、一个抽奖结果展示区域、一个按钮和一些样式。点击按钮后,JavaScript函数`draw()`会从一个预先定义的奖项数组中随机选择一个奖项,并在展示区域中显示出来。你可以根据自己的需要进行修改和定制。