Question

我有一系列事件需要在页面中垂直向下绘制与课程中的日期相关的事项（YYYY-MM-DD）。

<div class="event 1990-03-18"></div>
<div class="event 2015-10-30"></div>
<div class="event 2016-08-03"></div>
<div class="event 2017-05-20"></div>
<div class="event 2017-05-24"></div>

最早的日期将完全位于页面顶部。下一个连续日期将出现在最早的日期之下，但与时差相关。因此，这些事件之间的距离会更大：1990-03-18和2015-10-30。和2017-05-20之间的距离较小。

Answer 1

一种可能的JavaScript解决方案https://jsfiddle.net/stzanr1s/4/

由height和position:relative

包装的

html

<div class="wrapper">
  <div class="event 1990-03-18"></div>
  <div class="event 2008-10-30"></div>
  <div class="event 2016-08-03"></div>
  <div class="event 2017-05-20"></div>
  <div class="event 2017-05-24"></div>
</div>

和脚本，用于查找所有项目的最小值，最大值和计数相对位置。

maxDate = new Date(0);
minDate = new Date(0);
var events = document.querySelectorAll(".event");

function getDate(event) {
    var clases = event.className.split(" ");
    for (var i = 0; i < clases.length; i++) {
    if (clases[i] != "event") {
        return new Date(Date.parse(clases[i]));
    }
}

function findMinMax() {
    minDate = getDate(events[0]);
    maxDate = getDate(events[0]);
    for (var i = 1; i < events.length; i++) {
        var d = getDate(events[i]);
        if (d.getTime() < minDate.getTime()) {
            minDate = d;
        }
        if (d.getTime() > maxDate.getTime()) {
            maxDate = d;
        }
    }
}

function setPositions() {
    findMinMax();
    var range = maxDate.getTime() - minDate.getTime();
    for (var i = 0; i < events.length; i++) {
        var d = getDate(events[i]);
        events[i].style.top = + ((d.getTime() - minDate.getTime()) * 100 / range) + "%";
    }
}

setPositions();

小提琴包含一些用红线可视化事件的风格。

根据数字类名称定位div

1 个答案: