简单抽奖网页代码：HTML+JS实现随机抽奖
<!DOCTYPE html>
<html>
<head>
<title>简单抽奖页面</title>
<meta charset="UTF-8">
<style>
h1 {
text-align: center;
font-size: 36px;
margin-top: 50px;
}
#result {
text-align: center;
font-size: 24px;
margin-top: 50px;
}
button {
display: block;
margin: 0 auto;
margin-top: 50px;
font-size: 24px;
padding: 10px 20px;
border: none;
background-color: #f7c08a;
color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<h1>欢迎参加抽奖活动！</h1>
<div id="result"></div>
<button onclick="lottery()">开始抽奖</button>
<script>
function lottery() {
var num = Math.floor(Math.random() * 100) + 1; //生成1-100的随机数
var result = document.getElementById("result");
if (num <= 10) {
result.innerHTML = '恭喜你获得一等奖！';
} else if (num <= 30) {
result.innerHTML = '恭喜你获得二等奖！';
} else if (num <= 50) {
result.innerHTML = '恭喜你获得三等奖！';
} else {
result.innerHTML = '很遗憾，你没有中奖。';
}
}
</script>
</body>
</html>
<h2>抽奖网页功能说明：</h2>
<ol>
<li>网页中包含一个标题和一个按钮。</li>
<li>点击按钮后，会生成一个1-100的随机数。</li>
<li>如果随机数在1-10之间，则显示'恭喜你获得一等奖！'。</li>
<li>如果随机数在11-30之间，则显示'恭喜你获得二等奖！'。</li>
<li>如果随机数在31-50之间，则显示'恭喜你获得三等奖！'。</li>
<li>如果随机数在51-100之间，则显示'很遗憾，你没有中奖。'。</li>
<li>点击按钮后，显示的结果会显示在页面上方。</li>
</ol>
原文地址: https://www.cveoy.top/t/topic/mE3z 著作权归作者所有。请勿转载和采集!