角度选择更改 - JavaScript

本文将介绍如何在 JavaScript 中选择角度，并对角度进行更改。包括以下几个部分：

• 在 HTML 中创建一个包含角度选择器的元素
• 使用 JavaScript 获取该元素以及选择的角度
• 将角度转换为弧度
• 使用 JavaScript 更改角度并更新 HTML

在 HTML 中创建一个包含角度选择器的元素

我们将使用 HTML 的 input 元素来创建一个可以修改角度的选择器。

<label for="angle">Angle:</label>
<input type="number" id="angle" value="0" min="0" max="360" step="1">

这个 input 元素有一个 type 属性，它的值为 number，这表示输入的值必须是数字。

id 属性可以在 JavaScript 中用来获取该元素。

value 属性表示默认的值为 0。

min 属性和 max 属性分别表示可以输入的最小值和最大值。

step 属性表示每次调整的步长。

使用 JavaScript 获取选择的角度

在 JavaScript 中，我们可以使用 document.getElementById() 方法来获取 angle 元素。

const angleInput = document.getElementById('angle');

然后，我们可以使用 value 属性获得所选的角度。

const angle = angleInput.value;

将角度转换为弧度

JavaScript 中，许多数学函数使用弧度而不是角度。

将角度转换为弧度的公式是：radians = (angle * Math.PI) / 180。

在我们进行任何计算之前，我们需要将角度转换为弧度。

const radians = (angle * Math.PI) / 180;

使用 JavaScript 更改角度并更新 HTML

我们可以使用 addEventListener() 方法在 angleInput 上添加一个 change 事件监听器。

angleInput.addEventListener('change', function() {
  const angle = angleInput.value;
  const radians = (angle * Math.PI) / 180;
  
  // do something with radians
  
  console.log(radians);
});

这里，我们在控制台上输出了弧度。现在，我们可以在这个事件监听器中修改角度并更新 HTML。

angleInput.addEventListener('change', function() {
  const angle = angleInput.value;
  const radians = (angle * Math.PI) / 180;
  
  const element = document.getElementById('my-element');
  
  element.style.transform = `rotate(${angle}deg)`;
});

这里，我们获取了一个 id 为 my-element 的元素，然后使用 style.transform 属性将其旋转角度更改为 angle。