js车速表
时间: 2023-08-06 15:16:27 浏览: 72
您可以使用以下代码实现一个简单的 JavaScript 车速表:
```javascript
// 获取页面元素
const speedometer = document.querySelector('.speedometer');
const speed = document.querySelector('.speed');
// 定义变量
let rotation = 0;
let speedValue = 0;
// 更新车速表
function updateSpeedometer() {
speedometer.style.transform = `rotate(${rotation}deg)`;
speed.textContent = `${speedValue} km/h`;
}
// 监听键盘输入
window.addEventListener('keydown', (e) => {
if (e.keyCode === 38) { // 上箭头键
rotation += 10;
speedValue += 10;
updateSpeedometer();
} else if (e.keyCode === 40) { // 下箭头键
rotation -= 10;
speedValue -= 10;
updateSpeedometer();
}
});
```
上述代码中,我们通过 `querySelector` 方法获取了两个页面元素,一个是车速表的指针,一个是显示车速的文本。然后定义了两个变量 `rotation` 和 `speedValue`,用于保存指针的旋转角度和车速值。接着,我们定义了一个 `updateSpeedometer` 函数,用于更新车速表的指针和文本。最后,我们监听了键盘输入事件,当用户按下上箭头键或下箭头键时,更新指针的旋转角度和车速值,并调用 `updateSpeedometer` 函数更新车速表。