javascript - 根据数字类名称定位 div

Question

我有一系列事件需要根据类(class)中的日期 (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 和 2017-05-24 之间的距离更小。

Answer 1

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

html 由带有 height 和 position:relative 的 wrapper 改进

<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();

fiddle 包含一些通过红线可视化事件的样式。