https://lingyuzhao.top/js/listBlock.js

1// 添加的数量标记 以及 当前行元素标记
2let count = 0
3
4/**
5 * 初始化动态数据追加函数
6 * @param e 元素容器
7 * @param json {
8 *     {
9 *         id, title, sendDate, sendId, visibility, dataFSPath, imagesSrc, description, ip
10 *     }
11 * }
12 * @param fun 点击此数据之后的回调函数 (动态的id) => void
13 * @param containAuthor 是否包含作者信息 如果不包含就只展示文章的标题
14 */
15function append_data_listBlock(e = document.getElementsByClassName("container")[0], json, fun = undefined, containAuthor = true) {
16
17    // 开始进行元素构建和追加
18    const td = document.createElement("td");
19    td.className = 'container_td';
20    const a = document.createElement("a");
21    a.className = 'container_a';
22    a.href = '#';
23    if (fun !== undefined) {
24        a.addEventListener("click", () => fun(json.id));
25    }
26    // 查看第一个图是否是一个图像
27    const FM = json.imagesSrc[0];
28    const split = FM.split('.');
29    const isVid = split.length > 1 && isVideoName(split[split.length - 1]);
30    const img = document.createElement(isVid ? "video" : "img");
31    img.className = 'data_image_img_publicize';
32    img.src = FM;
33    img.title = json.title;
34    img.loading = 'lazy';
35    imgErrorFun(img);
36    a.appendChild(img);
37    const h3 = document.createElement("h3");
38    h3.className = 'data_title_h';
39    h3.innerText = json.title;
40    a.appendChild(h3);
41    const area_span = document.createElement("span");
42    area_span.innerText = " " + json.ip
43    area_span.className = "area_span";
44    area_span.href = 'https://www.baidu.com/s?ie=UTF-8&wd=' + json.ip;
45    if (containAuthor) {
46        const img2 = document.createElement("img");
47        img2.className = 'headSculpture';
48        img2.alt = '头像';
49        imgErrorFun(img2, 'image/logo.svg');
50        getUserConfById(json.sendId).then(
51            (res) => {
52                let userName;
53                if (res.tempName === undefined) {
54                    userName = ":" + json.sendId + ":";
55                } else {
56                    userName = res.tempName[1];
57                }
58                img2.src = res.headSculpture[1];
59                a.appendChild(img2);
60                const span = document.createElement("span");
61                span.className = 'headSculpture_span';
62                span.innerText = userName;
63                a.appendChild(span);
64                const div2 = document.createElement("div");
65                div2.className = 'data_create_date';
66                const dateStr = timeDifference(json['sendDateMs'], -1);
67                div2.innerText = json.sendDate + (dateStr === '' ? '' : `【${dateStr}前】`);
68                a.appendChild(div2);
69                const pre = document.createElement("pre");
70                pre.innerText = json.description;
71                a.appendChild(pre);
72                a.appendChild(area_span);
73            }
74        )
75    } else {
76        a.appendChild(area_span);
77    }
78    td.appendChild(a);
79    e.appendChild(td);
80}
81
82/**
83 * 添加一个文本块
84 * @param e 需要被添加的容器元素
85 * @param textData 文本块中的文本数据
86 * @param blockColor 文本块的颜色
87 * @param fun 点击之后的函数 如果没有可以不进行设置
88 * @param subE 子标签元素 也就是文本数据标签的子标签 默认为 undefined 代表没有子元素 如果需要设置在这里再进行设置
89 * @param subForward 代表的就是字元素标签的位置，如果此值为 true 则代表子元素标签将会被添加到最前面 默认为 false 代表子元素标签将会被添加到最后
90 * @param textStyle 文本块的样式 我们允许外界设置文本样式
91 */
92function addTextBlock(e, textData, blockColor, fun = undefined, subE = undefined, subForward = false, textStyle = {}) {
93    // 设置动态追加数据行的 json
94    const a = document.createElement("a");
95    if (subForward && subE !== undefined) {
96        a.appendChild(subE);
97    }
98    // 使用文本节点而不是 innerText 来避免移除已有子节点
99    const textNode = document.createElement("span");
100    textNode.innerText = textData;
101    textNode.style.color = 'inherit';
102    for (const key in textStyle) {
103        textNode.style[key] = textStyle[key];
104    }
105    a.appendChild(textNode); // 再添加文本
106    a.className = 'container_a topicName_a';
107    a.style.display = 'inline-block';
108    a.style.width = '100%';
109    a.style.height = '100%';
110    a.href = '#';
111    a.style.fontFamily = '"Arial Black", sans-serif, serif';
112    a.style.textAlign = 'center';
113    a.style.color = invertColor(blockColor);
114    a.style.fontFamily = 'inherit';
115    if (!subForward && subE !== undefined) {
116        a.appendChild(subE);
117    }
118    const td = document.createElement("td");
119    td.className = 'container_td';
120    td.style.background = blockColor;
121    if (fun !== undefined) {
122        td.onclick = fun
123    }
124    td.appendChild(a)
125    return td;
126}