我正在尝试创建一个使用距离/时间的数学公式计算出速度的应用程序。
我正在努力从我创建的三个输入框中找到以正确的格式花费时间的代码。我用小时输入值得到了正确的答案，但是当我加上分钟和秒值时，它却无法正常工作。我知道我的代码中的时间字段缺少很多东西，但是我不太想办法解决。我的代码在下面，我非常感谢一个解决方案，甚至是解决方案背后的逻辑。：）
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<h1>Speed Calculator</h1>
<div speedcalc>
<label for="distance"><b>Distance:</b></label>
<input type="number" id="distanceInput">
<select>
<option value="miles">Miles</option>
<option value="kilometres">Kilometres</option>
</select>
<br>
<br>
<label for="number"><b>Time</b></label>
<label for="number">Hours: </label>
<input type="number" id="hoursInput">
<label for="number">Minutes: </label>
<input type="number" id="minutesInput">
<br>
<br>
<label for="number">Seconds: </label>
<input type="number" id="secondsInput">
<br>
<br>
<button id="averageSpeedBtn">Average Speed</button>
<br>
<br>
<p></p>
</div>
<script src="app.js" async defer></script>
</body>
</html>
let distance = document.getElementById('distanceInput');
let hours = document.getElementById('hoursInput');
let minutes = document.getElementById('minutesInput');
let seconds = document.getElementById('secondsInput');
const distanceSelect = document.querySelector('select');
const averageSpeedBtn = document.getElementById('averageSpeedBtn');
const para = document.querySelector('p');
averageSpeedBtn.addEventListener('click', function speed() {
let mile = distance.value;
let time = hours.value + minutes.value + seconds.value;
let formula = mile / time;
para.textContent = 'average speed : ' + formula;
});
之所以无法获得正确的值，是因为您收到的输入值是一个字符串，因此您需要使用parseInt like将其转换为数字，
let distance = document.getElementById('distanceInput');
let hours = document.getElementById('hoursInput');
let minutes = document.getElementById('minutesInput');
let seconds = document.getElementById('secondsInput');
const distanceSelect = document.querySelector('select');
const averageSpeedBtn = document.getElementById('averageSpeedBtn');
const para = document.querySelector('p');
averageSpeedBtn.addEventListener('click', function speed() {
let mile = distance.value;
let time = (+hours.value) + (+minutes.value) + (+seconds.value)
let formula = mile / time;
para.textContent = 'average speed : ' + formula;
});<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<h1>Speed Calculator</h1>
<div speedcalc>
<label for="distance"><b>Distance:</b></label>
<input type="number" id="distanceInput">
<select>
<option value="miles">Miles</option>
<option value="kilometres">Kilometres</option>
</select>
<br>
<br>
<label for="number"><b>Time</b></label>
<label for="number">Hours: </label>
<input type="number" id="hoursInput">
<label for="number">Minutes: </label>
<input type="number" id="minutesInput">
<br>
<br>
<label for="number">Seconds: </label>
<input type="number" id="secondsInput">
<br>
<br>
<button id="averageSpeedBtn">Average Speed</button>
<br>
<br>
<p></p>
</div>
<script src="app.js" async defer></script>
</body>
</html>虽然您的问题是关于将输入字符串转换为数字，但是您也可以通过将时间变量设置为以下，将时间视为实时，
let time = (+hours.value) + (+minutes.value) / 60.0 + (+seconds.value) / 3600.0