-
Notifications
You must be signed in to change notification settings - Fork 4
/
index2.html
138 lines (129 loc) · 8.22 KB
/
index2.html
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端基础算法</title>
<link href="https://cdn.bootcss.com/material-design-lite/1.3.0/material.indigo-pink.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/algorithm.css">
</head>
<body>
<!--<div class="main clearfix">-->
<!--<!–<div class="init-arr clearfix">–>-->
<!--<!–<p class="t-c">原始数组</p>–>-->
<!--<!–<button–>-->
<!--<!–class="btn-creat-arr mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" id="randomArr1">–>-->
<!--<!–长度20–>-->
<!--<!–</button>–>-->
<!--<!–<button–>-->
<!--<!–class="btn-creat-arr mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" id="randomArr2">–>-->
<!--<!–长度5000–>-->
<!--<!–</button>–>-->
<!--<!–<button–>-->
<!--<!–class="btn-creat-arr mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" id="randomArr3">–>-->
<!--<!–长度10000–>-->
<!--<!–</button>–>-->
<!--<!–<button–>-->
<!--<!–class="btn-creat-arr mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" id="randomArr4">–>-->
<!--<!–长度50000–>-->
<!--<!–</button>–>-->
<!--<!–<!–<input type="button" value="长度20" class="btn-creat-arr" id="randomArr1">–>–>-->
<!--<!–<!–<input type="button" value="长度5000" class="btn-creat-arr" id="randomArr2">–>–>-->
<!--<!–<!–<input type="button" value="长度10000" class="btn-creat-arr" id="randomArr3">–>–>-->
<!--<!–<!–<input type="button" value="长度50000(慎点!)" class="btn-creat-arr btn-creat-arr-last" id="randomArr4">–>–>-->
<!--<!–<p class="t-c" id="initArr">点击上方按钮生成随机数组,再进行排序/去重!</p>–>-->
<!--<!–</div>–>-->
<!--<!–<div class="btn-group clearfix btn-group-menu">–>-->
<!--<!–<div class="menu-switch-box">–>-->
<!--<!–<input type="button" value="排序" class="menu-switch-btn" id="sortBtn">–>-->
<!--<!–<input type="button" value="去重" class="menu-switch-btn" id="distinctBtn">–>-->
<!--<!–</div>–>-->
<!--<!–<div class="sort-content" id="sortContent">–>-->
<!--<!–<input type="button" value="Bubble Sort(冒泡排序)" class="btn" id="btn1">–>-->
<!--<!–<input type="button" value="Bubble Sort(冒泡排序[flag])" class="btn" id="btn14">–>-->
<!--<!–<input type="button" value="Quick Sort(快速排序)" class="btn" id="btn6">–>-->
<!--<!–<input type="button" value="Selection Sort(选择排序)" class="btn" id="btn2">–>-->
<!--<!–<input type="button" value="Insertion Sort(插入排序)" class="btn" id="btn3">–>-->
<!--<!–<input type="button" value="Shell Sort(希尔排序)" class="btn" id="btn4">–>-->
<!--<!–<input type="button" value="Merge Sort(归并排序)" class="btn" id="btn5">–>-->
<!--<!–<input type="button" value="Heap Sort(堆排序)" class="btn" id="btn7">–>-->
<!--<!–<input type="button" value="Counting Sort(基数排序)" class="btn" id="btn8">–>-->
<!--<!–<input type="button" value="Bucket Sort(桶排序)" class="btn" id="btn9">–>-->
<!--<!–<input type="button" value="Radix Sort(基数排序)" class="btn" id="btn10">–>-->
<!--<!–</div>–>-->
<!--<!–<div class="distinct-content" id="distinctContent">–>-->
<!--<!–<input type="button" value="Array Distinct(临时数组)" class="btn" id="btn11">–>-->
<!--<!–<input type="button" value="Array Distinct(HashMap)" class="btn" id="btn12">–>-->
<!--<!–<input type="button" value="Array Distinct(IndexOf)" class="btn" id="btn13">–>-->
<!--<!–</div>–>-->
<!--<!–</div>–>-->
<!--<!–<div class="show-result clearfix">–>-->
<!--<!–<p class="t-c">排序/去重后数组</p>–>-->
<!--<!–<p id="result"></p>–>-->
<!--<!–</div>–>-->
<!--</div>-->
<div class="mdl-grid" style="height: 100%;">
<div class="mdl-cell mdl-cell--5-col">
<div class="mdl-cell mdl-cell--12-col" style="height: 5%; margin-top: 0; background-color: #f1f6f9a6">
<div>
<button
class="btn-creat-arr mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" id="randomArr1">
长度20
</button>
<button
class="btn-creat-arr mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" id="randomArr2">
长度5000
</button>
<button
class="btn-creat-arr mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" id="randomArr3">
长度10000
</button>
<button
class="btn-creat-arr mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" id="randomArr4">
长度50000
</button>
</div>
</div>
<div class="mdl-cell mdl-cell--12-col" style="height: 52%; margin-top: 0; background-color: #f1f6f9a6">
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="mdl-tabs__tab-bar" style="background-color: #90b6dddb; height: 30px;">
<a href="#starks-panel" class="mdl-tabs__tab is-active">
原始数据</a>
<a href="#lannisters-panel" class="mdl-tabs__tab">结果数据</a>
</div>
<div class="mdl-tabs__panel is-active" id="starks-panel">
<ul>
<li>Eddard</li>
<li>Catelyn</li>
<li>Robb</li>
<li>Sansa</li>
<li>Brandon</li>
<li>Arya</li>
<li>Rickon</li>
</ul>
</div>
<div class="mdl-tabs__panel" id="lannisters-panel">
<ul>
<li>Tywin</li>
<li>Cersei</li>
<li>Jamie</li>
<li>Tyrion</li>
</ul>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--12-col" style="height:41%; background-color: #f1f6f9a6">
<div class="box-header">可视化</div>
</div>
</div>
<div class="mdl-cell mdl-cell--2-col" style="background-color: #f1f6f9a6">
<div class="box-header">操作</div>
</div>
<div class="mdl-cell mdl-cell--5-col" style="background-color: #f1f6f9a6">
<div class="box-header">思路</div>
</div>
<!--</div>-->
<script src="https://cdn.bootcss.com/material-design-lite/1.3.0/material.min.js"></script>
<script src="js/algorithm-idea.js"></script>
<script type="text/javascript" src="js/algorithm.js"></script>
</body>
</html>