作为程序员,没有合适的工具,就得手搓一个,PC端,移动端均可适用。废话不多说,直接上代码。
HTML:
<div class="calculator"><label for="radius">圆的半径 (r):</label> <input id="radius" type="number" placeholder="输入圆的半径"> <label for="angle">圆心角 (θ,以弧度为单位):</label> <input id="angle" type="number" placeholder="输入圆心角(单位:弧度)"><button onclick="calculateArcLength()">计算弧长</button><div id="result" class="result">弧长结果将显示在这里</div></div>
JS:
function calculateArcLength() {
const radius = parseFloat(document.getElementById('radius').value);
const angle = parseFloat(document.getElementById('angle').value);
if (isNaN(radius) || isNaN(angle) || radius <= 0 || angle <= 0) {
document.getElementById('result').textContent = "请输入有效的半径和圆心角。";
return;
}
const arcLength = radius * angle;
document.getElementById('result').textContent = `弧长为:${arcLength.toFixed(2)} 单位长度`;
}
CSS:
.calculator {
width: 300px;
background-color: #333;
color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
label {
display: block;
margin-bottom: 10px;
font-size: 16px;
}
input, select {
width: 100%!important;
padding: 10px!important;
margin-bottom: 20px;
color: #000000;
border-radius: 5px;
border: 1px solid #555;
font-size: 16px!important;
background-color: #ffffff!important;
}
button {
width: 100%;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: orange;
}
.result {
margin-top: 20px;
text-align: center;
font-size: 18px;
}
option {
background-color: #ffffff;
}
p {
font-size: 18px;
margin-top: 5px!important;
}
线上运行,可以直接打开:弧长计算器