javascript - DOM 元素转换为整数并将它们转换为总时间量 - 小时/分钟 parseFloat
问题描述
所以我有一个网站记录的想法,我试图获取所有的分钟和小时,然后创建总时间。
这是网站:
这是代码和框:
https://codesandbox.io/s/boring-lalande-e013g?file=/src/index.js
如您所见,我得到了分钟并尝试将其转换为 parseFloat ,然后尝试全部完成,但是我被卡住了。
const mins = document.querySelectorAll('.minutes');
// console.log(mins.value.innerText);
//var totalMinutes = 0;
mins.forEach(min => {
const convertMins = parseFloat(min.innerHTML);
// console.log(`convertMins: ${convertMins}`);
const calculate = min + convertMins;
//const calculate = convertMins + convertMins;
console.log(calculate);
// const minutes = min.innerHTML;
// console.log(`Minutes: ${minutes}`);
//console.log(min.innerText);
});
如果有人可以提供指导,我将不胜感激。
谢谢,
戴夫。
PS我也在这里问过Reddit:https ://www.reddit.com/r/learnjavascript/comments/hlktfs/getting_all_minutes_and_hours_and_converting_them/
谢谢!
编辑
感谢 Pedro 的帮助,如果有人想这样做,这里的整个解决方案就是:
//Minutes
const mins = document.querySelectorAll(".minutes");
var totalMinutes = 0;
mins.forEach(min => {
const convertMins = parseFloat(min.innerHTML);
totalMinutes = totalMinutes + convertMins;
});
console.log(totalMinutes);
//Hours
const hours = document.querySelectorAll(".hours");
var totalHours = 0;
hours.forEach(hour => {
const convertHours = parseFloat(hour.innerHTML);
console.log(`Hours: ${convertHours}`);
const newMins = convertHours * 60;
console.log(`new mins: ${newMins}`);
// totalHours = totalHours + convertHours;
totalHours = totalHours + newMins;
});
console.log(`Total Hours ${totalHours}`);
//Then add the lot
const addTotal = totalMinutes + totalHours;
console.log(`This is the total time: ${addTotal}`);
//Then Convert The Lot
function time_convert(addTotal) {
var hours = Math.floor(addTotal / 60);
var minutes = addTotal % 60;
return `${hours} hrs : ${minutes} Minutes`;
}
// console.log(time_convert(161));
const headingTotal = document.querySelector(".totalTime");
console.log(headingTotal);
headingTotal.innerText = time_convert(addTotal);
解决方案
最短的方法是使用reduce
:
const mins = document.querySelectorAll('.minutes');
var totalMinutes = mins.reduce((sum, min) => {
const convertMins = parseFloat(min.innerHTML);
return sum + convertMins;
}, 0);
console.log(totalMinutes);
但是,如果这对您来说很复杂,这里有一个解决方案forEach
:
const mins = document.querySelectorAll('.minutes');
var totalMinutes = 0;
mins.forEach(min => {
const convertMins = parseFloat(min.innerHTML);
totalMinutes = totalMinutes + convertMins;
});
console.log(totalMinutes);
推荐阅读
- dart - 如何提取 Dart/Flutter 视频元数据
- javascript - ReactJs - 以更高级的方式将道具传递给子组件
- ios - Objective-C:以编程方式在 Instagram 直接消息或提要中共享文本
- ruby-on-rails - 在设计中使用 ajax 表单时处理错误和闪烁消息
- node.js - 无法将 oracle db 与 nodejs 连接
- swift - Xcode 在执行下一个任务之前等待动画完成
- reactjs - 创建一个 React 组件库
- php - PHP Fatal error: Cannot use try without catch or finally
- javascript - 单击 cytoscape.js 中的节点时更改边缘颜色
- audio - Python 3.7 text-to-speech 只播放一个音频文件,有时根本没有音频,使用 IDLE 编辑器