html写一个抽奖页面
时间: 2023-12-19 17:06:28 浏览: 29
<!DOCTYPE html>
<html>
<head>
<title>抽奖页面</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>欢迎来到抽奖页面</h1>
<p>点击下面的按钮抽奖:</p>
<button id="btn" onclick="start()">开始抽奖</button>
<p id="result"></p>
<script>
function start() {
var number = Math.random() * 100; //生成0-100的随机数
var result = document.getElementById("result");
if (number < 10) {
result.innerHTML = "恭喜您获得一等奖!";
} else if (number < 30) {
result.innerHTML = "恭喜您获得二等奖!";
} else if (number < 60) {
result.innerHTML = "恭喜您获得三等奖!";
} else {
result.innerHTML = "很遗憾,您没有中奖。";
}
}
</script>
</body>
</html>
相关问题
html 写一个抽奖活动
好的,以下是一个简单的抽奖活动 HTML 代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>抽奖活动</title>
</head>
<body>
<h1>欢迎参加抽奖活动!</h1>
<p>请输入您的姓名和手机号码以参加抽奖:</p>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="phone">手机号码:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{11}" required><br><br>
<button type="button" onclick="draw()">抽奖</button>
</form>
<div id="result"></div>
<script>
function draw() {
// 这里可以编写抽奖逻辑,例如从参与者中随机选取一个人作为中奖者
// 此处仅作示例,直接将中奖者设为 "张三"
var winner = "张三";
// 显示抽奖结果
var resultDiv = document.getElementById("result");
resultDiv.innerHTML = "<p>恭喜 " + winner + " 中奖!</p>";
}
</script>
</body>
</html>
```
以上代码实现了一个简单的抽奖活动页面,用户需要输入姓名和手机号码才能参加抽奖,点击“抽奖”按钮后会在页面上显示中奖者的姓名。实际项目中需要根据具体需求编写更复杂的抽奖逻辑和页面交互。
用HTML写一个精美的抽奖页面
好的,以下是一个简单的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()`会从一个预先定义的奖项数组中随机选择一个奖项,并在展示区域中显示出来。你可以根据自己的需要进行修改和定制。