为了账号安全,请及时绑定邮箱和手机立即绑定

HTML 输入字段可自动检索分钟、小时和天的粒度

HTML 输入字段可自动检索分钟、小时和天的粒度

斯蒂芬大帝 2023-11-13 15:04:10
我需要一个输入字段来设置持续时间。用户可以在 中设置此持续时间minutes,hours或days例如,我想提供如下输入的可能性:1m 8.5 h 3dETC我会将值转换为分钟数,然后将值发送到后端。你知道一些输入插件有这个功能吗?
查看完整描述

4 回答

?
萧十郎

TA贡献1815条经验 获得超13个赞

使用moment.js您可以允许输入如下:


const threeMinuts = '3m';       // 3 minutes

const eightHours  = '8.5 h';    // 8.5 hours

const threeDays   = '3 days';      // 3 days

然后,您必须将数值与测量单位分开:


const numberValue = Number(input.match(/(\d|\.|,)+/)[0]);

const unit = input.match(/[a-z]+/)[0];

之后您可以将持续时间传递给时刻,如下所示:


const duration = moment.duration(numberValue, unit);

例如。:


const duration = moment.duration(8.5, 'h');


查看完整回答
反对 回复 2023-11-13
?
慕田峪4524236

TA贡献1875条经验 获得超5个赞

因为我更喜欢纯 JS 并且没有库(开销很大),所以这里有一个简单的 JS 用于此任务适应(特别是正则表达式,例如数小时 (/([0-9]0-9?)[ ]?h/) 的数字) 随你便:


function toSeconds(dd,hh,mm) {

 var d = parseInt(dd);

  var h = parseInt(hh);

  var m = parseInt(mm);

  if (isNaN(d)) d = 0;

  if (isNaN(h)) h = 0;

  if (isNaN(m)) m = 0;


 var t = d * 24 * 60 * 60 +

      h * 60 * 60 +

      m * 60;

  return t;

}


/* Expects 1d 11h 11m, or 1d 11h, or 11h 11m, 

or 11h, or 11m, or 1d returns number of seconds */

function parseInput(sInput) {

  if (sInput== null || sInput=== '') return 0;

  var mrx = new RegExp(/([0-9][0-9]?)[ ]?m/);

  var hrx = new RegExp(/([0-9][0-9]?)[ ]?h/);

  var drx = new RegExp(/([0-9])[ ]?d/);

  var days = 0;

  var hours = 0;

  var minutes = 0;

  if (mrx.test(sInput)) {

    minutes = mrx.exec(sInput)[1];

  }

  if (hrx.test(sInput)) {

    hours = hrx.exec(sInput)[1];

  }

  if (drx.test(sInput)) {

    days = drx.exec(sInput)[1];

  }


  return toSeconds(days, hours, minutes);

}


查看完整回答
反对 回复 2023-11-13
?
喵喵时光机

TA贡献1846条经验 获得超7个赞

  1. 分配每个<input> type="number"min="0"

  2. 然后max="23"持续几个小时和max="59"几分钟。

  3. 添加带有属性的隐藏输入name

  4. 如果您还没有准备好,请将所有内容包装在 a 中<form>并将其注册到"input"事件中。

  5. 创建一个事件处理程序来提取和计算所有输入的值,然后将总计分配给隐藏输入。

  6. <form>提交时,隐藏的输入值将被发送,因为它有一个name属性。

顺便说一句,让用户在一个输入中输入如此多的值并不是真正好的用户体验。您应该为用户提供明确定义的字段,要求用户输入数据而不需要额外的复杂性。


演示

document.forms.duration.oninput = toMinutes;


function toMinutes(e) {

  const dur = this.elements;

  let time;

  if (e.target.tagName === 'INPUT') {

    let d = Number(dur.days.value) * 1440;

    let h = Number(dur.hours.value) * 60;

    let m = Number(dur.minutes.value);

    time = d + h + m;

    dur.time.value = time;

  }

  console.log(dur.time.value);

}

:root,

body {

  font: 400 3vw/1.45 Consolas

}


fieldset {

  width: max-content;

}


label,

input {

  width: 6.5ch;

  display: inline-block;

  margin: 4px;

}


input {

  height: 3vw;

  line-height: 1;

  font: inherit;

  text-align: right

}


.as-console-wrapper {

  width: 40%;

  min-height: 100%;

  margin-left: 60%;

}

  

<form id='duration'>

  <fieldset>

    <legend>Duration</legend>

    <label for='days'>Days: </label>

    <input id='days' type='number' min='0' value='0'><br>

    <label for='hours'>Hours: </label>

    <input id='hours' type='number' min='0' max='23' value='0'><br>

    <label for='minutes'>Minutes: </label>

    <input id='minutes' type='number' min='0' max='59' value='0'><br>

  </fieldset>

  <input id='time' name='time' type='hidden'>

</form>


查看完整回答
反对 回复 2023-11-13
?
拉风的咖菲猫

TA贡献1995条经验 获得超2个赞

首先,您创建输入

<input id="time" type="time">

最后,使用 javascript 将值添加到输入中

document.getElementById("time").value = new Date().toTimeString().slice(0,8);


查看完整回答
反对 回复 2023-11-13
  • 4 回答
  • 0 关注
  • 149 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信