编写一个抽奖网页
<p>抽奖网页的HTML代码：</p>
<!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>
<p>抽奖网页的功能说明：</p>
<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/bed3 著作权归作者所有。请勿转载和采集!