时间戳

首页 > 解决方案 > 可以将带有时间类型输入的整数输入和结果添加到时间类型输入吗？

javascript - 可以将带有时间类型输入的整数输入和结果添加到时间类型输入吗？

问题描述

正如我在标题中提到的，我在 HTML 中有三个输入：

<input type="number" name="time" id="time"> 
<input type="time" name="hour_start" id="hour_start"> 
<input type="time" name="hour_final" id="hour_final">

和JS：

    <script>
            $("#time").change(function () {

                var time = $('#time').val();
                var start = $('#hour_start').val();
                var convert = Math.floor(time/60);
                var final = start + convert;

                $('#hour_final').val(final);

            });

    </script>

无需使用按钮即可完成计算。 在此处输入图像描述

标签： javascript

解决方案

Javascript答案（如你所问）：

const myForm = document.querySelector('#my-Form')
    , z2     = v=>('00'+v).slice(-2) // like padStart(2.'0')

myForm.time.oninput=_=>
  {
  let inDate = myForm.hour_start.valueAsDate
    , h_UTC  = inDate.getUTCHours()
    , m_UTC  = inDate.getUTCMinutes()
    , nTim   = (h_UTC * 60) + m_UTC + myForm.time.valueAsNumber

  h_UTC = Math.trunc(nTim/60) % 24
  m_UTC = nTim % 60

  inDate.setUTCHours(h_UTC)
  inDate.setUTCMinutes(m_UTC)

  myForm.hour_final.valueAsDate =  inDate
  }

myForm.onsubmit=e=>
  {
  e.prventdefault() // just for test
  }
<form action="xxx" id="my-Form">

  <input type="number" name="time"     value="0"  min="0" max="2000">
  <input type="time" name="hour_start" value="13:30">
  <input type="time" name="hour_final" value="13:30">

</form>

推荐阅读