mirror of
https://gitee.com/coder-xiaomo/algorithm-visualization
synced 2025-01-10 11:48:18 +08:00
添加导航栏
This commit is contained in:
parent
4e857942f6
commit
52ba2c7088
12
README.md
12
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/index.html](/src/index.html) | HTML | 60 | 43 | 13 | 116 |
|
||||
| [src/assets/js/index.js](/src/assets/js/index.js) | JavaScript | 161 | 76 | 29 | 266 |
|
||||
| [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 |
|
||||
|
||||
@ -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;
|
||||
|
||||
BIN
src/assets/image/logo-normal-resize-compressed.png
Normal file
BIN
src/assets/image/logo-normal-resize-compressed.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
89
src/assets/js/header.js
Normal file
89
src/assets/js/header.js
Normal file
@ -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()
|
||||
@ -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>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user