时间戳

首页 > 解决方案 > 12 小时制，每小时 3 个时隙

javascript - 12 小时制，每小时 3 个时隙

问题描述

我正在尝试从用户的两个输入starts-at和duration.

基本上，这个对象将显示一个 12 小时制的时钟。每小时有三个时段，每个时段 20 分钟。

如果他们100从持续时间中选择分钟，对象应该看起来像

{
    "1": [20, 40, 60],
    "2": [20, 40]
}

而当前的输出是

{
    "1": 40,
    "2": 40
}

请指教。

$(".btn-calculate").click(function () {
    var startsAt = Number($(".starts-at").val());
    var duration = Number($(".duration").val());

    var hours = Math.floor(duration / 60) + startsAt;
    var minutes = duration % 60;

    var occupiedSlots = {};

    while (hours >= 1) {
        occupiedSlots[hours] = minutes;
        --hours;
    }

    $("textarea").val(JSON.stringify(occupiedSlots, undefined, 4));
});
body {
    font-family: monospace;
}
select,
button {
    padding: 10px 20px;
}
textarea {
    width: 100%;
    min-height: 400px;
    margin-top: 20px;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

Starts At
<select class="starts-at">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
</select>

Duration
<select class="duration">
    <option>20</option>
    <option>40</option>
    <option>60</option>
    <option>80</option>
    <option>100</option>
    <option>120</option>
    <option>140</option>
    <option>160</option>
    <option>180</option>
    <option>200</option>
    <option>220</option>
    <option>240</option>
</select>

<button class="btn-calculate">Calculate</button>

<textarea readonly></textarea>

标签： javascriptarraysjsonsortingobject

解决方案

您已经非常接近正确的解决方案了。您必须为每个新小时创建一个数组并将分钟推送到数组中，而不是设置值：

$(".btn-calculate").click(function () {
    const startsAt = Number($(".starts-at").val());
    const duration = Number($(".duration").val());

    const occupiedSlots = {};

    for (let time = 20; time <= duration; time += 20) {
        const hour = (Math.floor((time - 20) / 60) + startsAt - 1) % 12 + 1;
        if (!(hour in occupiedSlots)) occupiedSlots[hour] = [];
        occupiedSlots[hour].push((time - 20) % 60 + 20);
    }

    $("textarea").val(JSON.stringify(occupiedSlots, undefined, 4));
});
body {
    font-family: monospace;
}
select,
button {
    padding: 10px 20px;
}
textarea {
    width: 100%;
    min-height: 400px;
    margin-top: 20px;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

Starts At
<select class="starts-at">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
</select>

Duration
<select class="duration">
    <option>20</option>
    <option>40</option>
    <option>60</option>
    <option>80</option>
    <option>100</option>
    <option>120</option>
    <option>140</option>
    <option>160</option>
    <option>180</option>
    <option>200</option>
    <option>220</option>
    <option>240</option>
</select>

<button class="btn-calculate">Calculate</button>

<textarea readonly></textarea>

推荐阅读