-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
90 lines (85 loc) · 5.07 KB
/
index.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
<!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="bottom">
<div class="visualization">
<p class="t-c">算法可视化(数据来源:<a href="http://visualgo.net/">http://visualgo.net/</a>)</p>
<img src="http://123.206.204.163:2333/media/default.jpg" alt="算法可视化" class="visualImg" id="visualImg" onerror="javascript:this.src='http://123.206.204.163:2333/media/no-image.gif'">
</div>
<div class="count-time">
<p class="t-c">算法耗时</p>
<p class="tips" id="tips">正在奋力计算,请稍候!</p>
<p class="show-item">使用 <span class="sort-item" id="sortName"> </span></p>
<p class="show-item">排序/去重 <span class="sort-item" id="sortNum"> </span><span> 个数</span></p>
<p class="show-item">耗时 <span class="sort-item" id="sortTime"> </span><span> ms</span></p>
</div>
<div class="implementation">
<p class="t-c">算法实现思路</p>
<p class="algorithm-idea" id="algorithmIdea"></p>
</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>