1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
| const render = function (node) {
| if (typeof node == 'string') { // 是一个文本节点
| return document.createTextNode(node);
| }
| if (node instanceof HTMLElement) {
| return node;
| }
| // eslint-disable-next-line
| return createElement(node);
| };
| /**
| * 根据标签及属性创建一个dom
| */
| const createElement = function ({
| tag,
| attrs,
| children,
| } = {}) {
| const $el = document.createElement(tag);
| // eslint-disable-next-line
| for (const [k, v] of Object.entries(attrs)) {
| $el.setAttribute(k, v);
| }
| // eslint-disable-next-line
| for (const item of children) {
| $el.appendChild(render(item));
| }
| return $el;
| };
|
| const html = createElement({
| tag: 'div',
| attrs: {
| id: 'router-loadding',
| },
| children: [
| createElement({
| tag: 'div',
| attrs: {
| class: 'loadding',
| },
| children: [],
| }),
| ],
| });
| /* eslint-disable */
| const style = createElement({
| tag: 'style',
| attrs: {
| id: 'HHYANG_style',
| },
| children: [
| `
| body{padding:0;margin:0}#router-loadding{position:fixed;width:100%;height:3px;transition:all .05s;top:0;z-index:9999999999999999;}#router-loadding .loadding{position:fixed;top:0;height:3px;background-color:#47b14b;width:0;box-shadow:0 0 15px #4CAF50;transition:all .8s;border-top-right-radius:3px;border-bottom-right-radius:3px}
| `,
| ],
| });
|
| const script = createElement({
| tag: 'script',
| attrs: {
| id: 'HHYANG_script',
| },
| children: [
| `
| var HHYANG_El=document.querySelector("#router-loadding .loadding"),HHYANG_Pel=document.querySelector("#router-loadding"),w=0,stop=null,WH=window.innerWidth,loop=function(){w=w>=WH-35?w+parseInt(5*Math.random()):w+parseInt(35*Math.random());HHYANG_El.style.cssText="width:"+w+"px";w>=WH&&clearInterval(stop)};window.startLodding=function(a){a=void 0===a?500:a;HHYANG_Pel.style.cssText="display: block;";HHYANG_El.style.cssText="transition: all 0.8s;";w=0;clearInterval(stop);stop=setInterval(function(){loop()},a)};window.stopLodding=function(a){a=void 0===a?200:a;clearInterval(stop);HHYANG_El.style.cssText="width:"+WH+"px;transition: all "+a/1E3+"s;";HHYANG_Pel.style.cssText="opacity: 0;transition: all "+a/1E3+"s;";setTimeout(function(){HHYANG_Pel.style.cssText="display: none;";HHYANG_El.style.cssText="width:0px";w=0},a)};
| `,
| ],
| });
| export const DOM = {
| style,
| html,
| script,
| };
| /* eslint-enable */
|
|
