历史上的今天第一次提交

Vogadero · Apr 27, 2022 · dcd8920 · dcd8920
commit dcd8920
Show file tree

Hide file tree

Showing 21 changed files with 769 additions and 0 deletions.
diff --git a/01.jpeg b/01.jpeg
diff --git a/README.md b/README.md
@@ -0,0 +1,118 @@
+[![](https://img.shields.io/badge/[email protected]?style=plastic)](https://github.com/Vogadero/todayInHistory)
+![](https://img.shields.io/badge/language-Jquery-yellow.svg?style=plastic)
+![](https://img.shields.io/badge/language-JavaScript-orange.svg?style=plastic)
+![](https://img.shields.io/badge/language-Html-9cf.svg?style=plastic)
+![](https://img.shields.io/badge/language-Css-blueviolet.svg?style=plastic)
+![](https://img.shields.io/npm/l/express?style=plastic)
+
+# 项目简介🚩
+
+- 历史上的今天
+- 演示地址：https://vogadero.github.io/todayInHistory/
+
+## 1. 功能模块🎨
+
+#### 1.1 首页🛫
+
+| 功能                   |
+| ---------------------- |
+| 展示历史上的今天大事件 |
+| 查询当前事件的百度百科 |
+| 显示当前设备的信息     |
+
+## 2. 截图⭐
+
+![](01.jpeg)
+
+## 3. 项目架构🍽️
+
+| 系统分层 | 使用技术                    |
+| -------- | --------------------------- |
+| 客户端   | Art-template、jQuery、layui |
+
+## 4. 项目运行环境搭建🌈
+
+- 克隆远端数据仓库到本地：`git clone 仓库地址`
+- 拉取远程仓库中最新的版本：`git pull 远程仓库地址 分支名称`
+- 双击index.html
+
+# 功能介绍🦷
+
+## 🕵️‍♀️历史上的今天
+
+- 展示内容：历史上的今天大事件
+
+- API
+
+  - 地址：https://query.asilu.com/today/list
+
+  - 方式：GET
+
+  - 参数类型：jsonp
+
+
+
+
+## :card_index:**查询**
+
+- 展示内容：当前事件的百度百科
+
+- API
+
+  - 地址：https://query.asilu.com/today/list
+
+  - 方式：GET
+
+  - 参数类型：jsonp
+
+
+
+
+## :woman_technologist:**设备信息**
+
+- 展示内容：当前设备的基础信息
+
+- API
+
+  - 地址：https://api.asilu.com/user-agent/
+  - 方式：GET
+  - 参数类型：jsonp
+
+
+
+# Tree🌵    
+
+```
+历史上的今天
+├─ 01.jpeg
+├─ index.html
+├─ js
+│  ├─ jquery-3.6.0.min.js
+│  └─ template-web.js
+├─ layui-v2.6.8
+│  └─ layui
+│     ├─ css
+│     │  ├─ layui.css
+│     │  └─ modules
+│     │     ├─ code.css
+│     │     ├─ laydate
+│     │     │  └─ default
+│     │     │     └─ laydate.css
+│     │     └─ layer
+│     │        └─ default
+│     │           ├─ icon-ext.png
+│     │           ├─ icon.png
+│     │           ├─ layer.css
+│     │           ├─ loading-0.gif
+│     │           ├─ loading-1.gif
+│     │           └─ loading-2.gif
+│     ├─ font
+│     │  ├─ iconfont.eot
+│     │  ├─ iconfont.svg
+│     │  ├─ iconfont.ttf
+│     │  ├─ iconfont.woff
+│     │  └─ iconfont.woff2
+│     └─ layui.js
+├─ README.md
+└─ 时间.ico
+```
diff --git a/index.html b/index.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>历史上的今天</title>
+    <meta name="renderer" content="webkit">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <link rel="shortcut icon" href="时间.ico" type="image/x-icon">
+    <link rel="stylesheet" href="layui-v2.6.8/layui/css/layui.css">
+    <script src="js/jquery-3.6.0.min.js"></script>
+</head>
+
+<body>
+    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
+        <legend class="layui-bg-cyan">历史上的今天</legend>
+    </fieldset>
+    <!-- 历史容器 -->
+    <ul class="layui-timeline" id="history-box">
+    </ul>
+    <!-- 设备容器 -->
+    <fieldset class="layui-elem-field layui-field-title" style="margin:20px;">
+        <legend style="text-align: center;">设备信息</legend>
+    </fieldset>
+    <span class="layui-breadcrumb" id="user-agent" style="text-align: center;display: block;"></span>
+
+    <script src="layui-v2.6.8/layui/layui.js"></script>
+    <!-- 引入template-web模版库文件 -->
+    <script src="js/template-web.js"></script>
+    <!-- 模版内容 -->
+    <script type="text/html" id="history-tpl">
+        {{each info}}
+        <li class="layui-timeline-item">
+            <i class="layui-icon layui-icon-flag" style="font-size: 20px; color: #5FB878;"></i>
+            <div class="layui-timeline-content layui-text">
+                <h3 class="layui-timeline-title">{{$value.year}}年 {{data.month}}月{{data.day}}日</h3>
+                <p>
+                    {{$value.title}}<a href={{$value.link}} title="百度百科" style="text-decoration: none;"><i
+                            class="layui-icon layui-icon-search"
+                            style="margin-left: 4px; font-size: 30px; color: #1E9FFF; vertical-align: baseline;"></i></a>
+                </p>
+            </div>
+        </li>
+        {{/each}}
+    </script>
+    <script type="text/html" id="ua-tpl">
+        <a href={{info.platform.link}} style="font-size: 20px;">{{info.platform.title}} <i
+                class="layui-icon layui-icon-windows" style="font-size: 30px; color: #ff0080;"></i></a><i
+            class="layui-icon layui-icon-subtraction"></i></a>
+        <a href={{info.browser.link}} style="font-size: 20px;">{{info.browser.title}} <i
+                class="layui-icon layui-icon-android" style="font-size: 30px; color: #667eea;"></i></a>
+    </script>
+    <script type="text/javascript">
+        var historyBox = document.getElementById("history-box");
+        var userAgentBox = document.getElementById("user-agent");
+        $.ajax({
+            type: "get",
+            url: "https://query.asilu.com/today/list",
+            dataType: "jsonp",
+            success: function (data) {
+                var html = template("history-tpl", {
+                    info: data.data,
+                    data: data
+                });
+                historyBox.innerHTML = html;
+            }
+        });
+        $.ajax({
+            type: "get",
+            url: "https://api.asilu.com/user-agent/",
+            dataType: "jsonp",
+            success: function (data) {
+                var html = template("ua-tpl", {
+                    info: data
+                });
+                userAgentBox.innerHTML = html;
+            }
+        })
+    </script>
+</body>
+
+</html>
diff --git a/js/jquery-3.6.0.min.js b/js/jquery-3.6.0.min.js
diff --git a/js/template-web.js b/js/template-web.js
diff --git a/layui-v2.6.8/layui/css/layui.css b/layui-v2.6.8/layui/css/layui.css
diff --git a/layui-v2.6.8/layui/css/modules/code.css b/layui-v2.6.8/layui/css/modules/code.css
diff --git a/layui-v2.6.8/layui/css/modules/laydate/default/laydate.css b/layui-v2.6.8/layui/css/modules/laydate/default/laydate.css
diff --git a/layui-v2.6.8/layui/css/modules/layer/default/icon-ext.png b/layui-v2.6.8/layui/css/modules/layer/default/icon-ext.png
diff --git a/layui-v2.6.8/layui/css/modules/layer/default/icon.png b/layui-v2.6.8/layui/css/modules/layer/default/icon.png