FUTURE：

Question

我正在尝试建立一个允许我定义事件列表的网站，然后用简单的HTML显示它们，分为过去（升序）和未来（降序）。

事件列表将是元组列表，第一个元素是日期“YYYYMMDD”的代码，第二个元素是html字符串，如下所示：

event_list = [
    (20160320, "<b>20th March '16</b> - Event 1<br><br>"),
    (20160506, "<b>6th May '16</b> - Event 2<br><br>"),
    (20150130, "<b>30th January '15</b> - Event 3<br><br>"),
    (20160815, "<b>15th August '16</b> - Event 4<br><br>")
];

然后它将使用某种类似的脚本生成今天的日期代码：

now = new Date();
var today_code = now.getYear() + now.getMonth() + now.getDate();
today_code = parseInt(today_code);

为今天提供20160420的代码，例如

然后在代码中会有一个类似这样的部分（请原谅我的伪代码，我不知道javascript或HTML）：

<h1>FUTURE:</h1>
sort(event_list, event.date_code, ascending); //sort events by date (smallest first)
for event in event_list:
    if event.date_code >= today_code:
        insert(event.html_text);

<h1>PAST:</h1>
sort(event_list, event.date_code, descending); //sort events by date (largest first)    
for event in event_list:
    if event.date_code < today_code:
        insert(event.html_text);

HOPEFULLY，这将生成一个如下所示的网页：

FUTURE：

16年5月6日 - 事件2

16年8月15日 - 活动4

PAST：

16年3月20日 - 事件1

2015年1月30日 - 活动3

我知道在列表中运行两次是非常低效的，但我们不是在谈论1000个元素，它认为应该没问题。排序两次是我能想到交换放置顺序的唯一方法，我想如果可能的话，也可以在反向列表中迭代也可以工作。

修改：
我的问题，减少的是，我怎样才能（a）定义这样的列表，（b）对此列表进行排序，（c）遍历列表并插入相关的HTML代码字符串。
我可以用其他语言来生成文本文件，我只是对Web内容或HTML（超出基本排版）或javascript一无所知，所以我不知道使用什么函数或语法（甚至该寻找什么）

编辑2： 如果网页的排序太难或计算成本太高，我可以确保列表已按排序顺序定义，因为它们将被硬编码，然后我只需要为未来事件向前迭代以及向后迭代过去的事件

Answer 1

将数据放入对象

应该是这样的

var event_list = {};

event_list["20160320"]  = "<b>20th March '16</b> - Event 1<br><br>";
event_list["20160506"]  = "<b>6th May '16</b> - Event 2<br><br>";
event_list["20150130"]  = "<b>30th January '15</b> - Event 3<br><br>";
event_list["20160815"]  = "<b>15th August '16</b> - Event 4<br><br>";

var date_codes = Object.keys(event_list);

var date = new Date();
var  today_code = parseInt(date.getFullYear() + ("0" + (date.getMonth() + 1)).slice(-2) + ("0" + date.getDate()).slice(-2));



date_codes.sort();

for(i in date_codes){
   if(parseInt([date_codes[i]]) >= today_code){
      document.getElementById("future_event").innerHTML += event_list[date_codes[i]];
   }
}

date_codes.reverse();

for(i in date_codes){
   if(parseInt([date_codes[i]]) < today_code){
      document.getElementById("past_event").innerHTML += event_list[date_codes[i]];
   }
}

见https://jsfiddle.net/0v0rmzx4/1/

Answer 2

与@EricSo相同，但改进了HTML分配：

var event_list = {};
event_list["20160320"]  = "<b>20th March '16</b> - Event 1<br><br>";
event_list["20160506"]  = "<b>6th May '16</b> - Event 2<br><br>";
event_list["20150130"]  = "<b>30th January '15</b> - Event 3<br><br>";
event_list["20160815"]  = "<b>15th August '16</b> - Event 4<br><br>";

var date_codes = Object.keys(event_list).sort();    
var date = new Date();
var today_code = parseInt(date.getFullYear() + ("0" + (date.getMonth() + 1)).slice(-2) + ("0" + date.getDate()).slice(-2));

var futureEvents = "", pastEvents = "";
for(i in date_codes){
    if(parseInt([date_codes[i]]) >= today_code){
        futureEvents = futureEvents + event_list[date_codes[i]];
    } else {
        pastEvents = event_list[date_codes[i]] + pastEvents;
    }
}

document.getElementById("future_event").innerHTML += futureEvents;
document.getElementById("past_event").innerHTML += pastEvents;

如何使用预定义字符串列表“动态”生成HTML代码？

FUTURE：

PAST：

2 个答案: