帮我生成一个HTML页面等级属性查看器1-1000级每级给1点分配属性1000级以后每升一级给2点分配属性。一点分配属性可以兑换15点意志或10点骨气。要求输入等级后获得对应的分配属性并可以自己兑换意志和骨气。
<!DOCTYPE html>
<html>
<head>
<title>等级属性查看器</title>
</head>
<body>
<h1>等级属性查看器</h1>
<p>输入等级查看对应的属性:</p>
<form>
<label for="level">等级:</label>
<input type="number" id="level" name="level" min="1" max="2000">
<button type="button" onclick="showAttributes()">查看属性</button>
</form>
<div id="attributes"></div>
<hr>
<h2>兑换属性</h2>
<p>每1点分配属性可以兑换15点意志,或10点骨气。</p>
<form>
<label for="willpower">意志:</label>
<input type="number" id="willpower" name="willpower" min="0">
<button type="button" onclick="exchangeWillpower()">兑换</button>
<label for="resilience">骨气:</label>
<input type="number" id="resilience" name="resilience" min="0">
<button type="button" onclick="exchangeResilience()">兑换</button>
</form>
<div id="message"></div>
<script>
function showAttributes() {
const level = parseInt(document.getElementById("level").value);
let attributes = "";
if (level >= 1 && level <= 1000) {
attributes = `每级分配1点属性,当前等级${level}的属性为:`;
const points = level;
const willpower = Math.floor(points / 15);
const resilience = Math.floor(points / 10);
attributes += `<br>意志:${willpower}点,骨气:${resilience}点。`;
} else if (level > 1000 && level <= 2000) {
attributes = `每级分配2点属性,当前等级${level}的属性为:`;
const points = (level - 1000) * 2 + 1000;
const willpower = Math.floor(points / 15);
const resilience = Math.floor(points / 10);
attributes += `<br>意志:${willpower}点,骨气:${resilience}点。`;
} else {
attributes = "请输入1-2000之间的整数。";
}
document.getElementById("attributes").innerHTML = attributes;
}
<pre><code> function exchangeWillpower() {
const points = parseInt(document.getElementById("willpower").value);
const willpower = points * 15;
let message = "";
if (isNaN(willpower) || willpower < 0) {
message = "请输入非负整数。";
} else {
message = `兑换成功,获得${willpower}点意志。`;
}
document.getElementById("message").innerHTML = message;
}
function exchangeResilience() {
const points = parseInt(document.getElementById("resilience").value);
const resilience = points * 10;
let message = "";
if (isNaN(resilience) || resilience < 0) {
message = "请输入非负整数。";
} else {
message = `兑换成功,获得${resilience}点骨气。`;
}
document.getElementById("message").innerHTML = message;
}
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/bEMY 著作权归作者所有。请勿转载和采集!