https://diskmirror.lingyuzhao.top/30/Binary/Article_Files_CY-Web/js/CY_Utils.js

1class CY_Utils {
2
3    // index 代表的是 第几种布局方案
4    // v 代表的是 当前方案包含几个子元素
5    static json = [1, 2, 2, 3]
6
7    static row_index = 0;
8
9    /**
10     * 设置布局方案
11     * @param newJson{[number]} 布局方案向量
12     */
13    static setJsonLayer(newJson) {
14        this.json = newJson;
15    }
16
17    /**
18     * 时间转换工具类
19     * @param n 需要被转换的时间的毫秒值
20     * @return {string} 转换之后的时间戳数值
21     */
22    static getDate(n) {
23        if (n instanceof Date) {
24            let y = n.getFullYear(),
25                m = n.getMonth() + 1,
26                d = n.getDate();
27            return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " " + n.toTimeString().substr(0, 8);
28        }
29        let now = new Date(n),
30            y = now.getFullYear(),
31            m = now.getMonth() + 1,
32            d = now.getDate();
33        return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " " + now.toTimeString().substr(0, 8);
34    }
35
36
37    /**
38     * 检查当前用户是否正在使用移动设备进行浏览
39     * @return {boolean} 如果是使用的移动设备 在这里会返回 true
40     */
41    static isMobileDevice() {
42        const userAgent = navigator.userAgent || navigator.vendor || window.opera;
43
44        // 对于iPad，这可能会与桌面版Safari的用户代理字符串混淆，所以需要先检查
45        if (/iPad|Macintosh/.test(userAgent) && 'ontouchend' in document) {
46            return true;
47        }
48
49        // 检查是否为移动设备
50        return /Mobi|Android/i.test(userAgent);
51    }
52
53    /**
54     * 初始化页面中的数据
55     * @param targetParentElement
56     * @param dataList {[{id:number, imagesSrc, title, description, sendDate:number, ip,dataFSPath}]}
57     */
58    static init_date(targetParentElement, dataList) {
59        let htmlDivElement = document.createElement("div");
60        let i = 0;
61        // 计算出当前行需要多少个子元素
62        while (i < dataList.length) {
63            let now_row_count = 0;
64            const number = this.json[this.row_index];
65            // 为当前行填充元素
66            while (++now_row_count <= number && i < dataList.length) {
67                let data = dataList[i];
68                CY_Utils.add_item(htmlDivElement, "url('" + data.imagesSrc[0] + "') no-repeat center", data.title, data.description, CY_Utils.getDate(data.sendDate), data.ip, () => window.open("ArticleReading.html?path=" + data.dataFSPath), (i - (i >> 1 << 1)) + 1);
69                i++;
70            }
71            // 填充完毕就准备下一行
72            htmlDivElement.classList.add('container')
73            targetParentElement.appendChild(htmlDivElement);
74            htmlDivElement = document.createElement("div");
75            if (++this.row_index === this.json.length) {
76                this.row_index = 0;
77            }
78        }
79        htmlDivElement.classList.add('container')
80        targetParentElement.appendChild(htmlDivElement);
81    }
82
83    /**
84     * 追加一个子元素
85     * @param targetParentElement
86     * @param backImage
87     * @param titleName
88     * @param descriptionData
89     * @param createDate
90     * @param locationData
91     * @param onClick
92     * @param type {1|2}两种类型的样式稍微有些不同
93     */
94    static add_item(targetParentElement,
95                    backImage = "url('image/bigImage.jpg') no-repeat center",
96                    titleName = "标题",
97                    descriptionData = "这里是介绍！这里是介绍！这里是介绍！这里是介绍！这里是介绍！这里是介绍！这里是介绍！这里是介绍！这里是介绍！这里是介绍！这里是介绍！这里是介绍！这里是介绍！这里是介绍！",
98                    createDate = "2024-04-04", locationData = "太阳系", onClick = () => {
99        }, type = 1
100    ) {
101        // 创建一个新 div 元素
102        const newItem = document.createElement("div");
103
104        // 设置类名
105        newItem.className = "item item_" + type + " move-from-sides_X_" + type + "_e";
106
107        newItem.addEventListener("click", onClick)
108
109
110        // 创建内部 .item_article 元素并设置背景样式
111        const itemArticle = document.createElement("div");
112        itemArticle.className = "item_article";
113        itemArticle.style.background = backImage;
114
115        // 创建一个新 div 元素
116        const newItem0 = document.createElement("div");
117
118
119        // 创建内部 h1 元素并设置文本内容
120        const title = document.createElement("h1");
121        title.textContent = titleName;
122
123        // 创建内部 p 元素并设置文本内容
124        const description = document.createElement("p");
125        description.textContent = descriptionData;
126
127        // 创建内部日期和地点 span 元素并设置文本内容
128        const date = document.createElement("span");
129        date.textContent = createDate;
130
131        const location = document.createElement("span");
132        location.textContent = " " + locationData;
133
134        // 创建包裹日期和地点的 div 元素
135        const infoWrapper = document.createElement("div");
136        infoWrapper.appendChild(date);
137        infoWrapper.appendChild(location);
138
139        // 将 h1、p 和 infoWrapper 添加到最内层 div 中
140        const innerDiv = document.createElement("div");
141        innerDiv.appendChild(title);
142        innerDiv.appendChild(description);
143        innerDiv.appendChild(infoWrapper);
144
145        // 将 innerDiv 添加到 itemArticle 中
146        itemArticle.appendChild(newItem0);
147        newItem0.appendChild(innerDiv);
148
149        // 将 itemArticle 添加到新建的 item 元素中
150        newItem.appendChild(itemArticle);
151
152        // 将新建的 item 元素追加到目标父元素中
153        targetParentElement.appendChild(newItem);
154    }
155
156    /**
157     * 搜索URL中的指定的参数
158     * @return 搜索到的同名参数组合的 list
159     */
160    static search_Params(paramName) {
161        // 创建一个 URLSearchParams 对象
162        const params = new URLSearchParams(window.location.search);
163        // 获取名为 "paramName" 的参数值
164        const paramValues = params.getAll(paramName);
165        // 将参数值封装为列表
166        return Array.from(paramValues);
167    }
168
169}