腿部参数设置 - 自定义腿部数据并保存

<!DOCTYPE html>
<html>
<head>
<title>腿部参数设置</title>
<style>
.active {
background-color: green;
}
</style>
</head>
<body>
<h1>腿部参数设置</h1>
<p><button id="leg1Btn" class="active">腿一</button>
<button id="leg2Btn">腿二</button>
<button id="leg3Btn">腿三</button>
<button id="leg4Btn">腿四</button></p>
<p><br><br></p>
<p><label for="thighInput">大腿参数：</label>
<input type="text" id="thighInput"></p>
<p><br><br></p>
<p><label for="calfInput">小腿参数：</label>
<input type="text" id="calfInput"></p>
<p><br><br></p>
<p><button id="saveBtn">保存</button>
<button id="resetBtn">恢复默认</button>
<button id="confirmBtn">确认并跳转</button></p>
<script>
// 初始数据
var leg1 = {
thigh: 10,
calf: 5
};
var leg2 = {
thigh: 20,
calf: 10
};
var leg3 = {
thigh: 30,
calf: 15
};
var leg4 = {
thigh: 40,
calf: 20
};

// 当前选择的腿
var currentLeg = leg1;

// 初始化界面
document.getElementById("thighInput").value = currentLeg.thigh;
document.getElementById("calfInput").value = currentLeg.calf;

// 腿按钮点击事件
document.getElementById("leg1Btn").addEventListener("click", function() {
currentLeg = leg1;
setActiveButton("leg1Btn");
updateInputs();
});

document.getElementById("leg2Btn").addEventListener("click", function() {
currentLeg = leg2;
setActiveButton("leg2Btn");
updateInputs();
});

document.getElementById("leg3Btn").addEventListener("click", function() {
currentLeg = leg3;
setActiveButton("leg3Btn");
updateInputs();
});

document.getElementById("leg4Btn").addEventListener("click", function() {
currentLeg = leg4;
setActiveButton("leg4Btn");
updateInputs();
});

// 保存按钮点击事件
document.getElementById("saveBtn").addEventListener("click", function() {
currentLeg.thigh = parseInt(document.getElementById("thighInput").value);
currentLeg.calf = parseInt(document.getElementById("calfInput").value);
alert("保存成功！");
});

// 恢复默认按钮点击事件
document.getElementById("resetBtn").addEventListener("click", function() {
currentLeg = leg1;
setActiveButton("leg1Btn");
updateInputs();
});

// 确认并跳转按钮点击事件
document.getElementById("confirmBtn").addEventListener("click", function() {
currentLeg.thigh = parseInt(document.getElementById("thighInput").value);
currentLeg.calf = parseInt(document.getElementById("calfInput").value);
alert("保存成功！");
// 跳转到另一个页面
window.location.href = "另一个页面的URL";
});

// 设置按钮的活动状态
function setActiveButton(buttonId) {
var buttons = document.querySelectorAll("button");
buttons.forEach(function(button) {
button.classList.remove("active");
});
document.getElementById(buttonId).classList.add("active");
}

// 更新输入框的数值
function updateInputs() {
document.getElementById("thighInput").value = currentLeg.thigh;
document.getElementById("calfInput").value = currentLeg.calf;
}
</script>
</body>
</html>