时间戳

首页 > 解决方案 > 输入时间增加 30 分钟

javascript - 输入时间增加 30 分钟

问题描述

我有 2 个输入（type="time"）。我希望在第一个输入字段中输入的时间得到 + 30 分钟并将其写入第二个输入字段。有可能吗？我的JS不太好：我

<html>
    <form>
        <label for="start">Start: <input type="time" id="start" name="start" step="600"> </label><br>
        <label for="ende">Ende:  <input type="time" id="ende" name="ende" step="600"> </label>
        <input type="submit" value="senden">
    </form>
</html>

我想我需要在 JS 中获取输入 ID 并添加 30 分钟？像这样：

document.getElementById('start').value;

...但是如何添加 30 分钟？

标签： javascripthtml

解决方案

时间输入存储了表单的字符串值xx:xx，想法是change在开始输入中添加一个事件监听器，获取它的值，给它加上 30 分钟，然后分配给结束输入。

这是一个可运行的代码片段，显示了一种可能的解决方案，并带有分步注释：

// get input elements
const start = document.getElementById('start');
const end = document.getElementById('ende');
// add a change event listener to the start input
start.addEventListener('change', () => {
    // get hours and minutes as integer values
    let hours = parseInt(start.value.split(':')[0]);
    let minutes = parseInt(start.value.split(':')[1]);
    // add 30 minutes
    minutes += 30;
    // if an hour is exceeded, add it to hours instead
    // and account for a day passing by
    if (minutes >= 60) {
        hours = (hours + 1) % 24;
        minutes -= 60;
    }
    // reformat values as strings with a fix length of 2
    hours = (hours < 10 ? `0${hours}` : `${hours}`);
    minutes = (minutes < 10 ? `0${minutes}` : `${minutes}`);
    // assign new value to the end input
    end.value = `${hours}:${minutes}`;
});
<form>
    <label for="start">Start: <input type="time" id="start" name="start" step="600"> </label><br>
    <label for="ende">Ende:  <input type="time" id="ende" name="ende" step="600"> </label>
    <input type="submit" value="senden">
</form>

推荐阅读