水平时段

Question

我正在尝试构建水平时段时段查看器。到目前为止，我找到了我需要的东西，但几个月后： https://codepen.io/rsschouwenaar/pen/vOodgO

这是代码：

<!doctype html>

<html lang="en">

<head>
    <meta charset="utf-8">

    <title>The HTML5 Herald</title>
    <meta name="description" content="The HTML5 Herald">
    <meta name="author" content="SitePoint">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://momentjs.com/downloads/moment.js"></script>

</head>

<body>

    <div id="timetable" class="clearfix">
        <div class="timetable_content">
            <ul class="months clearfix">
                <li data-month="8" data-year="2015">August</li>
                <li data-month="9" data-year="2015">September</li>
                <li data-month="10" data-year="2015">October</li>
                <li data-month="11" data-year="2015">November</li>
                <li data-month="12" data-year="2015">December</li>
                <li data-month="1" data-year="2016">January</li>
                <li data-month="2" data-year="2016">February</li>
                <li data-month="3" data-year="2016">March</li>
                <li data-month="4" data-year="2016">April</li>
                <li data-month="5" data-year="2016">May</li>
                <li data-month="6" data-year="2016">June</li>
                <li data-month="7" data-year="2016">July</li>
            </ul>
            <ul class="timeslots">
                <li>
                    <span class="timeslot" data-date-start="2015-8-10" data-date-end="2015-10-12">BDO</span>
                    <span class="button"></span>
                </li>
                <li>
                    <span class="timeslot" data-date-start="2015-10-10" data-date-end="2016-2-12">BDO</span>
                    <span class="button"></span>
                </li>
                <li>
                    <span class="timeslot" data-date-start="2015-12-10" data-date-end="2016-2-12">BDO</span>
                    <span class="button"></span>
                </li>
                <li>
                    <span class="timeslot" data-date-start="2015-09-10" data-date-end="2016-7-12">BDO</span>
                    <span class="button"></span>
                </li>
                <li>
                    <span class="timeslot" data-date-start="2015-1-10" data-date-end="2015-3-12">BDO</span>
                    <span class="button"></span>
                </li>
            </ul>
        </div>
    </div>
</body>
<style type="text/css">
#timetable {
     width: 100%;
     height: auto;
     max-width: 768px;
     overflow-y: hidden;
     border: 1px solid #ccc;
}
 #timetable ul {
     padding-left: 0;
     list-style: none;
     margin: 0 0 0 0;
}
 #timetable .timetable_content {
     width: 1024px;
}
 .months {
     max-height: 50px;
     overflow: hidden;
}
 .months li {
     width: 110px;
     text-align: center;
     float: left;
     display: inline-block;
     border-right: 1px solid #ccc;
     padding: 1em;
}
 .timeslots li {
     border-top: 1px solid #ccc;
     padding: 0.5em;
}
 .timeslots .timeslot {
     background: lightblue;
     padding: 0.5em;
     display: inline-block;
}
 .clearfix:after {
     content: "";
     display: table;
     clear: both;
}

</style>
<script>
    (function() {

        var firstMonthsLiElWidth = $('.months li:first').innerWidth() + 1;

        var monthItems = 0;
        $('.months li').each(function(index) {
            monthItems += firstMonthsLiElWidth;
        });

        $('.months, .timeslots, .timetable_content').width(monthItems);
        console.log('<================== start slots =============================>');
        $('.timeslots li').each(function(index) {

            var element = $(this).children('span.timeslot'),
                startDate = element.data().dateStart,
                endDate = element.data().dateEnd,
                startMonthAmountDaysInMonth = moment(startDate, "YYYY-MM-DD").daysInMonth(),
                endMonthAmountDaysInMonth = moment(endDate, "YYYY-MM-DD").daysInMonth();

            var startDateMoment = moment(startDate, 'YYYY-MM-DD');
            var endDateMoment = moment(endDate, 'YYYY-MM-DD');
            var daysInPorject = endDateMoment.diff(startDateMoment, 'days') // 1

            console.log('daysInPorject: ', daysInPorject);
            console.log('startMonthAmountDaysInMonth: ', startMonthAmountDaysInMonth);
            console.log('endMonthAmountDaysInMonth: ', endMonthAmountDaysInMonth);

            var startDateMonth = startDate.split("-")[1];
            var endDateMonth = endDate.split("-")[1];

            if (endDateMonth.indexOf('0') === 0) {
                endDateMonth = parseInt(endDateMonth, 10);
            }

            if (startDateMonth.indexOf('0') === 0) {
                startDateMonth = parseInt(startDateMonth, 10);
            }

            console.log('Months', startDateMonth + ' & ' + endDateMonth);

            var startDateEl = $(".months li[data-month='" + startDateMonth + "']").offset().left;
            var endDateEl = $(".months li[data-month='" + endDateMonth + "']").offset().left;
            var endDateElEnd = endDateEl + 110;
            var timeSlotWidth = endDateElEnd - startDateEl;
            var pixelsPerDay = (Math.round(firstMonthsLiElWidth / startMonthAmountDaysInMonth) * daysInPorject + 'px');

            console.log('Month start: ', startDateEl);
            console.log('pixelsPerDay: ', pixelsPerDay);
            console.log('Month end: ', endDateEl);
            console.log('Day end: ', endDateEl);
            console.log('Element length: ', timeSlotWidth);

            element.css('margin-left', startDateEl);
            element.width(pixelsPerDay);
            console.log('=============================');

        });

        console.log('Moment', moment("2012-02", "YYYY-MM").daysInMonth());

    })();
</script>

</html>

这个例子有两个问题：

我需要纯 JavaScript，而不是 jQuery。
我需要数小时（一天中的所有时间），而不是数月。

这是我目前所做的：

https://codepen.io/orassayag/pen/poeKVYq

这是我的代码：

<!doctype html>

<html lang="en">

<head>
    <meta charset="utf-8">

    <title>The HTML5 Herald</title>
    <meta name="description" content="The HTML5 Herald">
    <meta name="author" content="SitePoint">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://momentjs.com/downloads/moment.js"></script>

</head>

<body>

    <div id="timetable" class="clearfix">
        <div class="timetable_content">
            <ul class="hours clearfix">
                <li data-hour="00">00:00</li>
                <li data-hour="01">01:00</li>
                <li data-hour="02">02:00</li>
                <li data-hour="03">03:00</li>
                <li data-hour="04">04:00</li>
                <li data-hour="05">05:00</li>
                <li data-hour="06">06:00</li>
                <li data-hour="07">07:00</li>
                <li data-hour="08">08:00</li>
                <li data-hour="09">09:00</li>
                <li data-hour="10">10:00</li>
                <li data-hour="11">11:00</li>
                <li data-hour="12">12:00</li>
                <li data-hour="13">13:00</li>
                <li data-hour="14">14:00</li>
                <li data-hour="15">15:00</li>
                <li data-hour="16">16:00</li>
                <li data-hour="17">17:00</li>
                <li data-hour="18">18:00</li>
                <li data-hour="19">19:00</li>
                <li data-hour="20">20:00</li>
                <li data-hour="21">21:00</li>
                <li data-hour="22">22:00</li>
                <li data-hour="23">23:00</li>
                <li data-hour="00">00:00</li>
            </ul>
            <ul class="timeslots">
                <li>
                    <span class="timeslot" data-hour-start="18" data-hour-end="19">BDO</span>
                    <span class="button"></span>
                </li>
                <!--                 <li>
                    <span class="timeslot" data-date-start="2015-10-10" data-date-end="2016-2-12">BDO</span>
                    <span class="button"></span>
                </li>
                <li>
                    <span class="timeslot" data-date-start="2015-12-10" data-date-end="2016-2-12">BDO</span>
                    <span class="button"></span>
                </li>
                <li>
                    <span class="timeslot" data-date-start="2015-09-10" data-date-end="2016-7-12">BDO</span>
                    <span class="button"></span>
                </li>
                <li>
                    <span class="timeslot" data-date-start="2015-1-10" data-date-end="2015-3-12">BDO</span>
                    <span class="button"></span>
                </li> -->
            </ul>
        </div>
    </div>
</body>
<style type="text/css">
    #timetable {
        width: 100%;
        height: auto;
        max-width: 768px;
        overflow-y: hidden;
        border: 1px solid #ccc;
    }

    #timetable ul {
        padding-left: 0;
        list-style: none;
        margin: 0 0 0 0;
    }

    #timetable .timetable_content {
        width: 1024px;
    }

    .hours {
        max-height: 50px;
        overflow: hidden;
    }

    .hours li {
        width: 110px;
        text-align: center;
        float: left;
        display: inline-block;
        border-right: 1px solid #ccc;
        padding: 1em;
    }

    .timeslots li {
        border-top: 1px solid #ccc;
    }

    .timeslots .timeslot {
        background: lightblue;
        display: inline-block;
    }

    .clearfix:after {
        content: "";
        display: table;
        clear: both;
    }
</style>
<script>
    (function() {

        var firstHoursLiElWidth = $('.hours li:first').innerWidth();

        var hoursItems = 0;
        $('.hours li').each(function(index) {
            hoursItems += firstHoursLiElWidth;
        });

        $('.hours, .timeslots, .timetable_content').width(hoursItems);
        console.log('<================== start slots =============================>');
        $('.timeslots li').each(function(index) {

            var element = $(this).children('span.timeslot'),
                startDate = element.data().hourStart,
                endDate = element.data().hourEnd,
                startHourAmountHoursInDay = 24,
                endHourAmountHoursInDay = 24;

            var startDateMoment = startDate
            var endDateMoment = endDate
            var startDateHour = parseInt(startDateMoment, 10);
            var endDateHour = parseInt(endDateMoment, 10);
            var hoursInProject = (endDateHour - startDateHour) * 60;

            console.log('startDate: ', startDate);
            console.log('endDate: ', endDate);

            console.log('hoursInProject: ', hoursInProject);
            console.log('startMonthAmountDaysInMonth: ', startHourAmountHoursInDay);
            console.log('endMonthAmountDaysInMonth: ', endHourAmountHoursInDay);

            console.log('Hours', startDateHour + ' & ' + endDateHour);

            console.log('startDateHour: ' + startDateHour);
            console.log('endDateHour:' + endDateHour);
            var startDateEl = $(".hours li[data-hour='" + startDateHour + "']").offset().left - 10;
            var endDateEl = $(".hours li[data-hour='" + endDateHour + "']").offset().left;
            var endDateElEnd = endDateEl;
            var timeSlotWidth = endDateElEnd - startDateEl;
            var pixelsPerHour = (Math.round(firstHoursLiElWidth / startHourAmountHoursInDay) * hoursInProject + 'px');

            console.log('Month start: ', startDateEl);
            console.log('pixelsPerHour: ', pixelsPerHour);
            console.log('Month end: ', endDateEl);
            console.log('Day end: ', endDateEl);
            console.log('Element length: ', timeSlotWidth);

            element.css('margin-left', startDateEl);
            element.width(pixelsPerHour);
            console.log('=============================');

        });

    })();
</script>

</html>

到目前为止，我尝试将其转换为小时，但我没能成功，无论我做什么，小时数都不符合时隙。有人能帮我吗？谢谢

Answer 1

我不确定你为什么要计算变量 pixelsPerHour。根据我对您的代码的理解，变量 firstHoursLiElWidth 应该做同样的工作。在设置 element.width 时，您可以简单地将 firstHoursLiElWidth 乘以您的事件持续时间（以小时为单位），这是在 hoursInProject.

中计算的

我已经更新了你的javascript。您可以在下方查看 -

注意- 请使用有意义且不言自明的变量名称。我删除了不需要的变量并清理了 JS 代码。但请更改变量名称。

(function () {
  var firstHoursLiElWidth = $('.hours li:first').innerWidth();
  var hoursItems = 0;
  $('.hours li').each(function (index) {
    hoursItems += firstHoursLiElWidth;
  });
  $('.hours, .timeslots, .timetable_content').width(hoursItems);
  $('.timeslots li').each(function (index) {
    var element = $(this).children('span.timeslot'),
      startDate = element.data().hourStart,
      endDate = element.data().hourEnd;
    var hoursInProject = (endDate - startDate);
    var startDateEl = $(".hours li[data-hour='" + startDate + "']").offset().left - 10;
    element.css('margin-left', startDateEl);
    element.width(firstHoursLiElWidth * hoursInProject);
  });
})();

    #timetable {
        width: 100%;
        height: auto;
        max-width: 768px;
        overflow-y: hidden;
        border: 1px solid #ccc;
    }

    #timetable ul {
        padding-left: 0;
        list-style: none;
        margin: 0 0 0 0;
    }

    #timetable .timetable_content {
        width: 1024px;
    }

    .hours {
        max-height: 50px;
        overflow: hidden;
    }

    .hours li {
        width: 110px;
        text-align: center;
        float: left;
        display: inline-block;
        border-right: 1px solid #ccc;
        padding: 1em;
    }

    .timeslots li {
        border-top: 1px solid #ccc;
    }

    .timeslots .timeslot {
        background: lightblue;
        display: inline-block;
    }

    .clearfix:after {
        content: "";
        display: table;
        clear: both;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="timetable" class="clearfix">
    <div class="timetable_content">
      <ul class="hours clearfix">
        <li data-hour="00">00:00</li>
        <li data-hour="01">01:00</li>
        <li data-hour="02">02:00</li>
        <li data-hour="03">03:00</li>
        <li data-hour="04">04:00</li>
        <li data-hour="05">05:00</li>
        <li data-hour="06">06:00</li>
        <li data-hour="07">07:00</li>
        <li data-hour="08">08:00</li>
        <li data-hour="09">09:00</li>
        <li data-hour="10">10:00</li>
        <li data-hour="11">11:00</li>
        <li data-hour="12">12:00</li>
        <li data-hour="13">13:00</li>
        <li data-hour="14">14:00</li>
        <li data-hour="15">15:00</li>
        <li data-hour="16">16:00</li>
        <li data-hour="17">17:00</li>
        <li data-hour="18">18:00</li>
        <li data-hour="19">19:00</li>
        <li data-hour="20">20:00</li>
        <li data-hour="21">21:00</li>
        <li data-hour="22">22:00</li>
        <li data-hour="23">23:00</li>
        <li data-hour="00">00:00</li>
      </ul>
      <ul class="timeslots">
        <li>
          <span class="timeslot" data-hour-start="18" data-hour-end="19">BDO</span>
          <span class="button"></span>
        </li>
        <li>
          <span class="timeslot" data-hour-start="07" data-hour-end="10">BDO</span>
          <span class="button"></span>
        </li>
        <li>
          <span class="timeslot" data-hour-start="02" data-hour-end="04">BDO</span>
          <span class="button"></span>
        </li>
      </ul>
    </div>
  </div>

水平时段

Horizontal hours slots

javascript

html

jquery

css

timeline