我正在尝试创建一个网站,允许我定义事件列表,然后以简单的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);
希望这将生成一个如下所示的网页:
前途:
6th May '16 - 活动 2
15th 八月 '16 - 事件 4
过去:
16年3月20日 - 活动1
30th 一月 '15 - 事件 3
我知道两次运行列表的效率非常低,但我们在这里不是在谈论 1000 个元素,它认为它应该没问题。两次排序是我能想到的交换放置顺序的唯一方法,如果可能的话,也许反向迭代列表也可以。
编辑:
我的问题是,我如何(a)定义这样的列表,(b)对这个列表进行排序,(c)遍历列表并插入HTML代码的相关字符串。
我可以用其他语言来生成文本文件,我只是对网络内容或 HTML(除了基本排版)或 javascript 一无所知,所以我不知道要使用什么函数或语法(甚至不知道要寻找什么)
编辑2:如果排序对于网页来说太难或计算成本太高,我可以确保列表已经按排序顺序定义,因为它们将被硬编码,那么我只需要向前迭代未来事件和向后迭代过去事件
只需将数据放在一个对象中
应该是这样的
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/
与@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;