遗憾的是，HTML输入和JavaScript本身都不支持duration数据类型。<input type="time">用于一天中的某个时间，可能会根据您的区域设置显示AM/PM选择器。
最好的办法是使用文本输入，并使用JavaScript事件自动插入:并忽略无效输入。使用pattern属性也会有所帮助。在从JavaScript方面使用它之前，请确保将值转换为数字。给你点东西让你开始。

{
  let durationIn = document.getElementById("duration-input");
  let resultP = document.getElementById("output");
  
  durationIn.addEventListener("change", function (e) {
    resultP.textContent = "";
    durationIn.checkValidity();
  });
  
  durationIn.addEventListener("invalid", function (e) {
    resultP.textContent = "Invalid input";
  });
}

input:invalid:not(:focus) { background: red; }

<input id="duration-input" type="text" required pattern="[0-9]{2}:[0-9]{2}:[0-9]{2}:[0-9]{2}" value="00:00:00:00" title="Write a duration in the format hh:mm:ss:ms">

<p id="output"></p>

我相信有很多开源库提供了现成的小部件。

也许可以试试这样的东西：

<input type="time" step="0.001">

字符串

<label for="appt">Choose a time for your meeting:</label>

<input type="time" id="appt" name="appt"
       min="09:00" max="18:00" required>

<small>Office hours are 9am to 6pm</small>

字符串
试试这个...希望这个有帮助！这是我为我的一个项目做的