如何在输入框值变化时通过函数计算更新时间码输出字段？

我看了你的代码，发现核心问题是计算时间码的逻辑只在页面加载时执行了一次，之后输入框内容变化时，并没有重新根据新的输入值计算时间码，只是重复设置了最初的结果。下面是修复后的完整代码，我会解释关键改动：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="timecode_input" type="text" value="25" style="width:90%"> Frames
<p class="timecode_output" style="margin-top:10px"></p>

<script>
var fps = 25;
var timecode_p = document.querySelector('.timecode_output');
var input = document.querySelector('.timecode_input');

// 封装补零函数，保持原有逻辑不变
function pad(str, width, what, left) {
  str = String(str);
  what = String(what);
  var w = width - str.length;
  if (left) {
    return (new Array(w + 1)).join(what) + str;
  } else {
    return str + (new Array(w + 1)).join(what);
  }
}

// 新增：把时间码计算逻辑封装成独立函数，接收帧数参数返回格式化结果
function calculateTimecode(frameCount) {
  // 处理非法输入：非数字/负数时返回默认时间码
  if (isNaN(frameCount) || frameCount < 0) {
    return "00:00:00:00";
  }
  var SS = Math.floor(frameCount / fps);
  var MM = Math.floor(SS / 60);
  var HH = Math.floor(MM / 60);
  var FF = frameCount - (SS * fps);
  
  // 对分钟、秒数取余，避免出现超过60的数值（比如120秒会转为2分钟而非02:60）
  var timecode = [HH, MM % 60, SS % 60, FF];
  for (var i = 0; i < timecode.length; i += 1) {
    timecode[i] = pad(timecode[i], 2, 0, true);
  }
  return timecode.join(':');
}

// 更新setText函数：每次调用都基于当前输入值重新计算
function setText(v){
  var resultString = calculateTimecode(parseInt(v, 10));
  timecode_p.innerHTML = resultString;
  console.log(resultString);
}

// 绑定输入事件：输入框值变化时立即触发计算
input.addEventListener('input', function(){
  setText(this.value);
  console.log(this.value);
})

// 页面加载完成后初始化显示
setText(input.value);
</script>

关键改动说明： #

1. 封装计算逻辑：把原本只执行一次的时间码计算，改成可重复调用的calculateTimecode函数，确保输入变化时能重新计算。
2. 修复数值溢出问题：给MM和SS加上取余操作，避免出现01:60:60:00这种不符合时间码规范的结果。
3. 增加输入校验：处理非数字、负数等非法输入，避免页面出现NaN错误。
4. 优化代码结构：把全局变量初始化和事件绑定逻辑整理得更清晰，便于维护。

这样修改后，输入框的值每次变化时，都会自动重新计算并更新对应的时间码输出了。

内容的提问来源于stack exchange，提问作者peace_love