Question

这是我在此处开始的上一个线程的后续操作。基本上，我想根据当前日期重新定位DIV，以便在过去和将来的事件之间有一个分隔符。

这是我编写的代码（不起作用）：

<script>
//FIRST, SET CURRENT DATE AS 'data-date' FOR 'timeline'
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1;
var yy=today.getFullYear().toString().substr(2, 2);

    if(dd<10) { 
        dd='0'+dd
    } 

    if(mm<10) {
        mm='0'+mm
    } 

today = yy+mm+dd;

var element = document.getElementById("timeline");
 element.setAttribute("data-date", today);

//NEXT, MOVE 'timeline'
function insertAfter(newNode, referenceNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

function moveLine() {
    var timeline = document.getElementById("timeline");
    var timelineDate = parseInt(timeline.dataset.date);
    var divs = document.getElementsByClassName('date');
    var moveTo = null;
    for (var i = 0; i < divs.length; i++) {
        if (timelineDate < parseInt(divs[i].dataset.date)) {
            moveTo = divs[i];
        } else {
            break;
        }
    }
    if (moveTo) {
        timeline.parentNode.removeChild(timeline);
        insertAfter(timeline, moveTo);
    } else {
        timeline.parentNode.removeChild(timeline);
        divs[0].parentNode.insertBefore(timeline, divs[0]);
    }
}
</script>

...还有一些示例HTML条目：

<div class="date" data-date="181112"> <!--NB. date is in YYMMDD format--!>
    <div class="text-item">
    <H5>BLAH BLAH BLAH THIS IS IN THE FUTURE</H5><BR>
    <HR class="short" align="left">
    </div>
</div>
<!-- --!>
<div class="date" data-date="180507">
    <div class="text-item">
    <H5>BLAH BLAH BLAH THIS IS IN THE PAST</H5><BR>
    <HR class="short" align="left">
    </div>
</div>
<!-- ETC --!>

因此，以下DIV应该将其自身定位在这两个条目之间，但由于某些原因而不会。相反，无论如何，它只会显示在页面顶部。

<!-----START DYNAMIC TIMELINE-----!>
<div id="timeline">
    <H4>&#8593;&#8593;&#8593;FUTURE</H4>
        <HR class="long" align="left">
    <H4>PAST&#8595;&#8595;&#8595;</H4><BR><BR>
</div>
<!-----END DYNAMIC TIMELINE-----!>

我用

<body onload="moveLine()">

运行脚本。

如果可以，请帮助我在我的网站上修复此烦人的小错误！有问题的真实页面是here。

根据日期移动DIV

0 个答案: