<!DOCTYPE html>
<html>
<head>
<title>抽奖系统</title>
<style>
body {
text-align: center;
}
h1 {
margin-top: 50px;
}
#result {
font-size: 24px;
font-weight: bold;
margin-top: 30px;
}
#drawBtn {
padding: 10px 20px;
font-size: 16px;
background-color: #4CAF50;
color: #fff;
border: none;
cursor: pointer;
margin-top: 30px;
}
</style>
</head>
<body>
<h1>欢迎参加抽奖活动！</h1>
<button id="drawBtn" οnclick="draw()">开始抽奖</button>
<div id="result"></div>
<script>
// 奖品列表
const prizes = ['一等奖', '二等奖', '三等奖', '感谢参与'];
// 执行抽奖
function draw() {
const resultElement = document.getElementById('result');
// 生成随机索引
const randomIndex = Math.floor(Math.random() * prizes.length);
// 显示中奖结果
resultElement.textContent = '恭喜您获得：' + prizes[randomIndex];
}
</script>
</body>
</html>
解释
在这部分代码中，我们定义了页面的标题，并使用内联CSS样式对元素进行了一些样式设置，如居中对齐、字体大小、间距等。
在页面的主体部分，我们有一个标题 <h1>，一个按钮 <button> 用于触发抽奖操作，并且有一个空的 <div> 元素，用于显示抽奖结果。
在 <script> 标签中，我们定义了一个包含奖品列表的数组 prizes。当用户点击 "开始抽奖" 按钮时，draw() 函数会被调用。该函数通过生成一个随机索引来确定用户获得的奖品，并将结果显示在页面上方的 <div id="result"> 元素中。
2561
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
