基於數字類名稱的位置div

我有一系列事件需要垂直繪製在頁面上，與類中的日期相關（YYYY-MM-DD）。基於數字類名稱的位置div

<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之間的距離較小。

來源

2017-05-25 user2215732

嗨！你試過什麼了？請告訴我們你是如何處理這個問題的，以及你被困在哪裏。 –

您是否使用PHP從包含這些日期的數據生成了這些div？如果是這樣，你可以包含該代碼嗎？ –

這是我會用類來解決的。我寧願在php中計算相對或絕對位置，並將其設置爲'@ style'。但是，請告訴我們你的代碼。 –

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

HTML通過包裝imporved與height和position:relative

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

小提琴包含一些可視化紅線事件的風格。

來源

2017-05-25 16:41:16 Misaz

謝謝！這完全符合我的需求。 – user2215732

基於數字類名稱的位置div

回答

相關問題