舵机校准 - 前左腿、前右腿、后左腿、后右腿调整
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0 ,user-scalable=no">
<title>舵机校准 - 前左腿、前右腿、后左腿、后右腿调整</title>
<style>
.h1{
text-align: center;
}
table{
margin: auto;
width: 230px;
height: 100px;
border-collapse:collapse;
}
td{
text-align: center;
padding: 0;
margin: 0;
}
.set_up1{
box-sizing: border-box;
width: 100%;
height: 100%;
border: black;
background-color: #e7e7e7;
color: black;
font-size: 15px;
}
.button3{
background-repeat:no-repeat;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
<pre><code> }
.button3:hover{
background-color: #4CAF50; /* Green */
color: white;
}
.set_up2{
box-sizing: border-box;
width: 100px;
height: 40px;
background-color: #e7e7e7;
color: black;
font-size: 14px;
font-size: 15px;
padding: 10px 15px;;
}
.set_up3{
box-sizing: border-box;
width: 50px;
height: 10px;
background-color: white;
color: black;
border: none;
font-size: 15px;
border-radius: 5px;
padding: 4px;
}
#saveBtn{
width: 100%;
height: 100%;
background-repeat:no-repeat;
color: black;
border: none;
border-radius: 5px;
padding: 15px 20px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
#resetBtn{
width: 100%;
height: 100%;
background-repeat:no-repeat;
color: black;
border: none;
border-radius: 5px;
padding: 15px 20px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
#confirmBtn{
width: 50%;
height: 100%;
background-repeat:no-repeat;
border: none;
color: black;
background-color: #e7e7e7;
border-radius: 5px;
padding: 15px 5px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.input{
width: 80%;
padding: 10px 8px;
}
input:focus{
background-color: #e7e7e7;
}
</style>
</code></pre>
</head>
<body>
<br>
<br>
<h1 class="h1">舵机校准</h1>
<table>
<tr>
<td><button class="set_up1" id="leg1Btn">前左腿</button></td>
<td><button class="set_up1" id="leg2Btn">前右腿</button></td>
</tr>
<tr>
<td><button class="set_up1" id="leg3Btn">后左腿</button></td>
<td><button class="set_up1" id="leg4Btn">后右腿</button></td>
</tr>
</table>
<p></p>
<p></p>
<table>
<tr>
<td class="set_up2">大腿</td>
<td class="set_up2">小腿</td>
</tr>
<tr>
<td class="set_up2"><input type="number" class="input" id="thighInput" value="90"></td>
<td class="set_up2"><input type="number" class="input" id="calfInput" value="90"></td>
</tr>
<tr>
<td><br></td>
</tr>
<tr>
<td class="set_up3" colspan="2"><button id="saveBtn">确定</button></td>
</tr>
<tr>
<td class="set_up3" colspan="2"><button id="resetBtn">重置所有</button></td>
</tr>
</table>
<br>
<br>
<div align="center">
<button id="confirmBtn">保存并退出设置</button>
</div>
<script>
// 初始数据
var leg1 = {
thigh: localStorage.getItem('leg1thighData'),
calf: localStorage.getItem('leg1calfData')
};
var leg2 = {
thigh: localStorage.getItem('leg2thighData'),
calf: localStorage.getItem('leg2calfData')
};
var leg3 = {
thigh: localStorage.getItem('leg3thighData'),
calf: localStorage.getItem('leg3calfData')
};
var leg4 = {
thigh: localStorage.getItem('leg4thighData'),
calf: localStorage.getItem('leg4calfData')
};
<p>// 当前选择的腿
var currentLeg = leg1;
const leg1Button = document.getElementById('leg1Btn');
const leg2Button = document.getElementById('leg2Btn');
const leg3Button = document.getElementById('leg3Btn');
const leg4Button = document.getElementById('leg4Btn');
// 初始化界面
document.getElementById("thighInput").value = currentLeg.thigh;
document.getElementById("calfInput").value = currentLeg.calf;
leg1Button.style.backgroundColor = '#4CAF50';</p>
<p>// 腿按钮点击事件
document.getElementById("leg1Btn").addEventListener("click", function(event) {
event.preventDefault();
currentLeg = leg1;
leg1Button.style.backgroundColor = '#4CAF50';
leg2Button.style.backgroundColor = '';
leg3Button.style.backgroundColor = '';
leg4Button.style.backgroundColor = '';
setActiveButton("leg1Btn");
updateInputs();
});</p>
<p>document.getElementById("leg2Btn").addEventListener("click", function(event) {
event.preventDefault();
currentLeg = leg2;
leg1Button.style.backgroundColor = '';
leg2Button.style.backgroundColor = '#4CAF50';
leg3Button.style.backgroundColor = '';
leg4Button.style.backgroundColor = '';
setActiveButton("leg2Btn");
updateInputs();
});</p>
<p>document.getElementById("leg3Btn").addEventListener("click", function(event) {
event.preventDefault();
currentLeg = leg3;
leg1Button.style.backgroundColor = '';
leg2Button.style.backgroundColor = '';
leg3Button.style.backgroundColor = '#4CAF50';
leg4Button.style.backgroundColor = '';
setActiveButton("leg3Btn");
updateInputs();
});</p>
<p>document.getElementById("leg4Btn").addEventListener("click", function(event) {
event.preventDefault();
currentLeg = leg4;
leg1Button.style.backgroundColor = '';
leg2Button.style.backgroundColor = '';
leg3Button.style.backgroundColor = '';
leg4Button.style.backgroundColor = '#4CAF50';
setActiveButton("leg4Btn");
updateInputs();
});</p>
<p>// 保存按钮点击事件
document.getElementById("saveBtn").addEventListener("click", function() {
currentLeg.thigh = parseInt(document.getElementById("thighInput").value);
currentLeg.calf = parseInt(document.getElementById("calfInput").value);
localStorage.setItem('leg1thighData', leg1.thigh);
localStorage.setItem('leg1calfData', leg1.calf);
localStorage.setItem('leg2thighData', leg2.thigh);
localStorage.setItem('leg2calfData', leg2.calf);
localStorage.setItem('leg3thighData', leg3.thigh);
localStorage.setItem('leg3calfData', leg3.calf);
localStorage.setItem('leg4thighData', leg4.thigh);
localStorage.setItem('leg4calfData', leg4.calf);
});</p>
<p>// 恢复默认按钮点击事件
document.getElementById("resetBtn").addEventListener("click", function() {
leg1.thigh = 90;
leg1.calf = 90;
leg2.thigh = 90;
leg2.calf = 90;
leg3.thigh = 90;
leg3.calf = 90;
leg4.thigh = 90;
leg4.calf = 90;
currentLeg = leg1;
setActiveButton("leg1Btn");
updateInputs();
});</p>
<p>// 确认并跳转按钮点击事件
document.getElementById("confirmBtn").addEventListener("click", function() {
currentLeg.thigh = parseInt(document.getElementById("thighInput").value);
currentLeg.calf = parseInt(document.getElementById("calfInput").value);
localStorage.setItem('leg1thighData', leg1.thigh);
localStorage.setItem('leg1calfData', leg1.calf);
localStorage.setItem('leg2thighData', leg2.thigh);
localStorage.setItem('leg2calfData', leg2.calf);
localStorage.setItem('leg3thighData', leg3.thigh);
localStorage.setItem('leg3calfData', leg3.calf);
localStorage.setItem('leg4thighData', leg4.thigh);
localStorage.setItem('leg4calfData', leg4.calf);
alert("保存成功！");
// 跳转到另一个页面
window.location.href = "./main.html";
});</p>
<p>// 设置按钮的活动状态
function setActiveButton(buttonId) {
var buttons = document.querySelectorAll("button");
buttons.forEach(function(button) {
button.classList.remove("active");
});
document.getElementById(buttonId).classList.add("active");
}</p>
<p>// 更新输入框的数值
function updateInputs() {
document.getElementById("thighInput").value = currentLeg.thigh;
document.getElementById("calfInput").value = currentLeg.calf;
}</p>
<p>var pressTimer;</p>
<p>// 长按事件处理函数
function longPress() {
// 在此处添加需要在长按时执行的代码</p>
<p>console.log("长按事件触发");
}</p>
<p>// 鼠标按下事件处理函数
function onButtonPress() {
// 设置计时器，在500毫秒之后触发长按事件
pressTimer = setTimeout(longPress, 500);
}</p>
<p>// 鼠标松开事件处理函数
function onButtonRelease() {
// 清除计时器，如果在500毫秒内松开按钮，则不会触发长按事件
clearTimeout(pressTimer);
}</p>
<p>// 获取所有按钮元素
var buttons = document.getElementsByClassName("myButton");</p>
<p>// 遍历按钮，并为每个按钮添加事件监听器
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('mousedown', onButtonPress);
buttons[i].addEventListener('touchstart', onButtonPress);
buttons[i].addEventListener('mouseup', onButtonRelease);
buttons[i].addEventListener('touchend', onButtonRelease);
}
</script></p>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/p0Hd 著作权归作者所有。请勿转载和采集!