添加导航栏

README.md

@@ -70,20 +70,20 @@ npm i webpack-dev-server -D
 
 ### 代码行数统计
 
-Date : 2022-05-18 23:02:35
+Date : 2022-05-19 00:43:17
 
-Total : 11 files,  949 codes, 355 comments, 207 blanks, all 1511 lines
+Total : 11 files,  1094 codes, 425 comments, 238 blanks, all 1757 lines
 
 | filename | language | code | comment | blank | total |
 | :--- | :--- | ---: | ---: | ---: | ---: |
-| [README.md](/README.md) | Markdown | 34 | 0 | 37 | 71 |
+| [README.md](/README.md) | Markdown | 50 | 0 | 41 | 91 |
 | [src/assets/css/index.css](/src/assets/css/index.css) | CSS | 41 | 2 | 8 | 51 |
 | [src/assets/css/svg.css](/src/assets/css/svg.css) | CSS | 7 | 1 | 2 | 10 |
-| [src/assets/js/algorithm/sort.js](/src/assets/js/algorithm/sort.js) | JavaScript | 208 | 85 | 39 | 332 |
+| [src/assets/js/algorithm/sort.js](/src/assets/js/algorithm/sort.js) | JavaScript | 291 | 153 | 58 | 502 |
 | [src/assets/js/algorithm/test.js](/src/assets/js/algorithm/test.js) | JavaScript | 53 | 15 | 5 | 73 |
 | [src/assets/js/class.js](/src/assets/js/class.js) | JavaScript | 328 | 73 | 66 | 467 |
-| [src/assets/js/index.js](/src/assets/js/index.js) | JavaScript | 159 | 75 | 28 | 262 |
+| [src/assets/js/index.js](/src/assets/js/index.js) | JavaScript | 161 | 76 | 29 | 266 |
-| [src/index.html](/src/index.html) | HTML | 60 | 43 | 13 | 116 |
+| [src/index.html](/src/index.html) | HTML | 104 | 44 | 20 | 168 |
 | [src/webpack-script.js](/src/webpack-script.js) | JavaScript | 2 | 10 | 4 | 16 |
 | [src/webpack-style.js](/src/webpack-style.js) | JavaScript | 2 | 1 | 0 | 3 |
 | [webpack.config.js](/webpack.config.js) | JavaScript | 55 | 50 | 5 | 110 |

src/assets/css/index.css

@@ -6,11 +6,44 @@ body,
   padding: 0;
 }
 
+a {
+  text-decoration: none;
+  color: rgb(28, 85, 255);
+}
+a:hover {
+  text-shadow: 0 0 2px #b9b9b9;
+}
+
 .main {
   display: grid;
   place-items: center;
 }
 
+/* 导航栏 */
+#header {
+  width: 100%;
+  height: 60px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  /* background-color: blue; */
+  box-shadow: 0 0 5px #888;
+}
+
+#header-wapper {
+  display: grid;
+  height: 100%;
+  margin: 0 6vw;
+  /* background-color: red; */
+  grid-template-columns: 300px 1fr 300px;
+}
+
+.header-logo-image {
+  height: 48px;
+  margin: auto 0;
+}
+
+/* 正文 */
 #container {
   border: 1px solid #999;
   border-radius: 5px;

src/assets/js/header.js

@@ -0,0 +1,89 @@
+function drawNavbar() {
+    function createElement(json) {
+        if (!json || json.length === 0)
+            return null
+        console.log(1)
+        var fr = document.createDocumentFragment()
+        // var elList = []
+        for (let i = 0; i < json.length; i++) {
+            const element = json[i];
+            // 创建元素
+            var el = document.createElement(element.tagName)
+            // 设置属性
+            if (element.attr) {
+                Object.keys(element.attr).forEach(attrName => {
+                    el.setAttribute(attrName, element.attr[attrName])
+                })
+            }
+            // 设置 inner HTML
+            if (element.innerHTML) {
+                el.innerHTML = element.innerHTML
+            }
+            // 创建子元素并插入
+            if (element.childNode) {
+                var childNodeElement = createElement(element.childNode)
+                el.appendChild(childNodeElement)
+            }
+
+            // 将当前元素插入父级元素
+            // elList.push(el)
+            fr.appendChild(el)
+        }
+        // 返回
+        return fr
+        // return elList
+    }
+
+    var headerDOM = document.getElementById("header")
+    var headerHTML = createElement([
+        {
+            "tagName": "div",
+            "attr": {
+                "id": "header-wapper",
+                "style": "opacity: 0; transition: 0.5s"
+            },
+            "childNode": [
+                {
+                    "tagName": "img",
+                    "attr": {
+                        "class": "header-logo-image",
+                        "src": "./assets/image/logo-normal-resize-compressed.png",
+                        "alt": "小墨算法可视化",
+                    },
+                },
+                {
+                    "tagName": "div",
+                },
+                {
+                    "tagName": "div",
+                    "attr": {
+                        "class": "header-logo-links",
+                        "style": "text-align: right;",
+                    },
+                    "childNode": [
+                        {
+                            "tagName": "a",
+                            "attr": {
+                                "style": "line-height: 60px;",
+                                "href": "https://space.bilibili.com/457109942",
+                                "target": "_blank",
+                            },
+                            "innerHTML": "B站"
+                        },
+                    ]
+                },
+            ]
+        }
+    ])
+    console.log(headerHTML)
+    if (headerDOM && headerHTML) {
+        headerDOM.appendChild(headerHTML)
+        setTimeout(function () {
+            headerDOM.querySelector("#header-wapper").style.opacity = 1
+        })
+    } else {
+        console.log("找不到 header 容器或 header 容器内容为空")
+    }
+}
+
+drawNavbar()

src/index.html

@@ -14,6 +14,7 @@
 
 <body>
     <div class="main">
+        <div id="header"></div>
         <div id="container" class="container">
             正在加载中，请稍候...
         </div>
@@ -152,6 +153,9 @@
     <script id="script-gsap" src="https://cdn.staticfile.org/gsap/3.10.4/gsap.min.js"
         local-src="./assets/lib/gsap/3.10.4/gsap.min.js" onerror="errorload(this);"></script>
 
+    <!-- 导航栏 header -->
+    <script src="./assets/js/header.js"></script>
+
     <!-- class -->
     <script id="script-class" src="./assets/js/class.js"></script>