帮我生成一个HTML页面等级属性查看器1-1000级每级给2点分配属性1000级以后每升一级给1点分配属性。一点分配属性可以兑换15点意志或10点骨气。要求输入等级后获得对应的分配属性并可以自己兑换意志和骨气。
<!DOCTYPE html>
<html>
<head>
<title>等级属性查看器</title>
<meta charset="UTF-8">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
<pre><code> h1 {
text-align: center;
margin-top: 50px;
}
form {
text-align: center;
margin-top: 50px;
}
table {
margin: 0 auto;
border-collapse: collapse;
width: 80%;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: center;
}
th {
background-color: #4CAF50;
color: white;
}
input[type=number] {
width: 100px;
padding: 5px 10px;
border: none;
border-radius: 5px;
box-shadow: 1px 1px 1px grey;
margin-right: 10px;
font-size: 16px;
}
input[type=submit] {
padding: 5px 10px;
border: none;
border-radius: 5px;
box-shadow: 1px 1px 1px grey;
background-color: #4CAF50;
color: white;
font-size: 16px;
cursor: pointer;
}
#points {
margin-top: 20px;
text-align: center;
}
</style>
</code></pre>
</head>
<body>
<h1>等级属性查看器</h1>
<form>
<label for="level">请输入等级:</label>
<input type="number" id="level" name="level" min="1" max="5000" required>
<input type="submit" value="查看属性">
</form>
<div id="points"></div>
<pre><code><script>
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault();
var level = document.querySelector('#level').value;
var points = calculatePoints(level);
if (points) {
var html = '<table><tr><th>等级</th><th>分配属性</th><th>可兑换意志</th><th>可兑换骨气</th></tr><tr><td>' + level + '</td><td>' + points + '</td><td>' + Math.floor(points/15) + '</td><td>' + Math.floor(points/10) + '</td></tr></table>';
document.querySelector('#points').innerHTML = html;
}
});
function calculatePoints(level) {
if (level >= 1 && level <= 1000) {
return level * 2;
} else if (level > 1000 && level <= 5000) {
return (1000 * 2) + ((level - 1000) * 1);
} else {
alert("请输入1-5000之间的等级");
return false;
}
}
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/bEM2 著作权归作者所有。请勿转载和采集!