从 GUI 重写 JS 代码以在 Web 应用程序中使用

Question

我需要一个函数来计算用户输入中的帧数。我有一些来自 Electron GUI 的代码来完成这项工作，但我不确定如何在我的 HTML 中做到这一点。我希望它从 html 中的#id_desiredFrames中获取输入，然后从中计算总帧数。

需要重写的代码：

* @example 
* "55;58-60,2" -> 55,58,60     -> 3 Frames
* "55;58-60"   -> 55,58,59,60  -> 4 Frames
*/
function calculateFrameAmount(_frame){
const notationArray = _frame.match(/(d+)(-)?(d+)?(,d)?/g)
const calculateNotation = item => {
if (!isNaN(item))
return 1
if (item.includes(",")) {
[item, diff] = item.split(",");
}
const splitItem = item.split("-")
return Math.floor((Math.max(...splitItem) - Math.min(...splitItem)) / diff) + 1
}
let diff = 1;
return notationArray
.map(calculateNotation)
.reduce((total, amount) => total += amount)
}
export default calculateFrameAmount

我该怎么做呢？我知道我可以使用document.getElementById("id_desiredFrames").value;获取值，但是如何将值添加到函数中？

Answer 1

如果要查找要在更改时计算的值，则可以执行以下操作：

var desiredFrames = document.getElementById("id_desiredFrames");
desiredFrames.onchange = function(e) {
calculateFrameAmount(e.target.value);
}

此外，如果需要实时计算，则可以在keyup上运行计算：

desiredFrames.onkeyup = function(e) {
calculateFrameAmount(e.target.value);
}