? ? ? ?作為程序員庐橙，沒有合適的工具，就得手搓一個(gè)借嗽，PC端态鳖，移動(dòng)端均可適用。廢話不多說(shuō)恶导，直接上代碼浆竭。
HTML:
<div class="calculator"><label for="inputValue">輸入角度值:</label> <input id="inputValue" type="number" placeholder="請(qǐng)輸入數(shù)值"> <label for="inputUnit">選擇輸入單位:</label><select id="inputUnit"><option value="degrees">度 (°)</option><option value="radians">弧度 (rad)</option><option value="gradians">梯度 (gons)</option></select><label for="outputUnit">選擇輸出單位:</label><select id="outputUnit"><option value="degrees">度 (°)</option><option value="radians">弧度 (rad)</option><option value="gradians">梯度 (gons)</option></select><button onclick="convertAngle()">計(jì)算</button><div class="result"><p>轉(zhuǎn)換結(jié)果:</p><p id="outputValue">0</p></div></div>
JS:
function convertAngle() { const inputValue = parseFloat(document.getElementById('inputValue').value); const inputUnit = document.getElementById('inputUnit').value; const outputUnit = document.getElementById('outputUnit').value; if (isNaN(inputValue)) { alert('請(qǐng)輸入有效的角度值'); return; } let valueInDegrees; // Convert input value to degrees switch (inputUnit) { case 'degrees': valueInDegrees = inputValue; break; case 'radians': valueInDegrees = inputValue * (180 / Math.PI); break; case 'gradians': valueInDegrees = inputValue * (9 / 10); break; } // Convert degrees to output unit let convertedValue; switch (outputUnit) { case 'degrees': convertedValue = valueInDegrees; break; case 'radians': convertedValue = valueInDegrees * (Math.PI / 180); break; case 'gradians': convertedValue = valueInDegrees * (10 / 9); break; } document.getElementById('outputValue').textContent = convertedValue.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; } option { background-color: #ffffff; } p { font-size: 18px; margin-top: 5px!important; }
線上運(yùn)行，可以直接打開：角度單位換算計(jì)算器? ? ?(在線計(jì)算器)
