请美化以下html页面的界面：!DOCTYPE htmlhtmlhead meta charset=UTF-8 title兽人设定生成器titleheadbody h1兽人设定生成器h1 p请输入您的名字：p input type=text id=name button onclick=generate生成设定button hr p您的设定如下：p ul id=result ul script
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>兽人设定生成器</title>
<style>
body {
background-color: #F9F9F9;
font-family: Arial, sans-serif;
color: #333;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
background-color: #FFF;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 36px;
font-weight: bold;
text-align: center;
margin-top: 0;
margin-bottom: 20px;
color: #333;
}
p {
font-size: 18px;
margin-bottom: 10px;
color: #666;
}
input[type="text"] {
border: none;
background-color: #F2F2F2;
padding: 10px;
font-size: 16px;
border-radius: 5px;
width: 100%;
box-sizing: border-box;
margin-bottom: 20px;
color: #333;
}
button {
background-color: #333;
color: #FFF;
border: none;
padding: 10px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #666;
}
hr {
border: none;
border-top: 1px solid #CCC;
margin: 20px 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
font-size: 16px;
margin-bottom: 10px;
color: #666;
}
</style>
</head>
<body>
<div class="container">
<h1>兽人设定生成器</h1>
<p>请输入您的名字：</p>
<input type="text" id="name">
<button onclick="generate()">生成设定</button>
<hr>
<p>您的设定如下：</p>
<ul id="result">
</ul>
</div>
<pre><code><script>
function generate() {
// 获取用户输入的名字
var name = document.getElementById("name").value;
// 将名字转成ASCII码之和
var sum = 0;
for (var i = 0; i < name.length; i++) {
sum += name.charCodeAt(i);
}
// 生成伪随机数
var random = sum * 1234567 % 1000;
// 根据随机数生成兽人设定
var gender = random % 2 == 0 ? "男性" : "女性";
var height = Math.floor((random + 100) / 10) + "cm";
var waist = Math.floor((random + 200) / 10) + "cm";
var bust = Math.floor((random + 300) / 10) + "cm";
var hip = Math.floor((random + 400) / 10) + "cm";
var species = random % 4 == 0 ? "狼人" : random % 4 == 1 ? "猫人" : random % 4 == 2 ? "熊人" : "鹰人";
var color = random % 3 == 0 ? "棕色" : random % 3 == 1 ? "黑色" : "白色";
var fur = random % 3 == 0 ? "全身长毛" : random % 3 == 1 ? "部分长毛" : "无毛";
var tail = Math.floor((random + 500) / 100) + "cm";
var fluffiness = random % 3 == 0 ? "非常蓬松" : random % 3 == 1 ? "有些蓬松" : "不太蓬松";
var ears = random % 3 == 0 ? "竖耳" : random % 3 == 1 ? "尖耳" : "圆耳";
var fashion = random % 3 == 0 ? "古典风格" : random % 3 == 1 ? "现代风格" : "异域风格";
var university = random % 3 == 0 ? "兽人大学" : random % 3 == 1 ? "魔法学院" : "科技学院";
var major = random % 3 == 0 ? "战斗学" : random % 3 == 1 ? "魔法学" : "科技学";
var birthplace = random % 3 == 0 ? "森林" : random % 3 == 1 ? "山区" : "草原";
var residence = random % 3 == 0 ? "城市" : random % 3 == 1 ? "乡村" : "海边";
// 将设定添加到页面上
var result = document.getElementById("result");
result.innerHTML = "<li>性别：" + gender + "</li>" +
"<li>身高：" + height + "</li>" +
"<li>腰围：" + waist + "</li>" +
"<li>胸围：" + bust + "</li>" +
"<li>臀围：" + hip + "</li>" +
"<li>物种：" + species + "</li>" +
"<li>体色：" + color + "</li>" +
"<li>被毛程度：" + fur + "</li>" +
"<li>尾巴长短：" + tail + "</li>" +
"<li>尾巴蓬松程度：" + fluffiness + "</li>" +
"<li>耳朵轮廓：" + ears + "</li>" +
"<li>衣着风格：" + fashion + "</li>" +
"<li>毕业大学：" + university + "</li>" +
"<li>所学专业：" + major + "</li>" +
"<li>出生地：" + birthplace + "</li>" +
"<li>居住地：" + residence + "</li>";
}
</script>
</code></pre>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/cbrs 著作权归作者所有。请勿转载和采集!