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

How can I generate HTML code "on the fly" using a list of predefined strings?

本文关键字：生成 HTML 代码 动态 何使用 预定义 字符串 列表      更新时间：2023-09-26

我正在尝试创建一个网站，允许我定义事件列表，然后以简单的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;
相关文章：