├── README.md
├── WEB-INF
    ├── html
    │   └── test.html
    ├── lib
    │   ├── spring-aop-4.1.1.RELEASE.jar
    │   ├── spring-aspects-4.1.1.RELEASE.jar
    │   ├── spring-beans-4.1.1.RELEASE.jar
    │   ├── spring-context-4.1.1.RELEASE.jar
    │   ├── spring-context-support-4.1.1.RELEASE.jar
    │   ├── spring-core-4.1.1.RELEASE.jar
    │   ├── spring-expression-4.1.1.RELEASE.jar
    │   ├── spring-framework-bom-4.0.6.RELEASE.jar
    │   ├── spring-instrument-4.1.1.RELEASE.jar
    │   ├── spring-instrument-tomcat-4.1.1.RELEASE.jar
    │   ├── spring-jdbc-4.1.1.RELEASE.jar
    │   ├── spring-jms-4.1.1.RELEASE.jar
    │   ├── spring-messaging-4.1.1.RELEASE.jar
    │   ├── spring-orm-4.1.1.RELEASE.jar
    │   ├── spring-oxm-4.1.1.RELEASE.jar
    │   ├── spring-test-4.1.1.RELEASE.jar
    │   ├── spring-tx-4.1.1.RELEASE.jar
    │   ├── spring-web-4.1.1.RELEASE.jar
    │   ├── spring-webmvc-4.1.1.RELEASE.jar
    │   ├── spring-webmvc-portlet-4.1.1.RELEASE.jar
    │   └── spring-websocket-4.1.1.RELEASE.jar
    ├── problems.txt
    ├── test.html
    └── web.xml
├── bootstrap
    ├── config.json
    ├── css
    │   ├── bootstrap-docs.css
    │   ├── bootstrap-responsive.css
    │   ├── bootstrap-theme.css
    │   ├── bootstrap-theme.min.css
    │   ├── bootstrap.css
    │   ├── bootstrap.min.css
    │   ├── buttons.css
    │   ├── prettify.css
    │   └── theme.css
    ├── fonts
    │   ├── glyphicons-halflings-regular.eot
    │   ├── glyphicons-halflings-regular.svg
    │   ├── glyphicons-halflings-regular.ttf
    │   └── glyphicons-halflings-regular.woff
    ├── img
    │   ├── glyphicons-halflings-white.png
    │   └── glyphicons-halflings.png
    └── js
    │   ├── affix.js
    │   ├── alert.js
    │   ├── application.js
    │   ├── bootstrap.js
    │   ├── bootstrap.min.js
    │   ├── button.js
    │   ├── carousel.js
    │   ├── collapse.js
    │   ├── customizer.js
    │   ├── dropdown.js
    │   ├── filesaver.js
    │   ├── google-code-prettify
    │       └── prettify.js
    │   ├── holder.js
    │   ├── ie8-responsive-file-warning.js
    │   ├── jszip.js
    │   ├── less.js
    │   ├── modal.js
    │   ├── popover.js
    │   ├── raw-files.js
    │   ├── scrollspy.js
    │   ├── tab.js
    │   ├── tooltip.js
    │   ├── transition.js
    │   └── uglify.js
├── css
    ├── graph.css
    ├── graph_old.css
    ├── index.css
    ├── sort.css
    ├── string.css
    └── tree.css
├── favicon.ico
├── graph
    ├── dijkstra.html
    ├── floyd.html
    ├── graphBFSTraverse.html
    ├── graphDFSTraverse.html
    ├── kruskal.html
    └── prim.html
├── image
    ├── arrow_black_right.png
    ├── arrow_white_right.png
    ├── logo.png
    ├── logo_old.png
    ├── main_page.png
    ├── 二叉树.jpg
    ├── 图.jpg
    ├── 字符串.jpg
    ├── 排序.jpg
    └── 线性表.jpg
├── index.html
├── index.js
├── jquery.js
├── js
    ├── AVLTree.js
    ├── Algorithm.js
    ├── AnimatedCircle.js
    ├── AnimatedHighlightCircle.js
    ├── AnimatedHighlightRectangle.js
    ├── AnimatedLabel.js
    ├── AnimatedLine.js
    ├── AnimatedObject.js
    ├── AnimatedPointer.js
    ├── AnimatedRectangle.js
    ├── AnimationManager.js
    ├── BFS.js
    ├── BT2T.js
    ├── BinarySearch.js
    ├── BinarySearchTree.js
    ├── CompareSort.js
    ├── CompareSort_old.js
    ├── DFS.js
    ├── Dijkstra.js
    ├── Factorial.js
    ├── Floyd.js
    ├── Forest.js
    ├── Graph.js
    ├── Heap.js
    ├── HeapSort.js
    ├── Huffman.js
    ├── Kruskal.js
    ├── LinearSearch.js
    ├── LinkedList.js
    ├── LinkedQueue.js
    ├── ObjectManager.js
    ├── OrderList.js
    ├── PatternMatch.js
    ├── Prim.js
    ├── Queue.js
    ├── RadixSort.js
    ├── Search.js
    ├── SingleAnimation.js
    ├── Slider.js
    ├── Stack.js
    ├── StateBox.js
    └── ThrdBTree.js
├── list
    ├── factorial.html
    ├── linearList.html
    ├── linkedQueue.html
    ├── queueList.html
    ├── singleList.html
    └── stackList.html
├── page
    └── test.html
├── sort
    ├── compareSort.html
    ├── heapSort.html
    └── radixSort.html
├── string
    ├── patternMatch.html
    ├── search.html
    └── stringMatch.html
└── tree
    ├── BST.html
    ├── BT2T.html
    ├── HuffmanTree.html
    ├── avlTree.html
    ├── heap.html
    └── thrdBtree.html


/README.md:
--------------------------------------------------------------------------------
 1 | # 大连理工大学软件学院数据结构算法可视化演示平台
 2 | 
 3 | ---
 4 | 
 5 | ## 项目主页如下图：
 6 | 
 7 | <img width="100%" height="100%" src="https://github.com/kinlog/visualgo/blob/gh-pages/image/main_page.png">
 8 | 
 9 | ## 项目链接如下：
10 | 
11 | [数据结构算法演示平台](http://kinlog.github.io/visualgo/index.html)
12 | 
13 | ## 演示功能算法
14 | 
15 | - 线性表
16 |   + 顺序表
17 |   + 单链表
18 |   + 栈
19 |   + 队列
20 |   + 阶乘
21 |   + 链式队列
22 | - 树
23 |   + 二叉树
24 |   + 堆
25 |   + 霍夫曼树
26 |   + AVL树
27 |   + 二叉树转森林
28 |   + 线索树
29 | - 图
30 |   + DFS广度遍历
31 |   + BFD深度遍历
32 |   + Prim最小生成树
33 |   + Kruskal最小生成树
34 |   + Dijkstra最短路径
35 | - 排序
36 |   + 比较排序
37 |   + 基数排序
38 |   + 堆排序
39 | - 字符串
40 |   + 模式匹配
41 |   + 查找
42 | 


--------------------------------------------------------------------------------
/WEB-INF/html/test.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | <title>Insert title here</title>
 6 | </head>
 7 | <body>
 8 | 
 9 | <h1>Hello, this is a test page</h1>
10 | 
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/WEB-INF/lib/spring-aop-4.1.1.RELEASE.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kinlog/visualgo/6de698a608295cd48981cf0272896abcd03d818c/WEB-INF/lib/spring-aop-4.1.1.RELEASE.jar


--------------------------------------------------------------------------------
/WEB-INF/lib/spring-aspects-4.1.1.RELEASE.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kinlog/visualgo/6de698a608295cd48981cf0272896abcd03d818c/WEB-INF/lib/spring-aspects-4.1.1.RELEASE.jar


--------------------------------------------------------------------------------
/WEB-INF/lib/spring-beans-4.1.1.RELEASE.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kinlog/visualgo/6de698a608295cd48981cf0272896abcd03d818c/WEB-INF/lib/spring-beans-4.1.1.RELEASE.jar


--------------------------------------------------------------------------------
/WEB-INF/lib/spring-context-4.1.1.RELEASE.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kinlog/visualgo/6de698a608295cd48981cf0272896abcd03d818c/WEB-INF/lib/spring-context-4.1.1.RELEASE.jar


--------------------------------------------------------------------------------
/WEB-INF/lib/spring-context-support-4.1.1.RELEASE.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kinlog/visualgo/6de698a608295cd48981cf0272896abcd03d818c/WEB-INF/lib/spring-context-support-4.1.1.RELEASE.jar


--------------------------------------------------------------------------------
/WEB-INF/lib/spring-core-4.1.1.RELEASE.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kinlog/visualgo/6de698a608295cd48981cf0272896abcd03d818c/WEB-INF/lib/spring-core-4.1.1.RELEASE.jar


--------------------------------------------------------------------------------
/WEB-INF/lib/spring-expression-4.1.1.RELEASE.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kinlog/visualgo/6de698a608295cd48981cf0272896abcd03d818c/WEB-INF/lib/spring-expression-4.1.1.RELEASE.jar


--------------------------------------------------------------------------------
/WEB-INF/lib/spring-framework-bom-4.0.6.RELEASE.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kinlog/visualgo/6de698a608295cd48981cf0272896abcd03d818c/WEB-INF/lib/spring-framework-bom-4.0.6.RELEASE.jar


--------------------------------------------------------------------------------
/WEB-INF/lib/spring-instrument-4.1.1.RELEASE.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kinlog/visualgo/6de698a608295cd48981cf0272896abcd03d818c/WEB-INF/lib/spring-instrument-4.1.1.RELEASE.jar


--------------------------------------------------------------------------------
/WEB-INF/lib/spring-instrument-tomcat-4.1.1.RELEASE.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kinlog/visualgo/6de698a608295cd48981cf0272896abcd03d818c/WEB-INF/lib/spring-instrument-tomcat-4.1.1.RELEASE.jar


--------------------------------------------------------------------------------
/WEB-INF/lib/spring-jdbc-4.1.1.RELEASE.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kinlog/visualgo/6de698a608295cd48981cf0272896abcd03d818c/WEB-INF/lib/spring-jdbc-4.1.1.RELEASE.jar


--------------------------------------------------------------------------------
/WEB-INF/lib/spring-jms-4.1.1.RELEASE.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kinlog/visualgo/6de698a608295cd48981cf0272896abcd03d818c/WEB-INF/lib/spring-jms-4.1.1.RELEASE.jar


--------------------------------------------------------------------------------
/WEB-INF/lib/spring-messaging-4.1.1.RELEASE.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kinlog/visualgo/6de698a608295cd48981cf0272896abcd03d818c/WEB-INF/lib/spring-messaging-4.1.1.RELEASE.jar


--------------------------------------------------------------------------------
/WEB-INF/lib/spring-orm-4.1.1.RELEASE.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kinlog/visualgo/6de698a608295cd48981cf0272896abcd03d818c/WEB-INF/lib/spring-orm-4.1.1.RELEASE.jar


--------------------------------------------------------------------------------
/WEB-INF/lib/spring-oxm-4.1.1.RELEASE.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kinlog/visualgo/6de698a608295cd48981cf0272896abcd03d818c/WEB-INF/lib/spring-oxm-4.1.1.RELEASE.jar


--------------------------------------------------------------------------------
/WEB-INF/lib/spring-test-4.1.1.RELEASE.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kinlog/visualgo/6de698a608295cd48981cf0272896abcd03d818c/WEB-INF/lib/spring-test-4.1.1.RELEASE.jar


--------------------------------------------------------------------------------
/WEB-INF/lib/spring-tx-4.1.1.RELEASE.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kinlog/visualgo/6de698a608295cd48981cf0272896abcd03d818c/WEB-INF/lib/spring-tx-4.1.1.RELEASE.jar


--------------------------------------------------------------------------------
/WEB-INF/lib/spring-web-4.1.1.RELEASE.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kinlog/visualgo/6de698a608295cd48981cf0272896abcd03d818c/WEB-INF/lib/spring-web-4.1.1.RELEASE.jar


--------------------------------------------------------------------------------
/WEB-INF/lib/spring-webmvc-4.1.1.RELEASE.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kinlog/visualgo/6de698a608295cd48981cf0272896abcd03d818c/WEB-INF/lib/spring-webmvc-4.1.1.RELEASE.jar


--------------------------------------------------------------------------------
/WEB-INF/lib/spring-webmvc-portlet-4.1.1.RELEASE.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kinlog/visualgo/6de698a608295cd48981cf0272896abcd03d818c/WEB-INF/lib/spring-webmvc-portlet-4.1.1.RELEASE.jar


--------------------------------------------------------------------------------
/WEB-INF/lib/spring-websocket-4.1.1.RELEASE.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kinlog/visualgo/6de698a608295cd48981cf0272896abcd03d818c/WEB-INF/lib/spring-websocket-4.1.1.RELEASE.jar


--------------------------------------------------------------------------------
/WEB-INF/problems.txt:
--------------------------------------------------------------------------------
1 | #1. avl树存在错误，测试用例：10-20-9
2 | #2. BST问题同1
3 | 3. Search.js 存在问题，待修复
4 | 4. 张鹏部分：还有个问题就是输入数组边界，点击设置的时候应该会在右上角显示大小，并且创建空的矩形，但是这步的动画显示会延迟到输入数组元素部分。我检查过index.js和search.js两个文件，发现在初始化数组大小的时候的确调用了initMAxSize函数，但是会出现这个问题，暂时搞不懂了。。。。
5 | 


--------------------------------------------------------------------------------
/WEB-INF/test.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | <title>Insert title here</title>
 6 | </head>
 7 | <body>
 8 | 
 9 | <h1>Hello, this is a test page</h1>
10 | 
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/WEB-INF/web.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
3 |   <display-name>ssdutAlgo</display-name>
4 |   <welcome-file-list>
5 |     <welcome-file>index.html</welcome-file>
6 |   </welcome-file-list>
7 | </web-app>


--------------------------------------------------------------------------------
/bootstrap/config.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "vars": {},
 3 |   "css": [
 4 |     "print.less",
 5 |     "type.less",
 6 |     "code.less",
 7 |     "grid.less",
 8 |     "tables.less",
 9 |     "forms.less",
10 |     "buttons.less",
11 |     "glyphicons.less",
12 |     "button-groups.less",
13 |     "input-groups.less",
14 |     "navs.less",
15 |     "navbar.less",
16 |     "breadcrumbs.less",
17 |     "pagination.less",
18 |     "pager.less",
19 |     "labels.less",
20 |     "badges.less",
21 |     "jumbotron.less",
22 |     "thumbnails.less",
23 |     "alerts.less",
24 |     "progress-bars.less",
25 |     "media.less",
26 |     "list-group.less",
27 |     "panels.less",
28 |     "wells.less",
29 |     "close.less",
30 |     "component-animations.less",
31 |     "dropdowns.less",
32 |     "tooltip.less",
33 |     "popovers.less",
34 |     "modals.less",
35 |     "carousel.less",
36 |     "utilities.less",
37 |     "responsive-utilities.less"
38 |   ],
39 |   "js": [
40 |     "alert.js",
41 |     "button.js",
42 |     "carousel.js",
43 |     "dropdown.js",
44 |     "modal.js",
45 |     "tooltip.js",
46 |     "popover.js",
47 |     "tab.js",
48 |     "affix.js",
49 |     "collapse.js",
50 |     "scrollspy.js",
51 |     "transition.js"
52 |   ]
53 | }


--------------------------------------------------------------------------------
/bootstrap/css/prettify.css:
--------------------------------------------------------------------------------
 1 | .com { color: #93a1a1; }
 2 | .lit { color: #195f91; }
 3 | .pun, .opn, .clo { color: #93a1a1; }
 4 | .fun { color: #dc322f; }
 5 | .str, .atv { color: #D14; }
 6 | .kwd, .prettyprint .tag { color: #1e347b; }
 7 | .typ, .atn, .dec, .var { color: teal; }
 8 | .pln { color: #48484c; }
 9 | 
10 | .prettyprint {
11 |   padding: 8px;
12 |   background-color: #f7f7f9;
13 |   border: 1px solid #e1e1e8;
14 | }
15 | .prettyprint.linenums {
16 |   -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
17 |      -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
18 |           box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
19 | }
20 | 
21 | /* Specify class=linenums on a pre to get line numbering */
22 | ol.linenums {
23 |   margin: 0 0 0 33px; /* IE indents via margin-left */
24 | }
25 | ol.linenums li {
26 |   padding-left: 12px;
27 |   color: #bebec5;
28 |   line-height: 20px;
29 |   text-shadow: 0 1px 0 #fff;
30 | }


--------------------------------------------------------------------------------
/bootstrap/css/theme.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   padding-top: 70px;
 3 |   padding-bottom: 30px;
 4 | }
 5 | 
 6 | .theme-dropdown .dropdown-menu {
 7 |   display: block;
 8 |   position: static;
 9 |   margin-bottom: 20px;
10 | }
11 | 
12 | .theme-showcase > p > .btn {
13 |   margin: 5px 0;
14 | }


--------------------------------------------------------------------------------
/bootstrap/fonts/glyphicons-halflings-regular.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kinlog/visualgo/6de698a608295cd48981cf0272896abcd03d818c/bootstrap/fonts/glyphicons-halflings-regular.eot


--------------------------------------------------------------------------------
/bootstrap/fonts/glyphicons-halflings-regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kinlog/visualgo/6de698a608295cd48981cf0272896abcd03d818c/bootstrap/fonts/glyphicons-halflings-regular.ttf


--------------------------------------------------------------------------------
/bootstrap/fonts/glyphicons-halflings-regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kinlog/visualgo/6de698a608295cd48981cf0272896abcd03d818c/bootstrap/fonts/glyphicons-halflings-regular.woff


--------------------------------------------------------------------------------
/bootstrap/img/glyphicons-halflings-white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kinlog/visualgo/6de698a608295cd48981cf0272896abcd03d818c/bootstrap/img/glyphicons-halflings-white.png


--------------------------------------------------------------------------------
/bootstrap/img/glyphicons-halflings.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kinlog/visualgo/6de698a608295cd48981cf0272896abcd03d818c/bootstrap/img/glyphicons-halflings.png


--------------------------------------------------------------------------------
/bootstrap/js/affix.js:
--------------------------------------------------------------------------------
  1 | /* ========================================================================
  2 |  * Bootstrap: affix.js v3.0.0
  3 |  * http://getbootstrap.com/javascript/#affix
  4 |  * ========================================================================
  5 |  * Copyright 2013 Twitter, Inc.
  6 |  *
  7 |  * Licensed under the Apache License, Version 2.0 (the "License");
  8 |  * you may not use this file except in compliance with the License.
  9 |  * You may obtain a copy of the License at
 10 |  *
 11 |  * http://www.apache.org/licenses/LICENSE-2.0
 12 |  *
 13 |  * Unless required by applicable law or agreed to in writing, software
 14 |  * distributed under the License is distributed on an "AS IS" BASIS,
 15 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 16 |  * See the License for the specific language governing permissions and
 17 |  * limitations under the License.
 18 |  * ======================================================================== */
 19 | 
 20 | 
 21 | +function ($) { "use strict";
 22 | 
 23 |   // AFFIX CLASS DEFINITION
 24 |   // ======================
 25 | 
 26 |   var Affix = function (element, options) {
 27 |     this.options = $.extend({}, Affix.DEFAULTS, options)
 28 |     this.$window = $(window)
 29 |       .on('scroll.bs.affix.data-api', $.proxy(this.checkPosition, this))
 30 |       .on('click.bs.affix.data-api',  $.proxy(this.checkPositionWithEventLoop, this))
 31 | 
 32 |     this.$element = $(element)
 33 |     this.affixed  =
 34 |     this.unpin    = null
 35 | 
 36 |     this.checkPosition()
 37 |   }
 38 | 
 39 |   Affix.RESET = 'affix affix-top affix-bottom'
 40 | 
 41 |   Affix.DEFAULTS = {
 42 |     offset: 0
 43 |   }
 44 | 
 45 |   Affix.prototype.checkPositionWithEventLoop = function () {
 46 |     setTimeout($.proxy(this.checkPosition, this), 1)
 47 |   }
 48 | 
 49 |   Affix.prototype.checkPosition = function () {
 50 |     if (!this.$element.is(':visible')) return
 51 | 
 52 |     var scrollHeight = $(document).height()
 53 |     var scrollTop    = this.$window.scrollTop()
 54 |     var position     = this.$element.offset()
 55 |     var offset       = this.options.offset
 56 |     var offsetTop    = offset.top
 57 |     var offsetBottom = offset.bottom
 58 | 
 59 |     if (typeof offset != 'object')         offsetBottom = offsetTop = offset
 60 |     if (typeof offsetTop == 'function')    offsetTop    = offset.top()
 61 |     if (typeof offsetBottom == 'function') offsetBottom = offset.bottom()
 62 | 
 63 |     var affix = this.unpin   != null && (scrollTop + this.unpin <= position.top) ? false :
 64 |                 offsetBottom != null && (position.top + this.$element.height() >= scrollHeight - offsetBottom) ? 'bottom' :
 65 |                 offsetTop    != null && (scrollTop <= offsetTop) ? 'top' : false
 66 | 
 67 |     if (this.affixed === affix) return
 68 |     if (this.unpin) this.$element.css('top', '')
 69 | 
 70 |     this.affixed = affix
 71 |     this.unpin   = affix == 'bottom' ? position.top - scrollTop : null
 72 | 
 73 |     this.$element.removeClass(Affix.RESET).addClass('affix' + (affix ? '-' + affix : ''))
 74 | 
 75 |     if (affix == 'bottom') {
 76 |       this.$element.offset({ top: document.body.offsetHeight - offsetBottom - this.$element.height() })
 77 |     }
 78 |   }
 79 | 
 80 | 
 81 |   // AFFIX PLUGIN DEFINITION
 82 |   // =======================
 83 | 
 84 |   var old = $.fn.affix
 85 | 
 86 |   $.fn.affix = function (option) {
 87 |     return this.each(function () {
 88 |       var $this   = $(this)
 89 |       var data    = $this.data('bs.affix')
 90 |       var options = typeof option == 'object' && option
 91 | 
 92 |       if (!data) $this.data('bs.affix', (data = new Affix(this, options)))
 93 |       if (typeof option == 'string') data[option]()
 94 |     })
 95 |   }
 96 | 
 97 |   $.fn.affix.Constructor = Affix
 98 | 
 99 | 
100 |   // AFFIX NO CONFLICT
101 |   // =================
102 | 
103 |   $.fn.affix.noConflict = function () {
104 |     $.fn.affix = old
105 |     return this
106 |   }
107 | 
108 | 
109 |   // AFFIX DATA-API
110 |   // ==============
111 | 
112 |   $(window).on('load', function () {
113 |     $('[data-spy="affix"]').each(function () {
114 |       var $spy = $(this)
115 |       var data = $spy.data()
116 | 
117 |       data.offset = data.offset || {}
118 | 
119 |       if (data.offsetBottom) data.offset.bottom = data.offsetBottom
120 |       if (data.offsetTop)    data.offset.top    = data.offsetTop
121 | 
122 |       $spy.affix(data)
123 |     })
124 |   })
125 | 
126 | }(window.jQuery);
127 | 


--------------------------------------------------------------------------------
/bootstrap/js/alert.js:
--------------------------------------------------------------------------------
 1 | /* ========================================================================
 2 |  * Bootstrap: alert.js v3.0.0
 3 |  * http://getbootstrap.com/javascript/#alerts
 4 |  * ========================================================================
 5 |  * Copyright 2013 Twitter, Inc.
 6 |  *
 7 |  * Licensed under the Apache License, Version 2.0 (the "License");
 8 |  * you may not use this file except in compliance with the License.
 9 |  * You may obtain a copy of the License at
10 |  *
11 |  * http://www.apache.org/licenses/LICENSE-2.0
12 |  *
13 |  * Unless required by applicable law or agreed to in writing, software
14 |  * distributed under the License is distributed on an "AS IS" BASIS,
15 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16 |  * See the License for the specific language governing permissions and
17 |  * limitations under the License.
18 |  * ======================================================================== */
19 | 
20 | 
21 | +function ($) { "use strict";
22 | 
23 |   // ALERT CLASS DEFINITION
24 |   // ======================
25 | 
26 |   var dismiss = '[data-dismiss="alert"]'
27 |   var Alert   = function (el) {
28 |     $(el).on('click', dismiss, this.close)
29 |   }
30 | 
31 |   Alert.prototype.close = function (e) {
32 |     var $this    = $(this)
33 |     var selector = $this.attr('data-target')
34 | 
35 |     if (!selector) {
36 |       selector = $this.attr('href')
37 |       selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
38 |     }
39 | 
40 |     var $parent = $(selector)
41 | 
42 |     if (e) e.preventDefault()
43 | 
44 |     if (!$parent.length) {
45 |       $parent = $this.hasClass('alert') ? $this : $this.parent()
46 |     }
47 | 
48 |     $parent.trigger(e = $.Event('close.bs.alert'))
49 | 
50 |     if (e.isDefaultPrevented()) return
51 | 
52 |     $parent.removeClass('in')
53 | 
54 |     function removeElement() {
55 |       $parent.trigger('closed.bs.alert').remove()
56 |     }
57 | 
58 |     $.support.transition && $parent.hasClass('fade') ?
59 |       $parent
60 |         .one($.support.transition.end, removeElement)
61 |         .emulateTransitionEnd(150) :
62 |       removeElement()
63 |   }
64 | 
65 | 
66 |   // ALERT PLUGIN DEFINITION
67 |   // =======================
68 | 
69 |   var old = $.fn.alert
70 | 
71 |   $.fn.alert = function (option) {
72 |     return this.each(function () {
73 |       var $this = $(this)
74 |       var data  = $this.data('bs.alert')
75 | 
76 |       if (!data) $this.data('bs.alert', (data = new Alert(this)))
77 |       if (typeof option == 'string') data[option].call($this)
78 |     })
79 |   }
80 | 
81 |   $.fn.alert.Constructor = Alert
82 | 
83 | 
84 |   // ALERT NO CONFLICT
85 |   // =================
86 | 
87 |   $.fn.alert.noConflict = function () {
88 |     $.fn.alert = old
89 |     return this
90 |   }
91 | 
92 | 
93 |   // ALERT DATA-API
94 |   // ==============
95 | 
96 |   $(document).on('click.bs.alert.data-api', dismiss, Alert.prototype.close)
97 | 
98 | }(window.jQuery);
99 | 


--------------------------------------------------------------------------------
/bootstrap/js/application.js:
--------------------------------------------------------------------------------
  1 | // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
  2 | // IT'S ALL JUST JUNK FOR OUR DOCS!
  3 | // ++++++++++++++++++++++++++++++++++++++++++
  4 | 
  5 | !function ($) {
  6 | 
  7 |   $(function(){
  8 | 
  9 |     var $window = $(window)
 10 | 
 11 |     // Disable certain links in docs
 12 |     $('section [href^=#]').click(function (e) {
 13 |       e.preventDefault()
 14 |     })
 15 | 
 16 |     // side bar
 17 |     setTimeout(function () {
 18 |       $('.bs-docs-sidenav').affix({
 19 |         offset: {
 20 |           top: function () { return $window.width() <= 980 ? 290 : 210 }
 21 |         , bottom: 270
 22 |         }
 23 |       })
 24 |     }, 100)
 25 | 
 26 |     // make code pretty
 27 |     window.prettyPrint && prettyPrint()
 28 | 
 29 |     // add-ons
 30 |     $('.add-on :checkbox').on('click', function () {
 31 |       var $this = $(this)
 32 |         , method = $this.attr('checked') ? 'addClass' : 'removeClass'
 33 |       $(this).parents('.add-on')[method]('active')
 34 |     })
 35 | 
 36 |     // add tipsies to grid for scaffolding
 37 |     if ($('#gridSystem').length) {
 38 |       $('#gridSystem').tooltip({
 39 |           selector: '.show-grid > [class*="span"]'
 40 |         , title: function () { return $(this).width() + 'px' }
 41 |       })
 42 |     }
 43 | 
 44 |     // tooltip demo
 45 |     $('.tooltip-demo').tooltip({
 46 |       selector: "a[data-toggle=tooltip]"
 47 |     })
 48 | 
 49 |     $('.tooltip-test').tooltip()
 50 |     $('.popover-test').popover()
 51 | 
 52 |     // popover demo
 53 |     $("a[data-toggle=popover]")
 54 |       .popover()
 55 |       .click(function(e) {
 56 |         e.preventDefault()
 57 |       })
 58 | 
 59 |     // button state demo
 60 |     $('#fat-btn')
 61 |       .click(function () {
 62 |         var btn = $(this)
 63 |         btn.button('loading')
 64 |         setTimeout(function () {
 65 |           btn.button('reset')
 66 |         }, 3000)
 67 |       })
 68 | 
 69 |     // carousel demo
 70 |     $('#myCarousel').carousel()
 71 | 
 72 |     // javascript build logic
 73 |     var inputsComponent = $("#components.download input")
 74 |       , inputsPlugin = $("#plugins.download input")
 75 |       , inputsVariables = $("#variables.download input")
 76 | 
 77 |     // toggle all plugin checkboxes
 78 |     $('#components.download .toggle-all').on('click', function (e) {
 79 |       e.preventDefault()
 80 |       inputsComponent.attr('checked', !inputsComponent.is(':checked'))
 81 |     })
 82 | 
 83 |     $('#plugins.download .toggle-all').on('click', function (e) {
 84 |       e.preventDefault()
 85 |       inputsPlugin.attr('checked', !inputsPlugin.is(':checked'))
 86 |     })
 87 | 
 88 |     $('#variables.download .toggle-all').on('click', function (e) {
 89 |       e.preventDefault()
 90 |       inputsVariables.val('')
 91 |     })
 92 | 
 93 |     // request built javascript
 94 |     $('.download-btn .btn').on('click', function () {
 95 | 
 96 |       var css = $("#components.download input:checked")
 97 |             .map(function () { return this.value })
 98 |             .toArray()
 99 |         , js = $("#plugins.download input:checked")
100 |             .map(function () { return this.value })
101 |             .toArray()
102 |         , vars = {}
103 |         , img = ['glyphicons-halflings.png', 'glyphicons-halflings-white.png']
104 | 
105 |     $("#variables.download input")
106 |       .each(function () {
107 |         $(this).val() && (vars[ $(this).prev().text() ] = $(this).val())
108 |       })
109 | 
110 |       $.ajax({
111 |         type: 'POST'
112 |       , url: /\?dev/.test(window.location) ? 'http://localhost:3000' : 'http://bootstrap.herokuapp.com'
113 |       , dataType: 'jsonpi'
114 |       , params: {
115 |           js: js
116 |         , css: css
117 |         , vars: vars
118 |         , img: img
119 |       }
120 |       })
121 |     })
122 |   })
123 | 
124 | // Modified from the original jsonpi https://github.com/benvinegar/jquery-jsonpi
125 | $.ajaxTransport('jsonpi', function(opts, originalOptions, jqXHR) {
126 |   var url = opts.url;
127 | 
128 |   return {
129 |     send: function(_, completeCallback) {
130 |       var name = 'jQuery_iframe_' + jQuery.now()
131 |         , iframe, form
132 | 
133 |       iframe = $('<iframe>')
134 |         .attr('name', name)
135 |         .appendTo('head')
136 | 
137 |       form = $('<form>')
138 |         .attr('method', opts.type) // GET or POST
139 |         .attr('action', url)
140 |         .attr('target', name)
141 | 
142 |       $.each(opts.params, function(k, v) {
143 | 
144 |         $('<input>')
145 |           .attr('type', 'hidden')
146 |           .attr('name', k)
147 |           .attr('value', typeof v == 'string' ? v : JSON.stringify(v))
148 |           .appendTo(form)
149 |       })
150 | 
151 |       form.appendTo('body').submit()
152 |     }
153 |   }
154 | })
155 | 
156 | }(window.jQuery)
157 | 


--------------------------------------------------------------------------------
/bootstrap/js/button.js:
--------------------------------------------------------------------------------
  1 | /* ========================================================================
  2 |  * Bootstrap: button.js v3.0.0
  3 |  * http://getbootstrap.com/javascript/#buttons
  4 |  * ========================================================================
  5 |  * Copyright 2013 Twitter, Inc.
  6 |  *
  7 |  * Licensed under the Apache License, Version 2.0 (the "License");
  8 |  * you may not use this file except in compliance with the License.
  9 |  * You may obtain a copy of the License at
 10 |  *
 11 |  * http://www.apache.org/licenses/LICENSE-2.0
 12 |  *
 13 |  * Unless required by applicable law or agreed to in writing, software
 14 |  * distributed under the License is distributed on an "AS IS" BASIS,
 15 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 16 |  * See the License for the specific language governing permissions and
 17 |  * limitations under the License.
 18 |  * ======================================================================== */
 19 | 
 20 | 
 21 | +function ($) { "use strict";
 22 | 
 23 |   // BUTTON PUBLIC CLASS DEFINITION
 24 |   // ==============================
 25 | 
 26 |   var Button = function (element, options) {
 27 |     this.$element = $(element)
 28 |     this.options  = $.extend({}, Button.DEFAULTS, options)
 29 |   }
 30 | 
 31 |   Button.DEFAULTS = {
 32 |     loadingText: 'loading...'
 33 |   }
 34 | 
 35 |   Button.prototype.setState = function (state) {
 36 |     var d    = 'disabled'
 37 |     var $el  = this.$element
 38 |     var val  = $el.is('input') ? 'val' : 'html'
 39 |     var data = $el.data()
 40 | 
 41 |     state = state + 'Text'
 42 | 
 43 |     if (!data.resetText) $el.data('resetText', $el[val]())
 44 | 
 45 |     $el[val](data[state] || this.options[state])
 46 | 
 47 |     // push to event loop to allow forms to submit
 48 |     setTimeout(function () {
 49 |       state == 'loadingText' ?
 50 |         $el.addClass(d).attr(d, d) :
 51 |         $el.removeClass(d).removeAttr(d);
 52 |     }, 0)
 53 |   }
 54 | 
 55 |   Button.prototype.toggle = function () {
 56 |     var $parent = this.$element.closest('[data-toggle="buttons"]')
 57 | 
 58 |     if ($parent.length) {
 59 |       var $input = this.$element.find('input')
 60 |         .prop('checked', !this.$element.hasClass('active'))
 61 |         .trigger('change')
 62 |       if ($input.prop('type') === 'radio') $parent.find('.active').removeClass('active')
 63 |     }
 64 | 
 65 |     this.$element.toggleClass('active')
 66 |   }
 67 | 
 68 | 
 69 |   // BUTTON PLUGIN DEFINITION
 70 |   // ========================
 71 | 
 72 |   var old = $.fn.button
 73 | 
 74 |   $.fn.button = function (option) {
 75 |     return this.each(function () {
 76 |       var $this   = $(this)
 77 |       var data    = $this.data('bs.button')
 78 |       var options = typeof option == 'object' && option
 79 | 
 80 |       if (!data) $this.data('bs.button', (data = new Button(this, options)))
 81 | 
 82 |       if (option == 'toggle') data.toggle()
 83 |       else if (option) data.setState(option)
 84 |     })
 85 |   }
 86 | 
 87 |   $.fn.button.Constructor = Button
 88 | 
 89 | 
 90 |   // BUTTON NO CONFLICT
 91 |   // ==================
 92 | 
 93 |   $.fn.button.noConflict = function () {
 94 |     $.fn.button = old
 95 |     return this
 96 |   }
 97 | 
 98 | 
 99 |   // BUTTON DATA-API
100 |   // ===============
101 | 
102 |   $(document).on('click.bs.button.data-api', '[data-toggle^=button]', function (e) {
103 |     var $btn = $(e.target)
104 |     if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
105 |     $btn.button('toggle')
106 |     e.preventDefault()
107 |   })
108 | 
109 | }(window.jQuery);
110 | 


--------------------------------------------------------------------------------
/bootstrap/js/collapse.js:
--------------------------------------------------------------------------------
  1 | /* ========================================================================
  2 |  * Bootstrap: collapse.js v3.0.0
  3 |  * http://getbootstrap.com/javascript/#collapse
  4 |  * ========================================================================
  5 |  * Copyright 2013 Twitter, Inc.
  6 |  *
  7 |  * Licensed under the Apache License, Version 2.0 (the "License");
  8 |  * you may not use this file except in compliance with the License.
  9 |  * You may obtain a copy of the License at
 10 |  *
 11 |  * http://www.apache.org/licenses/LICENSE-2.0
 12 |  *
 13 |  * Unless required by applicable law or agreed to in writing, software
 14 |  * distributed under the License is distributed on an "AS IS" BASIS,
 15 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 16 |  * See the License for the specific language governing permissions and
 17 |  * limitations under the License.
 18 |  * ======================================================================== */
 19 | 
 20 | 
 21 | +function ($) { "use strict";
 22 | 
 23 |   // COLLAPSE PUBLIC CLASS DEFINITION
 24 |   // ================================
 25 | 
 26 |   var Collapse = function (element, options) {
 27 |     this.$element      = $(element)
 28 |     this.options       = $.extend({}, Collapse.DEFAULTS, options)
 29 |     this.transitioning = null
 30 | 
 31 |     if (this.options.parent) this.$parent = $(this.options.parent)
 32 |     if (this.options.toggle) this.toggle()
 33 |   }
 34 | 
 35 |   Collapse.DEFAULTS = {
 36 |     toggle: true
 37 |   }
 38 | 
 39 |   Collapse.prototype.dimension = function () {
 40 |     var hasWidth = this.$element.hasClass('width')
 41 |     return hasWidth ? 'width' : 'height'
 42 |   }
 43 | 
 44 |   Collapse.prototype.show = function () {
 45 |     if (this.transitioning || this.$element.hasClass('in')) return
 46 | 
 47 |     var startEvent = $.Event('show.bs.collapse')
 48 |     this.$element.trigger(startEvent)
 49 |     if (startEvent.isDefaultPrevented()) return
 50 | 
 51 |     var actives = this.$parent && this.$parent.find('> .panel > .in')
 52 | 
 53 |     if (actives && actives.length) {
 54 |       var hasData = actives.data('bs.collapse')
 55 |       if (hasData && hasData.transitioning) return
 56 |       actives.collapse('hide')
 57 |       hasData || actives.data('bs.collapse', null)
 58 |     }
 59 | 
 60 |     var dimension = this.dimension()
 61 | 
 62 |     this.$element
 63 |       .removeClass('collapse')
 64 |       .addClass('collapsing')
 65 |       [dimension](0)
 66 | 
 67 |     this.transitioning = 1
 68 | 
 69 |     var complete = function () {
 70 |       this.$element
 71 |         .removeClass('collapsing')
 72 |         .addClass('in')
 73 |         [dimension]('auto')
 74 |       this.transitioning = 0
 75 |       this.$element.trigger('shown.bs.collapse')
 76 |     }
 77 | 
 78 |     if (!$.support.transition) return complete.call(this)
 79 | 
 80 |     var scrollSize = $.camelCase(['scroll', dimension].join('-'))
 81 | 
 82 |     this.$element
 83 |       .one($.support.transition.end, $.proxy(complete, this))
 84 |       .emulateTransitionEnd(350)
 85 |       [dimension](this.$element[0][scrollSize])
 86 |   }
 87 | 
 88 |   Collapse.prototype.hide = function () {
 89 |     if (this.transitioning || !this.$element.hasClass('in')) return
 90 | 
 91 |     var startEvent = $.Event('hide.bs.collapse')
 92 |     this.$element.trigger(startEvent)
 93 |     if (startEvent.isDefaultPrevented()) return
 94 | 
 95 |     var dimension = this.dimension()
 96 | 
 97 |     this.$element
 98 |       [dimension](this.$element[dimension]())
 99 |       [0].offsetHeight
100 | 
101 |     this.$element
102 |       .addClass('collapsing')
103 |       .removeClass('collapse')
104 |       .removeClass('in')
105 | 
106 |     this.transitioning = 1
107 | 
108 |     var complete = function () {
109 |       this.transitioning = 0
110 |       this.$element
111 |         .trigger('hidden.bs.collapse')
112 |         .removeClass('collapsing')
113 |         .addClass('collapse')
114 |     }
115 | 
116 |     if (!$.support.transition) return complete.call(this)
117 | 
118 |     this.$element
119 |       [dimension](0)
120 |       .one($.support.transition.end, $.proxy(complete, this))
121 |       .emulateTransitionEnd(350)
122 |   }
123 | 
124 |   Collapse.prototype.toggle = function () {
125 |     this[this.$element.hasClass('in') ? 'hide' : 'show']()
126 |   }
127 | 
128 | 
129 |   // COLLAPSE PLUGIN DEFINITION
130 |   // ==========================
131 | 
132 |   var old = $.fn.collapse
133 | 
134 |   $.fn.collapse = function (option) {
135 |     return this.each(function () {
136 |       var $this   = $(this)
137 |       var data    = $this.data('bs.collapse')
138 |       var options = $.extend({}, Collapse.DEFAULTS, $this.data(), typeof option == 'object' && option)
139 | 
140 |       if (!data) $this.data('bs.collapse', (data = new Collapse(this, options)))
141 |       if (typeof option == 'string') data[option]()
142 |     })
143 |   }
144 | 
145 |   $.fn.collapse.Constructor = Collapse
146 | 
147 | 
148 |   // COLLAPSE NO CONFLICT
149 |   // ====================
150 | 
151 |   $.fn.collapse.noConflict = function () {
152 |     $.fn.collapse = old
153 |     return this
154 |   }
155 | 
156 | 
157 |   // COLLAPSE DATA-API
158 |   // =================
159 | 
160 |   $(document).on('click.bs.collapse.data-api', '[data-toggle=collapse]', function (e) {
161 |     var $this   = $(this), href
162 |     var target  = $this.attr('data-target')
163 |         || e.preventDefault()
164 |         || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
165 |     var $target = $(target)
166 |     var data    = $target.data('bs.collapse')
167 |     var option  = data ? 'toggle' : $this.data()
168 |     var parent  = $this.attr('data-parent')
169 |     var $parent = parent && $(parent)
170 | 
171 |     if (!data || !data.transitioning) {
172 |       if ($parent) $parent.find('[data-toggle=collapse][data-parent="' + parent + '"]').not($this).addClass('collapsed')
173 |       $this[$target.hasClass('in') ? 'addClass' : 'removeClass']('collapsed')
174 |     }
175 | 
176 |     $target.collapse(option)
177 |   })
178 | 
179 | }(window.jQuery);
180 | 


--------------------------------------------------------------------------------
/bootstrap/js/dropdown.js:
--------------------------------------------------------------------------------
  1 | /* ========================================================================
  2 |  * Bootstrap: dropdown.js v3.0.0
  3 |  * http://getbootstrap.com/javascript/#dropdowns
  4 |  * ========================================================================
  5 |  * Copyright 2013 Twitter, Inc.
  6 |  *
  7 |  * Licensed under the Apache License, Version 2.0 (the "License");
  8 |  * you may not use this file except in compliance with the License.
  9 |  * You may obtain a copy of the License at
 10 |  *
 11 |  * http://www.apache.org/licenses/LICENSE-2.0
 12 |  *
 13 |  * Unless required by applicable law or agreed to in writing, software
 14 |  * distributed under the License is distributed on an "AS IS" BASIS,
 15 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 16 |  * See the License for the specific language governing permissions and
 17 |  * limitations under the License.
 18 |  * ======================================================================== */
 19 | 
 20 | 
 21 | +function ($) { "use strict";
 22 | 
 23 |   // DROPDOWN CLASS DEFINITION
 24 |   // =========================
 25 | 
 26 |   var backdrop = '.dropdown-backdrop'
 27 |   var toggle   = '[data-toggle=dropdown]'
 28 |   var Dropdown = function (element) {
 29 |     var $el = $(element).on('click.bs.dropdown', this.toggle)
 30 |   }
 31 | 
 32 |   Dropdown.prototype.toggle = function (e) {
 33 |     var $this = $(this)
 34 | 
 35 |     if ($this.is('.disabled, :disabled')) return
 36 | 
 37 |     var $parent  = getParent($this)
 38 |     var isActive = $parent.hasClass('open')
 39 | 
 40 |     clearMenus()
 41 | 
 42 |     if (!isActive) {
 43 |       if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
 44 |         // if mobile we we use a backdrop because click events don't delegate
 45 |         $('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
 46 |       }
 47 | 
 48 |       $parent.trigger(e = $.Event('show.bs.dropdown'))
 49 | 
 50 |       if (e.isDefaultPrevented()) return
 51 | 
 52 |       $parent
 53 |         .toggleClass('open')
 54 |         .trigger('shown.bs.dropdown')
 55 | 
 56 |       $this.focus()
 57 |     }
 58 | 
 59 |     return false
 60 |   }
 61 | 
 62 |   Dropdown.prototype.keydown = function (e) {
 63 |     if (!/(38|40|27)/.test(e.keyCode)) return
 64 | 
 65 |     var $this = $(this)
 66 | 
 67 |     e.preventDefault()
 68 |     e.stopPropagation()
 69 | 
 70 |     if ($this.is('.disabled, :disabled')) return
 71 | 
 72 |     var $parent  = getParent($this)
 73 |     var isActive = $parent.hasClass('open')
 74 | 
 75 |     if (!isActive || (isActive && e.keyCode == 27)) {
 76 |       if (e.which == 27) $parent.find(toggle).focus()
 77 |       return $this.click()
 78 |     }
 79 | 
 80 |     var $items = $('[role=menu] li:not(.divider):visible a', $parent)
 81 | 
 82 |     if (!$items.length) return
 83 | 
 84 |     var index = $items.index($items.filter(':focus'))
 85 | 
 86 |     if (e.keyCode == 38 && index > 0)                 index--                        // up
 87 |     if (e.keyCode == 40 && index < $items.length - 1) index++                        // down
 88 |     if (!~index)                                      index=0
 89 | 
 90 |     $items.eq(index).focus()
 91 |   }
 92 | 
 93 |   function clearMenus() {
 94 |     $(backdrop).remove()
 95 |     $(toggle).each(function (e) {
 96 |       var $parent = getParent($(this))
 97 |       if (!$parent.hasClass('open')) return
 98 |       $parent.trigger(e = $.Event('hide.bs.dropdown'))
 99 |       if (e.isDefaultPrevented()) return
100 |       $parent.removeClass('open').trigger('hidden.bs.dropdown')
101 |     })
102 |   }
103 | 
104 |   function getParent($this) {
105 |     var selector = $this.attr('data-target')
106 | 
107 |     if (!selector) {
108 |       selector = $this.attr('href')
109 |       selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
110 |     }
111 | 
112 |     var $parent = selector && $(selector)
113 | 
114 |     return $parent && $parent.length ? $parent : $this.parent()
115 |   }
116 | 
117 | 
118 |   // DROPDOWN PLUGIN DEFINITION
119 |   // ==========================
120 | 
121 |   var old = $.fn.dropdown
122 | 
123 |   $.fn.dropdown = function (option) {
124 |     return this.each(function () {
125 |       var $this = $(this)
126 |       var data  = $this.data('dropdown')
127 | 
128 |       if (!data) $this.data('dropdown', (data = new Dropdown(this)))
129 |       if (typeof option == 'string') data[option].call($this)
130 |     })
131 |   }
132 | 
133 |   $.fn.dropdown.Constructor = Dropdown
134 | 
135 | 
136 |   // DROPDOWN NO CONFLICT
137 |   // ====================
138 | 
139 |   $.fn.dropdown.noConflict = function () {
140 |     $.fn.dropdown = old
141 |     return this
142 |   }
143 | 
144 | 
145 |   // APPLY TO STANDARD DROPDOWN ELEMENTS
146 |   // ===================================
147 | 
148 |   $(document)
149 |     .on('click.bs.dropdown.data-api', clearMenus)
150 |     .on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
151 |     .on('click.bs.dropdown.data-api'  , toggle, Dropdown.prototype.toggle)
152 |     .on('keydown.bs.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
153 | 
154 | }(window.jQuery);
155 | 


--------------------------------------------------------------------------------
/bootstrap/js/ie8-responsive-file-warning.js:
--------------------------------------------------------------------------------
 1 | // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
 2 | // IT'S JUST JUNK FOR OUR DOCS!
 3 | // ++++++++++++++++++++++++++++++++++++++++++
 4 | /*!
 5 |  * Copyright 2013 Twitter, Inc.
 6 |  *
 7 |  * Licensed under the Creative Commons Attribution 3.0 Unported License. For
 8 |  * details, see http://creativecommons.org/licenses/by/3.0/.
 9 |  */
10 | // Intended to prevent false-positive bug reports about responsive styling supposedly not working in IE8.
11 | if (window.location.protocol == 'file:')
12 |   alert("ERROR: Bootstrap's responsive CSS is disabled!\nSee getbootstrap.com/getting-started/#respond-file-proto for details.")
13 | 


--------------------------------------------------------------------------------
/bootstrap/js/popover.js:
--------------------------------------------------------------------------------
  1 | /* ========================================================================
  2 |  * Bootstrap: popover.js v3.0.0
  3 |  * http://getbootstrap.com/javascript/#popovers
  4 |  * ========================================================================
  5 |  * Copyright 2013 Twitter, Inc.
  6 |  *
  7 |  * Licensed under the Apache License, Version 2.0 (the "License");
  8 |  * you may not use this file except in compliance with the License.
  9 |  * You may obtain a copy of the License at
 10 |  *
 11 |  * http://www.apache.org/licenses/LICENSE-2.0
 12 |  *
 13 |  * Unless required by applicable law or agreed to in writing, software
 14 |  * distributed under the License is distributed on an "AS IS" BASIS,
 15 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 16 |  * See the License for the specific language governing permissions and
 17 |  * limitations under the License.
 18 |  * ======================================================================== */
 19 | 
 20 | 
 21 | +function ($) { "use strict";
 22 | 
 23 |   // POPOVER PUBLIC CLASS DEFINITION
 24 |   // ===============================
 25 | 
 26 |   var Popover = function (element, options) {
 27 |     this.init('popover', element, options)
 28 |   }
 29 | 
 30 |   if (!$.fn.tooltip) throw new Error('Popover requires tooltip.js')
 31 | 
 32 |   Popover.DEFAULTS = $.extend({} , $.fn.tooltip.Constructor.DEFAULTS, {
 33 |     placement: 'right'
 34 |   , trigger: 'click'
 35 |   , content: ''
 36 |   , template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
 37 |   })
 38 | 
 39 | 
 40 |   // NOTE: POPOVER EXTENDS tooltip.js
 41 |   // ================================
 42 | 
 43 |   Popover.prototype = $.extend({}, $.fn.tooltip.Constructor.prototype)
 44 | 
 45 |   Popover.prototype.constructor = Popover
 46 | 
 47 |   Popover.prototype.getDefaults = function () {
 48 |     return Popover.DEFAULTS
 49 |   }
 50 | 
 51 |   Popover.prototype.setContent = function () {
 52 |     var $tip    = this.tip()
 53 |     var title   = this.getTitle()
 54 |     var content = this.getContent()
 55 | 
 56 |     $tip.find('.popover-title')[this.options.html ? 'html' : 'text'](title)
 57 |     $tip.find('.popover-content')[this.options.html ? 'html' : 'text'](content)
 58 | 
 59 |     $tip.removeClass('fade top bottom left right in')
 60 | 
 61 |     // IE8 doesn't accept hiding via the `:empty` pseudo selector, we have to do
 62 |     // this manually by checking the contents.
 63 |     if (!$tip.find('.popover-title').html()) $tip.find('.popover-title').hide()
 64 |   }
 65 | 
 66 |   Popover.prototype.hasContent = function () {
 67 |     return this.getTitle() || this.getContent()
 68 |   }
 69 | 
 70 |   Popover.prototype.getContent = function () {
 71 |     var $e = this.$element
 72 |     var o  = this.options
 73 | 
 74 |     return $e.attr('data-content')
 75 |       || (typeof o.content == 'function' ?
 76 |             o.content.call($e[0]) :
 77 |             o.content)
 78 |   }
 79 | 
 80 |   Popover.prototype.arrow = function () {
 81 |     return this.$arrow = this.$arrow || this.tip().find('.arrow')
 82 |   }
 83 | 
 84 |   Popover.prototype.tip = function () {
 85 |     if (!this.$tip) this.$tip = $(this.options.template)
 86 |     return this.$tip
 87 |   }
 88 | 
 89 | 
 90 |   // POPOVER PLUGIN DEFINITION
 91 |   // =========================
 92 | 
 93 |   var old = $.fn.popover
 94 | 
 95 |   $.fn.popover = function (option) {
 96 |     return this.each(function () {
 97 |       var $this   = $(this)
 98 |       var data    = $this.data('bs.popover')
 99 |       var options = typeof option == 'object' && option
100 | 
101 |       if (!data) $this.data('bs.popover', (data = new Popover(this, options)))
102 |       if (typeof option == 'string') data[option]()
103 |     })
104 |   }
105 | 
106 |   $.fn.popover.Constructor = Popover
107 | 
108 | 
109 |   // POPOVER NO CONFLICT
110 |   // ===================
111 | 
112 |   $.fn.popover.noConflict = function () {
113 |     $.fn.popover = old
114 |     return this
115 |   }
116 | 
117 | }(window.jQuery);
118 | 


--------------------------------------------------------------------------------
/bootstrap/js/scrollspy.js:
--------------------------------------------------------------------------------
  1 | /* ========================================================================
  2 |  * Bootstrap: scrollspy.js v3.0.0
  3 |  * http://getbootstrap.com/javascript/#scrollspy
  4 |  * ========================================================================
  5 |  * Copyright 2013 Twitter, Inc.
  6 |  *
  7 |  * Licensed under the Apache License, Version 2.0 (the "License");
  8 |  * you may not use this file except in compliance with the License.
  9 |  * You may obtain a copy of the License at
 10 |  *
 11 |  * http://www.apache.org/licenses/LICENSE-2.0
 12 |  *
 13 |  * Unless required by applicable law or agreed to in writing, software
 14 |  * distributed under the License is distributed on an "AS IS" BASIS,
 15 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 16 |  * See the License for the specific language governing permissions and
 17 |  * limitations under the License.
 18 |  * ======================================================================== */
 19 | 
 20 | 
 21 | +function ($) { "use strict";
 22 | 
 23 |   // SCROLLSPY CLASS DEFINITION
 24 |   // ==========================
 25 | 
 26 |   function ScrollSpy(element, options) {
 27 |     var href
 28 |     var process  = $.proxy(this.process, this)
 29 | 
 30 |     this.$element       = $(element).is('body') ? $(window) : $(element)
 31 |     this.$body          = $('body')
 32 |     this.$scrollElement = this.$element.on('scroll.bs.scroll-spy.data-api', process)
 33 |     this.options        = $.extend({}, ScrollSpy.DEFAULTS, options)
 34 |     this.selector       = (this.options.target
 35 |       || ((href = $(element).attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
 36 |       || '') + ' .nav li > a'
 37 |     this.offsets        = $([])
 38 |     this.targets        = $([])
 39 |     this.activeTarget   = null
 40 | 
 41 |     this.refresh()
 42 |     this.process()
 43 |   }
 44 | 
 45 |   ScrollSpy.DEFAULTS = {
 46 |     offset: 10
 47 |   }
 48 | 
 49 |   ScrollSpy.prototype.refresh = function () {
 50 |     var offsetMethod = this.$element[0] == window ? 'offset' : 'position'
 51 | 
 52 |     this.offsets = $([])
 53 |     this.targets = $([])
 54 | 
 55 |     var self     = this
 56 |     var $targets = this.$body
 57 |       .find(this.selector)
 58 |       .map(function () {
 59 |         var $el   = $(this)
 60 |         var href  = $el.data('target') || $el.attr('href')
 61 |         var $href = /^#\w/.test(href) && $(href)
 62 | 
 63 |         return ($href
 64 |           && $href.length
 65 |           && [[ $href[offsetMethod]().top + (!$.isWindow(self.$scrollElement.get(0)) && self.$scrollElement.scrollTop()), href ]]) || null
 66 |       })
 67 |       .sort(function (a, b) { return a[0] - b[0] })
 68 |       .each(function () {
 69 |         self.offsets.push(this[0])
 70 |         self.targets.push(this[1])
 71 |       })
 72 |   }
 73 | 
 74 |   ScrollSpy.prototype.process = function () {
 75 |     var scrollTop    = this.$scrollElement.scrollTop() + this.options.offset
 76 |     var scrollHeight = this.$scrollElement[0].scrollHeight || this.$body[0].scrollHeight
 77 |     var maxScroll    = scrollHeight - this.$scrollElement.height()
 78 |     var offsets      = this.offsets
 79 |     var targets      = this.targets
 80 |     var activeTarget = this.activeTarget
 81 |     var i
 82 | 
 83 |     if (scrollTop >= maxScroll) {
 84 |       return activeTarget != (i = targets.last()[0]) && this.activate(i)
 85 |     }
 86 | 
 87 |     for (i = offsets.length; i--;) {
 88 |       activeTarget != targets[i]
 89 |         && scrollTop >= offsets[i]
 90 |         && (!offsets[i + 1] || scrollTop <= offsets[i + 1])
 91 |         && this.activate( targets[i] )
 92 |     }
 93 |   }
 94 | 
 95 |   ScrollSpy.prototype.activate = function (target) {
 96 |     this.activeTarget = target
 97 | 
 98 |     $(this.selector)
 99 |       .parents('.active')
100 |       .removeClass('active')
101 | 
102 |     var selector = this.selector
103 |       + '[data-target="' + target + '"],'
104 |       + this.selector + '[href="' + target + '"]'
105 | 
106 |     var active = $(selector)
107 |       .parents('li')
108 |       .addClass('active')
109 | 
110 |     if (active.parent('.dropdown-menu').length)  {
111 |       active = active
112 |         .closest('li.dropdown')
113 |         .addClass('active')
114 |     }
115 | 
116 |     active.trigger('activate')
117 |   }
118 | 
119 | 
120 |   // SCROLLSPY PLUGIN DEFINITION
121 |   // ===========================
122 | 
123 |   var old = $.fn.scrollspy
124 | 
125 |   $.fn.scrollspy = function (option) {
126 |     return this.each(function () {
127 |       var $this   = $(this)
128 |       var data    = $this.data('bs.scrollspy')
129 |       var options = typeof option == 'object' && option
130 | 
131 |       if (!data) $this.data('bs.scrollspy', (data = new ScrollSpy(this, options)))
132 |       if (typeof option == 'string') data[option]()
133 |     })
134 |   }
135 | 
136 |   $.fn.scrollspy.Constructor = ScrollSpy
137 | 
138 | 
139 |   // SCROLLSPY NO CONFLICT
140 |   // =====================
141 | 
142 |   $.fn.scrollspy.noConflict = function () {
143 |     $.fn.scrollspy = old
144 |     return this
145 |   }
146 | 
147 | 
148 |   // SCROLLSPY DATA-API
149 |   // ==================
150 | 
151 |   $(window).on('load', function () {
152 |     $('[data-spy="scroll"]').each(function () {
153 |       var $spy = $(this)
154 |       $spy.scrollspy($spy.data())
155 |     })
156 |   })
157 | 
158 | }(window.jQuery);
159 | 


--------------------------------------------------------------------------------
/bootstrap/js/tab.js:
--------------------------------------------------------------------------------
  1 | /* ========================================================================
  2 |  * Bootstrap: tab.js v3.0.0
  3 |  * http://getbootstrap.com/javascript/#tabs
  4 |  * ========================================================================
  5 |  * Copyright 2013 Twitter, Inc.
  6 |  *
  7 |  * Licensed under the Apache License, Version 2.0 (the "License");
  8 |  * you may not use this file except in compliance with the License.
  9 |  * You may obtain a copy of the License at
 10 |  *
 11 |  * http://www.apache.org/licenses/LICENSE-2.0
 12 |  *
 13 |  * Unless required by applicable law or agreed to in writing, software
 14 |  * distributed under the License is distributed on an "AS IS" BASIS,
 15 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 16 |  * See the License for the specific language governing permissions and
 17 |  * limitations under the License.
 18 |  * ======================================================================== */
 19 | 
 20 | 
 21 | +function ($) { "use strict";
 22 | 
 23 |   // TAB CLASS DEFINITION
 24 |   // ====================
 25 | 
 26 |   var Tab = function (element) {
 27 |     this.element = $(element)
 28 |   }
 29 | 
 30 |   Tab.prototype.show = function () {
 31 |     var $this    = this.element
 32 |     var $ul      = $this.closest('ul:not(.dropdown-menu)')
 33 |     var selector = $this.data('target')
 34 | 
 35 |     if (!selector) {
 36 |       selector = $this.attr('href')
 37 |       selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
 38 |     }
 39 | 
 40 |     if ($this.parent('li').hasClass('active')) return
 41 | 
 42 |     var previous = $ul.find('.active:last a')[0]
 43 |     var e        = $.Event('show.bs.tab', {
 44 |       relatedTarget: previous
 45 |     })
 46 | 
 47 |     $this.trigger(e)
 48 | 
 49 |     if (e.isDefaultPrevented()) return
 50 | 
 51 |     var $target = $(selector)
 52 | 
 53 |     this.activate($this.parent('li'), $ul)
 54 |     this.activate($target, $target.parent(), function () {
 55 |       $this.trigger({
 56 |         type: 'shown.bs.tab'
 57 |       , relatedTarget: previous
 58 |       })
 59 |     })
 60 |   }
 61 | 
 62 |   Tab.prototype.activate = function (element, container, callback) {
 63 |     var $active    = container.find('> .active')
 64 |     var transition = callback
 65 |       && $.support.transition
 66 |       && $active.hasClass('fade')
 67 | 
 68 |     function next() {
 69 |       $active
 70 |         .removeClass('active')
 71 |         .find('> .dropdown-menu > .active')
 72 |         .removeClass('active')
 73 | 
 74 |       element.addClass('active')
 75 | 
 76 |       if (transition) {
 77 |         element[0].offsetWidth // reflow for transition
 78 |         element.addClass('in')
 79 |       } else {
 80 |         element.removeClass('fade')
 81 |       }
 82 | 
 83 |       if (element.parent('.dropdown-menu')) {
 84 |         element.closest('li.dropdown').addClass('active')
 85 |       }
 86 | 
 87 |       callback && callback()
 88 |     }
 89 | 
 90 |     transition ?
 91 |       $active
 92 |         .one($.support.transition.end, next)
 93 |         .emulateTransitionEnd(150) :
 94 |       next()
 95 | 
 96 |     $active.removeClass('in')
 97 |   }
 98 | 
 99 | 
100 |   // TAB PLUGIN DEFINITION
101 |   // =====================
102 | 
103 |   var old = $.fn.tab
104 | 
105 |   $.fn.tab = function ( option ) {
106 |     return this.each(function () {
107 |       var $this = $(this)
108 |       var data  = $this.data('bs.tab')
109 | 
110 |       if (!data) $this.data('bs.tab', (data = new Tab(this)))
111 |       if (typeof option == 'string') data[option]()
112 |     })
113 |   }
114 | 
115 |   $.fn.tab.Constructor = Tab
116 | 
117 | 
118 |   // TAB NO CONFLICT
119 |   // ===============
120 | 
121 |   $.fn.tab.noConflict = function () {
122 |     $.fn.tab = old
123 |     return this
124 |   }
125 | 
126 | 
127 |   // TAB DATA-API
128 |   // ============
129 | 
130 |   $(document).on('click.bs.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
131 |     e.preventDefault()
132 |     $(this).tab('show')
133 |   })
134 | 
135 | }(window.jQuery);
136 | 


--------------------------------------------------------------------------------
/bootstrap/js/transition.js:
--------------------------------------------------------------------------------
 1 | /* ========================================================================
 2 |  * Bootstrap: transition.js v3.0.0
 3 |  * http://getbootstrap.com/javascript/#transitions
 4 |  * ========================================================================
 5 |  * Copyright 2013 Twitter, Inc.
 6 |  *
 7 |  * Licensed under the Apache License, Version 2.0 (the "License");
 8 |  * you may not use this file except in compliance with the License.
 9 |  * You may obtain a copy of the License at
10 |  *
11 |  * http://www.apache.org/licenses/LICENSE-2.0
12 |  *
13 |  * Unless required by applicable law or agreed to in writing, software
14 |  * distributed under the License is distributed on an "AS IS" BASIS,
15 |  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16 |  * See the License for the specific language governing permissions and
17 |  * limitations under the License.
18 |  * ======================================================================== */
19 | 
20 | 
21 | +function ($) { "use strict";
22 | 
23 |   // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
24 |   // ============================================================
25 | 
26 |   function transitionEnd() {
27 |     var el = document.createElement('bootstrap')
28 | 
29 |     var transEndEventNames = {
30 |       'WebkitTransition' : 'webkitTransitionEnd'
31 |     , 'MozTransition'    : 'transitionend'
32 |     , 'OTransition'      : 'oTransitionEnd otransitionend'
33 |     , 'transition'       : 'transitionend'
34 |     }
35 | 
36 |     for (var name in transEndEventNames) {
37 |       if (el.style[name] !== undefined) {
38 |         return { end: transEndEventNames[name] }
39 |       }
40 |     }
41 |   }
42 | 
43 |   // http://blog.alexmaccaw.com/css-transitions
44 |   $.fn.emulateTransitionEnd = function (duration) {
45 |     var called = false, $el = this
46 |     $(this).one($.support.transition.end, function () { called = true })
47 |     var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
48 |     setTimeout(callback, duration)
49 |     return this
50 |   }
51 | 
52 |   $(function () {
53 |     $.support.transition = transitionEnd()
54 |   })
55 | 
56 | }(window.jQuery);
57 | 


--------------------------------------------------------------------------------
/css/sort.css:
--------------------------------------------------------------------------------
  1 | @charset "utf-8";
  2 | /* CSS Document */
  3 | .sortStartHide{
  4 | 	width:             42px;
  5 | 	height:            70px;
  6 | 	background:        rgb(89, 229, 89);
  7 | 	position:          fixed;
  8 | 	left:              0px;
  9 | 	top:               530px;
 10 | 	cursor:            pointer;
 11 | }
 12 | .sortStartHide img{
 13 | 	position:          relative;
 14 | 	top:               27px;
 15 | }
 16 | .compareSortStarts,.radixSortStarts,.heapSortStarts{
 17 | 	position:          fixed;
 18 | 	top:               530px;
 19 | 	left:              46px;
 20 | 	width:             0px;
 21 | 	height:            70px;
 22 | 	background:        rgb(89, 229, 89);
 23 | 	cursor:            pointer; 
 24 | 	display:           none;
 25 | }
 26 | .compareSortStarts p,.radixSortStarts p,.heapSortStarts p{
 27 | 	text-align:        left;
 28 |     color:             white;
 29 |     font-size:         1em;
 30 |     width:             100%;
 31 |     padding-top:       8px;
 32 |     padding-bottom:    6px;
 33 |     margin:            0px;
 34 |     text-indent:       1.5em;
 35 | }
 36 | .arrayLength{
 37 | 	position:          fixed;
 38 | 	left:              190px;
 39 | 	top:               530px;
 40 | 	width:             200px;
 41 | 	height:            35px;
 42 | 	background:        rgb(89,229,89);
 43 | 	display:           none;
 44 | 	cursor:            pointer;         
 45 | }
 46 | .arrayLength span{
 47 | 	font-size:         1em;
 48 | 	color:             white;
 49 | 	display:           inline-block;
 50 | 	margin-top:        5px;
 51 | 	margin-left:       -8px;
 52 | }
 53 | .arrayLength input{
 54 | 	width:             72%;
 55 | 	margin-left:       6px;
 56 | }
 57 | .createArray,.createRadixArray,.createHeapArray{
 58 | 	position:          fixed;
 59 | 	left:              394px;
 60 | 	top:               530px;
 61 | 	width:             80px;
 62 | 	height:            35px;
 63 | 	background:        rgb(89,229,89);
 64 | 	display:           none;
 65 | 	cursor:            pointer; 
 66 | }
 67 | .createArray p,.createRadixArray p,.createHeapArray p{
 68 | 	width:             100%;
 69 | 	margin-top:        8px;
 70 | 	color:             white;
 71 | 	font-size:         1em;
 72 | 	text-align:        center;
 73 | }
 74 | .subC2,.subV2,.subHS2{
 75 | 	position:          fixed;
 76 | 	top:               565px;
 77 | 	width:             80px;
 78 | 	height:            35px;
 79 | 	background:        rgb(89,229,89);
 80 | 	display:           none;
 81 | 	cursor:            pointer;
 82 | 	left:              190px; 
 83 | }
 84 | .subC2 p,.subV2 p,.subHS2 p{
 85 | 	width:             100%;
 86 | 	margin-top:        8px;
 87 | 	color:             white;
 88 | 	font-size:         1em;
 89 | 	text-align:        center;
 90 | }
 91 | .insertSort,.radixSort{
 92 | 	left:              190px; 
 93 | }
 94 | .selectSort{
 95 | 	left:              274px;
 96 | }
 97 | .bubbleSort{
 98 | 	left:              359px;
 99 | }
100 | .shellSort{
101 | 	left:              443px;
102 | }
103 | .quickSort{
104 | 	left:              527px;
105 | }
106 | .mergeSort{
107 | 	left:              611px;
108 | }


--------------------------------------------------------------------------------
/css/string.css:
--------------------------------------------------------------------------------
  1 | .patternStartHide,.searchStartHide{
  2 | 	width:             42px;
  3 | 	height:            105px;
  4 | 	background:        rgb(89, 229, 89);
  5 | 	position:          fixed;
  6 | 	left:              0px;
  7 | 	top:               495px;
  8 | 	cursor:            pointer;
  9 | }
 10 | .patternStartHide img,.searchStartHide img{
 11 | 	position:          relative;
 12 | 	top:               47px;
 13 | }
 14 | .patternStarts,.searchStarts{
 15 | 	position:          fixed;
 16 | 	top:               495px;
 17 | 	left:              46px;
 18 | 	width:             0px;
 19 | 	height:            105px;
 20 | 	background:        rgb(89, 229, 89);
 21 | 	cursor:            pointer; 
 22 | 	display:           none;
 23 | }
 24 | .patternStarts p,.searchStarts p{
 25 | 	text-align:        left;
 26 |     color:             white;
 27 |     font-size:         1em;
 28 |     width:             100%;
 29 |     padding-top:       8px;
 30 |     padding-bottom:    6px;
 31 |     margin:            0px;
 32 |     text-indent:       1.5em;
 33 | }
 34 | .patternString,.searchArray{
 35 | 	position:          fixed;
 36 | 	top:               495px;
 37 | 	left:              190px;
 38 | 	width:             200px;
 39 | 	height:            35px;
 40 | 	background:        rgb(89, 229, 89);
 41 | 	display:           none;
 42 | 	cursor:            pointer; 
 43 | }
 44 | .patternString span,.targetString span,.searchArray span,.searchContent span{
 45 | 	font-size:         1em;
 46 | 	color:             white;
 47 | 	display:           inline-block;
 48 | 	margin-top:        5px;
 49 | }
 50 | .patternString input,.targetString input,.searchArray input,.searchContent input{
 51 | 	width:             72%;
 52 | 	margin-left:       6px;
 53 | }
 54 | .createPattern,.setSize{
 55 | 	position:          fixed;
 56 | 	left:              394px;
 57 | 	top:               495px;
 58 | 	width:             80px;
 59 | 	height:            35px;
 60 | 	background:        rgb(89,229,89);
 61 | 	display:           none;
 62 | 	cursor:            pointer; 
 63 | }
 64 | .createPattern p,.createTarget p,.setSize p,.createSearchArray p{
 65 | 	width:             100%;
 66 | 	margin-top:        8px;
 67 | 	color:             white;
 68 | 	font-size:         1em;
 69 | 	text-align:        center;
 70 | }
 71 | .targetString,.searchContent{
 72 | 	position:          fixed;
 73 | 	top:               530px;
 74 | 	left:              190px;
 75 | 	width:             200px;
 76 | 	height:            35px;
 77 | 	background:        rgb(89, 229, 89);
 78 | 	display:           none;
 79 | 	cursor:            pointer; 
 80 | }
 81 | .createTarget,.createSearchArray{
 82 | 	position:          fixed;
 83 | 	left:              394px;
 84 | 	top:               530px;
 85 | 	width:             80px;
 86 | 	height:            35px;
 87 | 	background:        rgb(89,229,89);
 88 | 	display:           none;
 89 | 	cursor:            pointer; 
 90 | }
 91 | .subW3{
 92 |     position:          fixed;
 93 | 	top:               565px;
 94 | 	width:             80px;
 95 | 	height:            35px;
 96 | 	background:        rgb(89,229,89);
 97 | 	display:           none;
 98 | 	cursor:            pointer; 
 99 | }
100 | .subW3 p{
101 | 	width:             100%;
102 | 	margin-top:        8px;
103 | 	color:             white;
104 | 	font-size:         1em;
105 | 	text-align:        center;
106 | }
107 | .match{
108 | 	left:              190px;
109 | }
110 | .matchStart{
111 | 	left:              274px;
112 | }
113 | .searchOne{
114 | 	position:          fixed;
115 | 	top:               565px;
116 | 	left:              190px;
117 | 	width:             200px;
118 | 	height:            35px;
119 | 	background:        rgb(89, 229, 89);
120 | 	display:           none;
121 | 	cursor:            pointer; 
122 | }
123 | .searchOne span{
124 | 	font-size:         1em;
125 | 	color:             white;
126 | 	display:           inline-block;
127 | 	margin-top:        5px;
128 | }
129 | .searchOne input{
130 | 	width:             72%;
131 | 	margin-left:       6px;
132 | }
133 | .binarySearch{
134 | 	position:          fixed;
135 | 	top:               565px;
136 | 	left:              394px;
137 | 	width:             80px;
138 | 	height:            35px;
139 | 	background:        rgb(89,229,89);
140 | 	display:           none;
141 | 	cursor:            pointer;
142 | }
143 | .binarySearch p,.sequentialSearch p{
144 | 	width:             100%;
145 | 	margin-top:        8px;
146 | 	color:             white;
147 | 	font-size:         1em;
148 | 	text-align:        center;
149 | }
150 | .sequentialSearch{
151 | 	position:          fixed;
152 | 	top:               565px;
153 | 	left:              478px;
154 | 	width:             80px;
155 | 	height:            35px;
156 | 	background:        rgb(89,229,89);
157 | 	display:           none;
158 | 	cursor:            pointer;
159 | }


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kinlog/visualgo/6de698a608295cd48981cf0272896abcd03d818c/favicon.ico


--------------------------------------------------------------------------------
/graph/dijkstra.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3 | <head>
  4 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
  5 | 	<script src="../jquery.js"></script>
  6 | 	<script src="../index.js"></script>
  7 | 	<script type = "application/javascript" src = "../js/AnimationManager.js"> </script>
  8 |     <script type = "application/javascript" src = "../js/ObjectManager.js"> </script>
  9 |     <script type = "application/javascript" src = "../js/AnimatedObject.js"> </script>
 10 |     <script type = "application/javascript" src = "../js/AnimatedCircle.js"> </script>
 11 | 	<script type = "application/javascript" src = "../js/AnimatedHighlightCircle.js"> </script>
 12 |     <script type = "application/javascript" src = "../js/AnimatedLine.js"> </script>
 13 |     <script type = "application/javascript" src = "../js/AnimatedLabel.js"> </script>
 14 |     <script type = "application/javascript" src = "../js/AnimatedRectangle.js"> </script>
 15 |     <script type = "application/javascript" src = "../js/AnimatedPointer.js"> </script>
 16 | 	<script type = "application/javascript" src = "../js/AnimatedHighlightRectangle.js"> </script>
 17 |     <script type = "application/javascript" src = "../js/Algorithm.js"> </script>
 18 |     <script type = "application/javascript" src = "../js/Dijkstra.js"> </script>
 19 | 	<link rel="shortcut icon" href="../favicon.ico" />
 20 | 	<link rel="stylesheet" href="../css/index.css" />
 21 | 	<link rel="stylesheet" type="text/css" href="../css/graph.css"/>
 22 | 	<title>Dijkstra</title>
 23 | 	<script>
 24 |           var type=0;
 25 |           var index;
 26 | 	</script>
 27 | </head>
 28 | <body onload="init();ini();">
 29 | 	<div class="mainSub">
 30 | 		<div class="header">
 31 | 			<img class="logo" src="../image/logo.png" alt="logo" onclick="window.location.href='../index.html'" />
 32 | 			<div class="navList">
 33 | 			        <a href="graphDFSTraverse.html" class="nav" style="text-decoration:none;">DFS遍历</a>
 34 | 			        <a href="graphBFSTraverse.html" class="nav" style="text-decoration:none;">BFS遍历</a>
 35 | 			        <a href="prim.html" class="nav" style="text-decoration:none;">Prim</a>
 36 | 			        <a href="kruskal.html" class="nav" style="text-decoration:none;">Kruskal</a>
 37 | 			        <a href="dijkstra.html" class="nav selected" style="text-decoration:none;">Dijkstra</a>
 38 | 					<a href="floyd.html" class="nav" style="text-decoration:none;">Floyd</a>
 39 | 			</div>
 40 | 		</div>
 41 | 		<div class="showBox" width="1000" height="500" style="overflow: scroll;">
 42 | 		   <canvas id="drawing" width="2000" height="1000">Canvas</canvas>
 43 | 		</div>
 44 | 		<div class="dijStartHide">
 45 | 			<img src="../image/arrow_white_right.png" alt="" />
 46 | 		</div>
 47 | 		<div class="dijStarts">
 48 | 			<p class="r1">生成随机图</p>
 49 | 			<p class="r2">增删边</p>
 50 | 			<p class="r3">运行Dijkstra</p>
 51 | 			<p class="r4">选项</p>
 52 | 		</div>
 53 | 		<div class="peakDijNum subX1">
 54 | 			<span>顶点数量</span>
 55 | 			<input type="text" class="peakDijNumber"/>
 56 | 		</div>
 57 | 		<div class="createDijGraph subX1">
 58 | 			<p>生成随机图</p>
 59 | 		</div>
 60 | 		<div class="startDijPeak subX2"> 
 61 | 			<span>起点</span>
 62 | 			<input type="text" class="startDijNumber"/>
 63 | 		</div>
 64 | 		<div class="endDijPeak subX2">
 65 | 			<span>终点</span>
 66 | 			<input type="text" class="endDijNumber"/>
 67 | 		</div>
 68 | 		<div class="weightDij subX2">
 69 | 			<span>权重</span>
 70 | 			<input type="text" class="weightDijNumber"/>
 71 | 		</div>
 72 | 		<div class="addDijEdge subX2">
 73 | 			<p>添加边</p>
 74 | 		</div>
 75 |         <div class="deleteDijEdge subX2">
 76 | 			<p>删除边</p>
 77 | 		</div>
 78 | 		<div class="runDijPeak subX3">
 79 | 			<span>起始顶点</span>
 80 | 			<input type="text" class="runDijNumber"/>
 81 | 		</div>
 82 | 		<div class="runTraverse subX3 Dijkstra">
 83 | 			<p>Run Dijkstra</p>
 84 | 		</div>
 85 | 		<div class="dirDijGraph subX4">
 86 | 		  <form>
 87 | 			<input type="radio" name="dir" class="radio1" value='1'><span>有向图</span>
 88 | 			<input type="radio" name="dir" class="radio2" value='0'><span>无向图</span>
 89 | 		  </form>
 90 | 		</div>
 91 | 		<div class="stateHide">
 92 | 			<img src="../image/arrow_white_right.png" alt="" />
 93 | 		</div>
 94 | 		<div class="state">
 95 | 			<p></p>
 96 | 		</div>
 97 | 		<!--div class="codeHide">
 98 | 			<img src="../image/arrow_white_right.png" alt="" />
 99 | 		</div>
100 | 		<div class="codes">
101 | 			<p>xx</p>
102 | 			<p>xx</p>
103 | 			<p>xx</p>
104 | 			<p>xx</p>
105 | 			<p>xx</p>
106 | 			<p>xx</p>
107 | 	    </div-->
108 | 	    <div class="controlBar">
109 | 	    	<input type="range" name="controlSlider" id="controlSlider"  min="1" max="100" value="60" onchange="setAnimationSpeed(this.value);" />
110 | 	    </div>
111 | 	</div>
112 | 	<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1256898616'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/z_stat.php%3Fid%3D1256898616' type='text/javascript'%3E%3C/script%3E"));</script>
113 | </body>
114 | </html>


--------------------------------------------------------------------------------
/graph/floyd.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3 | <head>
  4 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
  5 | 	<script src="../jquery.js"></script>
  6 | 	<script src="../index.js"></script>
  7 | 	<script type = "application/javascript" src = "../js/AnimationManager.js"> </script>
  8 |     <script type = "application/javascript" src = "../js/ObjectManager.js"> </script>
  9 |     <script type = "application/javascript" src = "../js/AnimatedObject.js"> </script>
 10 |     <script type = "application/javascript" src = "../js/AnimatedCircle.js"> </script>
 11 | 	<script type = "application/javascript" src = "../js/AnimatedHighlightCircle.js"> </script>
 12 |     <script type = "application/javascript" src = "../js/AnimatedLine.js"> </script>
 13 |     <script type = "application/javascript" src = "../js/AnimatedLabel.js"> </script>
 14 |     <script type = "application/javascript" src = "../js/AnimatedRectangle.js"> </script>
 15 |     <script type = "application/javascript" src = "../js/AnimatedPointer.js"> </script>
 16 | 	<script type = "application/javascript" src = "../js/AnimatedHighlightRectangle.js"> </script>
 17 |     <script type = "application/javascript" src = "../js/Algorithm.js"> </script>
 18 |     <script type = "application/javascript" src = "../js/Floyd.js"> </script>
 19 | 	<link rel="shortcut icon" href="../favicon.ico" />
 20 | 	<link rel="stylesheet" href="../css/index.css" />
 21 | 	<link rel="stylesheet" type="text/css" href="../css/graph.css"/>
 22 | 	<title>Floyd</title>
 23 | 	<script>
 24 |           var type=0;
 25 |           var index;
 26 | 	</script>
 27 | </head>
 28 | <body onload="init();ini();">
 29 | 	<div class="mainSub">
 30 | 		<div class="header">
 31 | 			<img class="logo" src="../image/logo.png" alt="logo" onclick="window.location.href='../index.html'" />
 32 | 			<div class="navList">
 33 | 			        <a href="graphDFSTraverse.html" class="nav" style="text-decoration:none;">DFS遍历</a>
 34 | 			        <a href="graphBFSTraverse.html" class="nav" style="text-decoration:none;">BFS遍历</a>
 35 | 			        <a href="prim.html" class="nav" style="text-decoration:none;">Prim</a>
 36 | 			        <a href="kruskal.html" class="nav" style="text-decoration:none;">Kruskal</a>
 37 | 			        <a href="dijkstra.html" class="nav" style="text-decoration:none;">Dijkstra</a>
 38 | 			        <a href="floyd.html" class="nav selected" style="text-decoration:none;">Floyd</a>
 39 | 			</div>
 40 | 		</div>
 41 | 		<div class="showBox" width="1000" height="500" style="overflow: scroll;">
 42 | 		   <canvas id="drawing" width="2000" height="1000">Canvas</canvas>
 43 | 		</div>
 44 | 		<div class="dijStartHide">
 45 | 			<img src="../image/arrow_white_right.png" alt="" />
 46 | 		</div>
 47 | 		<div class="dijStarts">
 48 | 			<p class="r1">生成随机图</p>
 49 | 			<p class="r2">增删边</p>
 50 | 			<p class="r3">运行Floyd</p>
 51 | 			<p class="r4">选项</p>
 52 | 		</div>
 53 | 		<div class="peakDijNum subX1">
 54 | 			<span>顶点数量</span>
 55 | 			<input type="text" class="peakDijNumber"/>
 56 | 		</div>
 57 | 		<div class="createDijGraph subX1">
 58 | 			<p>生成随机图</p>
 59 | 		</div>
 60 | 		<div class="startDijPeak subX2"> 
 61 | 			<span>起点</span>
 62 | 			<input type="text" class="startDijNumber"/>
 63 | 		</div>
 64 | 		<div class="endDijPeak subX2">
 65 | 			<span>终点</span>
 66 | 			<input type="text" class="endDijNumber"/>
 67 | 		</div>
 68 | 		<div class="weightDij subX2">
 69 | 			<span>权重</span>
 70 | 			<input type="text" class="weightDijNumber"/>
 71 | 		</div>
 72 | 		<div class="addDijEdge subX2">
 73 | 			<p>添加边</p>
 74 | 		</div>
 75 |         <div class="deleteDijEdge subX2">
 76 | 			<p>删除边</p>
 77 | 		</div>
 78 | 		<!--div class="runDijPeak subX3">
 79 | 			<span>起始顶点</span>
 80 | 			<input type="text" class="runDijNumber"/>
 81 | 		</div-->
 82 | 		<div class="runTraverse subX3 Floyd">
 83 | 			<p>Run Floyd</p>
 84 | 		</div>
 85 | 		<div class="dirDijGraph subX4">
 86 | 		  <form>
 87 | 			<input type="radio" name="dir" class="radio1" value='1'><span>有向图</span>
 88 | 			<input type="radio" name="dir" class="radio2" value='0'><span>无向图</span>
 89 | 		  </form>
 90 | 		</div>
 91 | 		<div class="stateHide">
 92 | 			<img src="../image/arrow_white_right.png" alt="" />
 93 | 		</div>
 94 | 		<div class="state">
 95 | 			<p></p>
 96 | 		</div>
 97 | 		<!--div class="codeHide">
 98 | 			<img src="../image/arrow_white_right.png" alt="" />
 99 | 		</div>
100 | 		<div class="codes">
101 | 			<p>xx</p>
102 | 			<p>xx</p>
103 | 			<p>xx</p>
104 | 			<p>xx</p>
105 | 			<p>xx</p>
106 | 			<p>xx</p>
107 | 	    </div-->
108 | 	    <div class="controlBar">
109 | 	    	<input type="range" name="controlSlider" id="controlSlider"  min="1" max="100" value="60" onchange="setAnimationSpeed(this.value);" />
110 | 	    </div>
111 | 	</div>
112 | 	<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1256898616'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/z_stat.php%3Fid%3D1256898616' type='text/javascript'%3E%3C/script%3E"));</script>
113 | </body>
114 | </html>


--------------------------------------------------------------------------------
/graph/graphBFSTraverse.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3 | <head>
  4 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
  5 | 	<script src="../jquery.js"></script>
  6 | 	<script src="../index.js"></script>
  7 | 	<script type = "application/javascript" src = "../js/AnimationManager.js"> </script>
  8 |     <script type = "application/javascript" src = "../js/ObjectManager.js"> </script>
  9 |     <script type = "application/javascript" src = "../js/AnimatedObject.js"> </script>
 10 |     <script type = "application/javascript" src = "../js/AnimatedCircle.js"> </script>
 11 | 	<script type = "application/javascript" src = "../js/AnimatedHighlightCircle.js"> </script>
 12 |     <script type = "application/javascript" src = "../js/AnimatedLine.js"> </script>
 13 |     <script type = "application/javascript" src = "../js/AnimatedLabel.js"> </script>
 14 |     <script type = "application/javascript" src = "../js/AnimatedRectangle.js"> </script>
 15 |     <script type = "application/javascript" src = "../js/AnimatedPointer.js"> </script>
 16 | 	<script type = "application/javascript" src = "../js/AnimatedHighlightRectangle.js"> </script>
 17 |     <script type = "application/javascript" src = "../js/Algorithm.js"> </script>
 18 |     <script type = "application/javascript" src = "../js/BFS.js"> </script>
 19 | 	<link rel="shortcut icon" href="../favicon.ico" />
 20 | 	<link rel="stylesheet" href="../css/index.css" />
 21 | 	<link rel="stylesheet" type="text/css" href="../css/graph.css"/>
 22 | 	<title>图遍历</title>
 23 | 	<script>
 24 |           var type=0;
 25 |           var index;
 26 | 	</script>
 27 | </head>
 28 | <body onload="init();ini();">
 29 | 	<div class="mainSub">
 30 | 		<div class="header">
 31 | 			<img class="logo" src="../image/logo.png" alt="logo" onclick="window.location.href='../index.html'" />
 32 | 			<div class="navList">
 33 | 			        <a href="graphDFSTraverse.html" class="nav" style="text-decoration:none;">DFS遍历</a>
 34 | 			        <a href="graphBFSTraverse.html" class="nav selected" style="text-decoration:none;">BFS遍历</a>
 35 | 			        <a href="prim.html" class="nav" style="text-decoration:none;">Prim</a>
 36 | 			        <a href="kruskal.html" class="nav" style="text-decoration:none;">Kruskal</a>
 37 | 			        <a href="dijkstra.html" class="nav"style="text-decoration:none;">Dijkstra</a>
 38 | 					<a href="floyd.html" class="nav" style="text-decoration:none;">Floyd</a>
 39 | 			</div>
 40 | 		</div>
 41 | 		<div class="showBox" width="1000" height="500" style="overflow: scroll;">
 42 | 		   <canvas id="drawing" width="2000" height="1000">Canvas</canvas>
 43 | 		</div>
 44 | 		<div class="graphStartHide">
 45 | 			<img src="../image/arrow_white_right.png" alt="" />
 46 | 		</div>
 47 | 		<div class="graphDFSStarts">
 48 | 			<p class="r1">生成随机图</p>
 49 | 			<p class="r2">增删边</p>
 50 | 			<p class="r3">运行BFS</p>
 51 | 			<p class="r4">选项</p>
 52 | 		</div>
 53 | 		<div class="peakNum subX1">
 54 | 			<span>顶点数量</span>
 55 | 			<input type="text" class="peakNumber"/>
 56 | 		</div>
 57 | 		<div class="createGraph subX1">
 58 | 			<p>生成随机图</p>
 59 | 		</div>
 60 | 		<div class="startPeak subX2"> 
 61 | 			<span>起点</span>
 62 | 			<input type="text" class="startNumber"/>
 63 | 		</div>
 64 | 		<div class="endPeak subX2">
 65 | 			<span>终点</span>
 66 | 			<input type="text" class="endNumber"/>
 67 | 		</div>
 68 | 		<div class="weight subX2">
 69 | 			<span>权重</span>
 70 | 			<input type="text" class="weightNumber"/>
 71 | 		</div>
 72 | 		<div class="addEdge subX2">
 73 | 			<p>添加边</p>
 74 | 		</div>
 75 |         <div class="deleteEdge subX2">
 76 | 			<p>删除边</p>
 77 | 		</div>
 78 | 		<div class="runPeak subX3">
 79 | 			<span>BFS起始顶点</span>
 80 | 			<input type="text" class="runNumber"/>
 81 | 		</div>
 82 | 		<div class="runTraverse subX3 BFS">
 83 | 			<p>Run BFS</p>
 84 | 		</div>
 85 | 		<div class="selection subX4">
 86 | 			<input type="checkbox" name="displayWeight" id="displayWeight"/><span>显示边权重</span>
 87 | 		</div>
 88 | 		<div class="dirGraph subX4">
 89 | 		  <form>
 90 | 			<input type="radio" name="dir" class="radio1" value='1'><span>有向图</span>
 91 | 			<input type="radio" name="dir" class="radio2" value='0'><span>无向图</span>
 92 | 		  </form>
 93 | 		</div>
 94 | 		<div class="stateHide">
 95 | 			<img src="../image/arrow_white_right.png" alt="" />
 96 | 		</div>
 97 | 		<div class="state">
 98 | 			<p></p>
 99 | 		</div>
100 | 		<!--div class="codeHide">
101 | 			<img src="../image/arrow_white_right.png" alt="" />
102 | 		</div>
103 | 		<div class="codes">
104 | 			<p>xx</p>
105 | 			<p>xx</p>
106 | 			<p>xx</p>
107 | 			<p>xx</p>
108 | 			<p>xx</p>
109 | 			<p>xx</p>
110 | 	    </div-->
111 | 	    <div class="controlBar">
112 | 	    	<input type="range" name="controlSlider" id="controlSlider"  min="1" max="100" value="60" onchange="setAnimationSpeed(this.value);" />
113 | 	    </div>
114 | 	</div>
115 | 	<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1256898616'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/z_stat.php%3Fid%3D1256898616' type='text/javascript'%3E%3C/script%3E"));</script>
116 | </body>
117 | </html>


--------------------------------------------------------------------------------
/graph/graphDFSTraverse.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3 | <head>
  4 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
  5 | 	<script src="../jquery.js"></script>
  6 | 	<script src="../index.js"></script>
  7 | 	<script type = "application/javascript" src = "../js/AnimationManager.js"> </script>
  8 |     <script type = "application/javascript" src = "../js/ObjectManager.js"> </script>
  9 |     <script type = "application/javascript" src = "../js/AnimatedObject.js"> </script>
 10 |     <script type = "application/javascript" src = "../js/AnimatedCircle.js"> </script>
 11 | 	<script type = "application/javascript" src = "../js/AnimatedHighlightCircle.js"> </script>
 12 |     <script type = "application/javascript" src = "../js/AnimatedLine.js"> </script>
 13 |     <script type = "application/javascript" src = "../js/AnimatedLabel.js"> </script>
 14 |     <script type = "application/javascript" src = "../js/AnimatedRectangle.js"> </script>
 15 |     <script type = "application/javascript" src = "../js/AnimatedPointer.js"> </script>
 16 | 	<script type = "application/javascript" src = "../js/AnimatedHighlightRectangle.js"> </script>
 17 |     <script type = "application/javascript" src = "../js/Algorithm.js"> </script>
 18 |     <script type = "application/javascript" src = "../js/DFS.js"> </script>
 19 |     <link rel="shortcut icon" href="../favicon.ico" />
 20 | 	<link rel="stylesheet" href="../css/index.css" />
 21 | 	<link rel="stylesheet" type="text/css" href="../css/graph.css"/>
 22 | 	<title>图遍历</title>
 23 | 	<script>
 24 |           var type=0;
 25 |           var index;
 26 | 	</script>
 27 | </head>
 28 | <body onload="init();ini();">
 29 | 	<div class="mainSub">
 30 | 		<div class="header">
 31 | 			<img class="logo" src="../image/logo.png" alt="logo" onclick="window.location.href='../index.html'" />
 32 | 			<div class="navList">
 33 | 			        <a href="graphDFSTraverse.html" class="nav selected" style="text-decoration:none;">DFS遍历</a>
 34 | 			        <a href="graphBFSTraverse.html" class="nav" style="text-decoration:none;">BFS遍历</a>
 35 | 			        <a href="prim.html" class="nav" style="text-decoration:none;">Prim</a>
 36 | 			        <a href="kruskal.html" class="nav" style="text-decoration:none;">Kruskal</a>
 37 | 			        <a href="dijkstra.html" class="nav"style="text-decoration:none;">Dijkstra</a>
 38 | 					<a href="floyd.html" class="nav" style="text-decoration:none;">Floyd</a>
 39 | 			</div>
 40 | 		</div>
 41 | 		<div class="showBox" width="1000" height="500" style="overflow: scroll;">
 42 | 		   <canvas id="drawing" width="2000" height="1000">Canvas</canvas>
 43 | 		</div>
 44 | 		<div class="graphStartHide">
 45 | 			<img src="../image/arrow_white_right.png" alt="" />
 46 | 		</div>
 47 | 		<div class="graphDFSStarts">
 48 | 			<p class="r1">生成随机图</p>
 49 | 			<p class="r2">增删边</p>
 50 | 			<p class="r3">运行DFS</p>
 51 | 			<p class="r4">选项</p>
 52 | 		</div>
 53 | 		<div class="peakNum subX1">
 54 | 			<span>顶点数量</span>
 55 | 			<input type="text" class="peakNumber"/>
 56 | 		</div>
 57 | 		<div class="createGraph subX1">
 58 | 			<p>生成随机图</p>
 59 | 		</div>
 60 | 		<div class="startPeak subX2"> 
 61 | 			<span>起点</span>
 62 | 			<input type="text" class="startNumber"/>
 63 | 		</div>
 64 | 		<div class="endPeak subX2">
 65 | 			<span>终点</span>
 66 | 			<input type="text" class="endNumber"/>
 67 | 		</div>
 68 | 		<div class="weight subX2">
 69 | 			<span>权重</span>
 70 | 			<input type="text" class="weightNumber"/>
 71 | 		</div>
 72 | 		<div class="addEdge subX2">
 73 | 			<p>添加边</p>
 74 | 		</div>
 75 |         <div class="deleteEdge subX2">
 76 | 			<p>删除边</p>
 77 | 		</div>
 78 | 		<div class="runPeak subX3">
 79 | 			<span>DFS起始顶点</span>
 80 | 			<input type="text" class="runNumber"/>
 81 | 		</div>
 82 | 		<div class="runTraverse subX3 DFS">
 83 | 			<p>Run DFS</p>
 84 | 		</div>
 85 | 		<div class="selection subX4">
 86 | 			<input type="checkbox" name="displayWeight" id="displayWeight"/><span>显示边权重</span>
 87 | 		</div>
 88 | 		<div class="dirGraph subX4">
 89 | 		  <form>
 90 | 			<input type="radio" name="dir" class="radio1" value='1'><span>有向图</span>
 91 | 			<input type="radio" name="dir" class="radio2" value='0'><span>无向图</span>
 92 | 		  </form>
 93 | 		</div>
 94 | 		<div class="stateHide">
 95 | 			<img src="../image/arrow_white_right.png" alt="" />
 96 | 		</div>
 97 | 		<div class="state">
 98 | 			<p></p>
 99 | 		</div>
100 | 		<!--div class="codeHide">
101 | 			<img src="../image/arrow_white_right.png" alt="" />
102 | 		</div>
103 | 		<div class="codes">
104 | 			<p>xx</p>
105 | 			<p>xx</p>
106 | 			<p>xx</p>
107 | 			<p>xx</p>
108 | 			<p>xx</p>
109 | 			<p>xx</p>
110 | 	    </div-->
111 | 	</div>
112 | 	<div class="controlBar">
113 |     	<input type="range" name="controlSlider" id="controlSlider"  min="1" max="100" value="60" onchange="setAnimationSpeed(this.value);" />
114 | 	</div>
115 | 	<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1256898616'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/z_stat.php%3Fid%3D1256898616' type='text/javascript'%3E%3C/script%3E"));</script>
116 | </body>
117 | </html>


--------------------------------------------------------------------------------
/graph/kruskal.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3 | <head>
  4 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
  5 | 	<script src="../jquery.js"></script>
  6 | 	<script src="../index.js"></script>
  7 | 	<script type = "application/javascript" src = "../js/AnimationManager.js"> </script>
  8 |     <script type = "application/javascript" src = "../js/ObjectManager.js"> </script>
  9 |     <script type = "application/javascript" src = "../js/AnimatedObject.js"> </script>
 10 |     <script type = "application/javascript" src = "../js/AnimatedCircle.js"> </script>
 11 | 	<script type = "application/javascript" src = "../js/AnimatedHighlightCircle.js"> </script>
 12 |     <script type = "application/javascript" src = "../js/AnimatedLine.js"> </script>
 13 |     <script type = "application/javascript" src = "../js/AnimatedLabel.js"> </script>
 14 |     <script type = "application/javascript" src = "../js/AnimatedRectangle.js"> </script>
 15 |     <script type = "application/javascript" src = "../js/AnimatedPointer.js"> </script>
 16 | 	<script type = "application/javascript" src = "../js/AnimatedHighlightRectangle.js"> </script>
 17 | 	<script type = "application/javascript" src = "../js/StateBox.js"> </script>
 18 |     <script type = "application/javascript" src = "../js/Algorithm.js"> </script>
 19 |     <script type = "application/javascript" src = "../js/Kruskal.js"> </script>
 20 |     <link rel="shortcut icon" href="../favicon.ico" />
 21 | 	<link rel="stylesheet" href="../css/index.css" />
 22 | 	<link rel="stylesheet" type="text/css" href="../css/graph.css"/>
 23 | 	<title>Kruskal算法</title>
 24 | 	<script>
 25 |           var type=0;
 26 |           var index;
 27 | 	</script>
 28 | </head>
 29 | <body onload="init();ini();">
 30 | 	<div class="mainSub">
 31 | 		<div class="header">
 32 | 			<img class="logo" src="../image/logo.png" alt="logo" onclick="window.location.href='../index.html'" />
 33 | 			<div class="navList">
 34 | 			        <a href="graphDFSTraverse.html" class="nav" style="text-decoration:none;">DFS遍历</a>
 35 | 			        <a href="graphBFSTraverse.html" class="nav" style="text-decoration:none;">BFS遍历</a>
 36 | 			        <a href="prim.html" class="nav" style="text-decoration:none;">Prim</a>
 37 | 			        <a href="kruskal.html" class="nav selected" style="text-decoration:none;">Kruskal</a>
 38 | 			        <a href="dijkstra.html" class="nav"style="text-decoration:none;">Dijkstra</a>
 39 | 					<a href="floyd.html" class="nav" style="text-decoration:none;">Floyd</a>
 40 | 			</div>
 41 | 		</div>
 42 | 		<div class="showBox" width="1000" height="500" style="overflow: scroll;">
 43 | 		   <canvas id="drawing" width="2000" height="1000">Canvas</canvas>
 44 | 		</div>
 45 | 		<div class="kruStartHide">
 46 | 			<img src="../image/arrow_white_right.png" alt="" />
 47 | 		</div>
 48 | 		<div class="kruStarts">
 49 | 			<p class="r1">生成随机图</p>
 50 | 			<p class="r2">增删边</p>
 51 | 			<p class="r3">运行Kruskal</p>
 52 | 		</div>
 53 | 		<div class="peakKruNum subX1">
 54 | 			<span>顶点数量</span>
 55 | 			<input type="text" class="peakKruNumber"/>
 56 | 		</div>
 57 | 		<div class="createKruGraph subX1">
 58 | 			<p>生成随机图</p>
 59 | 		</div>
 60 | 		<div class="startKruPeak subX2"> 
 61 | 			<span>起点</span>
 62 | 			<input type="text" class="startKruNumber"/>
 63 | 		</div>
 64 | 		<div class="endKruPeak subX2">
 65 | 			<span>终点</span>
 66 | 			<input type="text" class="endKruNumber"/>
 67 | 		</div>
 68 | 		<div class="weightKru subX2">
 69 | 			<span>权重</span>
 70 | 			<input type="text" class="weightKruNumber"/>
 71 | 		</div>
 72 | 		<div class="addKruEdge subX2">
 73 | 			<p>添加边</p>
 74 | 		</div>
 75 |         <div class="deleteKruEdge subX2">
 76 | 			<p>删除边</p>
 77 | 		</div>
 78 | 		<div class="runTraverse subX3 Kruskal">
 79 | 			<p>Run Kruskal</p>
 80 | 		</div>
 81 | 		<div class="stateHide">
 82 | 			<img src="../image/arrow_white_right.png" alt="" />
 83 | 		</div>
 84 | 		<div class="state">
 85 | 			<p></p>
 86 | 		</div>
 87 | 		<!--div class="codeHide">
 88 | 			<img src="../image/arrow_white_right.png" alt="" />
 89 | 		</div>
 90 | 		<div class="codes">
 91 | 			<p>xx</p>
 92 | 			<p>xx</p>
 93 | 			<p>xx</p>
 94 | 			<p>xx</p>
 95 | 			<p>xx</p>
 96 | 			<p>xx</p>
 97 | 	    </div-->
 98 | 	    <div class="controlBar">
 99 | 	    	<input type="range" name="controlSlider" id="controlSlider"  min="1" max="100" value="60" onchange="setAnimationSpeed(this.value);" />
100 | 	    </div>
101 | 	</div>
102 | 	<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1256898616'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/z_stat.php%3Fid%3D1256898616' type='text/javascript'%3E%3C/script%3E"));</script>
103 | </body>
104 | </html>


--------------------------------------------------------------------------------
/graph/prim.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3 | <head>
  4 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
  5 | 	<script src="../jquery.js"></script>
  6 | 	<script src="../index.js"></script>
  7 | 	<script type = "application/javascript" src = "../js/AnimationManager.js"> </script>
  8 |     <script type = "application/javascript" src = "../js/ObjectManager.js"> </script>
  9 |     <script type = "application/javascript" src = "../js/AnimatedObject.js"> </script>
 10 |     <script type = "application/javascript" src = "../js/AnimatedCircle.js"> </script>
 11 | 	<script type = "application/javascript" src = "../js/AnimatedHighlightCircle.js"> </script>
 12 |     <script type = "application/javascript" src = "../js/AnimatedLine.js"> </script>
 13 |     <script type = "application/javascript" src = "../js/AnimatedLabel.js"> </script>
 14 |     <script type = "application/javascript" src = "../js/AnimatedRectangle.js"> </script>
 15 |     <script type = "application/javascript" src = "../js/AnimatedPointer.js"> </script>
 16 | 	<script type = "application/javascript" src = "../js/AnimatedHighlightRectangle.js"> </script>
 17 |     <script type = "application/javascript" src = "../js/Algorithm.js"> </script>
 18 |     <script type = "application/javascript" src = "../js/Prim.js"> </script>
 19 | 	<link rel="shortcut icon" href="../favicon.ico" />
 20 | 	<link rel="stylesheet" href="../css/index.css" />
 21 | 	<link rel="stylesheet" type="text/css" href="../css/graph.css"/>
 22 | 	<title>Prim算法</title>
 23 | 	<script>
 24 |           var type=0;
 25 |           var index;
 26 | 	</script>
 27 | </head>
 28 | <body onload="init();ini();">
 29 | 	<div class="mainSub">
 30 | 		<div class="header">
 31 | 			<img class="logo" src="../image/logo.png" alt="logo" onclick="window.location.href='../index.html'" />
 32 | 			<div class="navList">
 33 | 			        <a href="graphDFSTraverse.html" class="nav" style="text-decoration:none;">DFS遍历</a>
 34 | 			        <a href="graphBFSTraverse.html" class="nav" style="text-decoration:none;">BFS遍历</a>
 35 | 			        <a href="prim.html" class="nav selected" style="text-decoration:none;">Prim</a>
 36 | 			        <a href="kruskal.html" class="nav" style="text-decoration:none;">Kruskal</a>
 37 | 			        <a href="dijkstra.html" class="nav"style="text-decoration:none;">Dijkstra</a>
 38 | 					<a href="floyd.html" class="nav" style="text-decoration:none;">Floyd</a>
 39 | 			</div>
 40 | 		</div>
 41 | 		<div class="showBox" width="1000" height="500" style="overflow: scroll;">
 42 | 		   <canvas id="drawing" width="2000" height="1000">Canvas</canvas>
 43 | 		</div>
 44 | 		<div class="primStartHide">
 45 | 			<img src="../image/arrow_white_right.png" alt="" />
 46 | 		</div>
 47 | 		<div class="primStarts">
 48 | 			<p class="r1">生成随机图</p>
 49 | 			<p class="r2">增删边</p>
 50 | 			<p class="r3">运行Prim</p>
 51 | 		</div>
 52 | 		<div class="peakPrimNum subX1">
 53 | 			<span>顶点数量</span>
 54 | 			<input type="text" class="peakPrimNumber"/>
 55 | 		</div>
 56 | 		<div class="createPrimGraph subX1">
 57 | 			<p>生成随机图</p>
 58 | 		</div>
 59 | 		<div class="startPrimPeak subX2"> 
 60 | 			<span>起点</span>
 61 | 			<input type="text" class="startPrimNumber"/>
 62 | 		</div>
 63 | 		<div class="endPrimPeak subX2">
 64 | 			<span>终点</span>
 65 | 			<input type="text" class="endPrimNumber"/>
 66 | 		</div>
 67 | 		<div class="weightPrim subX2">
 68 | 			<span>权重</span>
 69 | 			<input type="text" class="weightPrimNumber"/>
 70 | 		</div>
 71 | 		<div class="addPrimEdge subX2">
 72 | 			<p>添加边</p>
 73 | 		</div>
 74 |         <div class="deletePrimEdge subX2">
 75 | 			<p>删除边</p>
 76 | 		</div>
 77 | 		<div class="runPrimPeak subX3">
 78 | 			<span>起始顶点</span>
 79 | 			<input type="text" class="runPrimNumber"/>
 80 | 		</div>
 81 | 		<div class="runTraverse subX3 Prim">
 82 | 			<p>Run Prim</p>
 83 | 		</div>
 84 | 		<div class="stateHide">
 85 | 			<img src="../image/arrow_white_right.png" alt="" />
 86 | 		</div>
 87 | 		<div class="state">
 88 | 			<p></p>
 89 | 		</div>
 90 | 		<!--div class="codeHide">
 91 | 			<img src="../image/arrow_white_right.png" alt="" />
 92 | 		</div>
 93 | 		<div class="codes">
 94 | 			<p>xx</p>
 95 | 			<p>xx</p>
 96 | 			<p>xx</p>
 97 | 			<p>xx</p>
 98 | 			<p>xx</p>
 99 | 			<p>xx</p>
100 | 	    </div-->
101 | 	    <div class="controlBar">
102 | 	    	<input type="range" name="controlSlider" id="controlSlider"  min="1" max="100" value="60" onchange="setAnimationSpeed(this.value);" />
103 | 	    </div>
104 | 	</div>
105 | 	<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1256898616'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/z_stat.php%3Fid%3D1256898616' type='text/javascript'%3E%3C/script%3E"));</script>
106 | </body>
107 | </html>


--------------------------------------------------------------------------------
/image/arrow_black_right.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kinlog/visualgo/6de698a608295cd48981cf0272896abcd03d818c/image/arrow_black_right.png


--------------------------------------------------------------------------------
/image/arrow_white_right.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kinlog/visualgo/6de698a608295cd48981cf0272896abcd03d818c/image/arrow_white_right.png


--------------------------------------------------------------------------------
/image/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kinlog/visualgo/6de698a608295cd48981cf0272896abcd03d818c/image/logo.png


--------------------------------------------------------------------------------
/image/logo_old.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kinlog/visualgo/6de698a608295cd48981cf0272896abcd03d818c/image/logo_old.png


--------------------------------------------------------------------------------
/image/main_page.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kinlog/visualgo/6de698a608295cd48981cf0272896abcd03d818c/image/main_page.png


--------------------------------------------------------------------------------
/image/二叉树.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kinlog/visualgo/6de698a608295cd48981cf0272896abcd03d818c/image/二叉树.jpg


--------------------------------------------------------------------------------
/image/图.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kinlog/visualgo/6de698a608295cd48981cf0272896abcd03d818c/image/图.jpg


--------------------------------------------------------------------------------
/image/字符串.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kinlog/visualgo/6de698a608295cd48981cf0272896abcd03d818c/image/字符串.jpg


--------------------------------------------------------------------------------
/image/排序.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kinlog/visualgo/6de698a608295cd48981cf0272896abcd03d818c/image/排序.jpg


--------------------------------------------------------------------------------
/image/线性表.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kinlog/visualgo/6de698a608295cd48981cf0272896abcd03d818c/image/线性表.jpg


--------------------------------------------------------------------------------
/js/Algorithm.js:
--------------------------------------------------------------------------------
  1 | // JavaScript Document
  2 | // 算法基类
  3 | // 在算法控制区域添加控件的函数
  4 | function addLabelToAlgorithmBar(labelName)
  5 | {
  6 |     var element = document.createTextNode(labelName);
  7 | 	
  8 | 	var tableEntry = document.createElement("td");	
  9 | 	tableEntry.appendChild(element);
 10 | 	
 11 | 	var controlBar = document.getElementById("AlgorithmSpecificControls");
 12 | 	
 13 |     controlBar.appendChild(tableEntry);
 14 | 	return element;
 15 | }
 16 | /* changed */
 17 | // select 标签
 18 | function addSelectToAlgorithmBar(optionList) {
 19 | 	var element = document.createElement("select");
 20 | 	for (var i=0; i<optionList.length; i++) {
 21 | 		element.options.add(new Option (optionList[i], optionList[i]) );
 22 | 	}
 23 | 
 24 | 	var controlBar = document.getElementById("AlgorithmSpecificControls");
 25 | 	
 26 |     controlBar.appendChild(element);
 27 | 	return element;	
 28 | }
 29 | 
 30 | // checkbox 勾选框
 31 | function addCheckboxToAlgorithmBar(boxLabel)
 32 | {	
 33 | 	var element = document.createElement("input");
 34 | 
 35 |     element.setAttribute("type", "checkbox");
 36 |     element.setAttribute("value", boxLabel);
 37 | 	
 38 |     var label = document.createTextNode(boxLabel);
 39 | 	
 40 | 	var tableEntry = document.createElement("td");	
 41 | 	tableEntry.appendChild(element);
 42 | 	tableEntry.appendChild(label);
 43 | 	
 44 |     var controlBar = document.getElementById("AlgorithmSpecificControls");
 45 | 	
 46 |     //Append the element in page (in span).
 47 |     controlBar.appendChild(tableEntry);
 48 | 	return element;
 49 | }
 50 | 
 51 | // radio button 单选
 52 | function addRadioButtonGroupToAlgorithmBar(buttonNames, groupName)
 53 | {
 54 | 	var buttonList = [];
 55 | 	var newTable = document.createElement("table");
 56 | 		
 57 | 	for (var i = 0; i < buttonNames.length; i++)
 58 | 	{
 59 | 		var midLevel = document.createElement("tr");
 60 | 		var bottomLevel = document.createElement("td");
 61 | 		
 62 | 		var button = document.createElement("input");
 63 | 		button.setAttribute("type", "radio");
 64 | 		button.setAttribute("name", groupName);
 65 | 		button.setAttribute("value", buttonNames[i]);
 66 | 		bottomLevel.appendChild(button);
 67 | 		midLevel.appendChild(bottomLevel);
 68 | 		var txtNode = document.createTextNode(" " + buttonNames[i]); 
 69 | 		bottomLevel.appendChild(txtNode);
 70 | 		newTable.appendChild(midLevel);	
 71 | 		buttonList.push(button);
 72 | 	}
 73 | 	
 74 | 	var topLevelTableEntry = document.createElement("td");
 75 | 	topLevelTableEntry.appendChild(newTable);
 76 | 	
 77 | 	var controlBar = document.getElementById("AlgorithmSpecificControls");
 78 | 	controlBar.appendChild(topLevelTableEntry);
 79 | 	
 80 | 	return buttonList
 81 | }
 82 | 
 83 | 
 84 | function addInputToAlgorithmBar(type, name) {
 85 | 	
 86 |     var element = document.createElement("input");
 87 | 	
 88 |     element.setAttribute("type", type);
 89 |     element.setAttribute("value", name);
 90 |     element.setAttribute("name", name);
 91 | 	if (type == "text") {
 92 | 		element.setAttribute("size","5");
 93 | 	}
 94 | 	
 95 | 	var tableEntry = document.createElement("td");
 96 | 	
 97 | 	tableEntry.appendChild(element);
 98 | 	
 99 | 	
100 |     var controlBar = document.getElementById("AlgorithmSpecificControls");
101 | 	
102 |     //Append the element in page (in span).
103 |     controlBar.appendChild(tableEntry);
104 | 	return element;
105 | 	
106 | }
107 | 
108 | var Algorithm = function() {
109 | }
110 | 
111 | // 初始化
112 | Algorithm.prototype.init = function(animManager, width, height) {
113 | 	this.animationManager = animManager ; // 动画
114 | 	this.canvasWidth = width ; // 画布宽度
115 | 	this.canvasHeight = height ; // 画布高度
116 | 	this.commands = [] ; // 命令行
117 | }
118 | 
119 | // 完成动作
120 | Algorithm.prototype.implementAction = function(func, val) {
121 | 	var retVal = func(val);
122 | 	this.animationManager.startNewAnimation(retVal);
123 | }
124 | 
125 | // commands生成函数
126 | Algorithm.prototype.cmd = function() {
127 | 	var command = arguments[0];
128 | 	for(i = 1; i < arguments.length; i++)
129 | 	{
130 | 		command = command + "<cry>" + String(arguments[i]);
131 | 	}
132 | 	this.commands.push(command);
133 | }	
134 | 
135 | 
136 | 
137 | 
138 | 
139 | 
140 | 
141 | 
142 | 
143 | 


--------------------------------------------------------------------------------
/js/AnimatedCircle.js:
--------------------------------------------------------------------------------
 1 | // JavaScript Document
 2 | // 圆类（继承AnimatedObject）
 3 | var AnimatedCircle = function(objectID, label, radius) {
 4 | 	this.objectID = objectID ; // 物体ID
 5 | 	this.label = label ; // 标签
 6 | 	this.radius = radius ; // 半径
 7 | 	this.addToScene = true ; // 是否加入画布
 8 | }
 9 | 
10 | // 继承基类并且确定构造函数
11 | AnimatedCircle.prototype = new AnimatedObject() ;
12 | AnimatedCircle.prototype.constructor = AnimatedCircle ;
13 | 
14 | // 画图
15 | AnimatedCircle.prototype.draw = function(ctx) {
16 | 	ctx.beginPath() ;
17 | 	// 设置透明度
18 | 	ctx.globalAlpha = 1.0 ;
19 | 	// 画背景
20 | 	ctx.arc(this.x, this.y, this.radius, 0, 2*Math.PI, false) ;
21 | 	ctx.fillStyle = this.backgroundColor ;
22 | 	ctx.fill() ;
23 | 	// 画外框
24 | 	ctx.arc(this.x, this.y, this.radius, 0, 2*Math.PI, false) ;
25 | 	ctx.strokeStyle = this.foregroundColor ;
26 | 	ctx.lineWidth = 2 ;
27 | 	ctx.stroke() ;
28 | 	// 画文字
29 | 	ctx.font = "10px Arial" ;
30 | 	ctx.textAlign = "center" ;
31 | 	ctx.textBaseline = "middle" ;
32 | 	ctx.fillStyle = this.foregroundColor ;
33 | 	ctx.fillText(this.label, this.x, this.y) ;
34 | 	// 判断是否需要画高亮的圆
35 | 	if(this.highlighted) {
36 | 		ctx.beginPath() ;
37 | 		// 设置透明度
38 | 		ctx.globalAlpha = this.alpha;
39 | 		// 画背景
40 | 		ctx.arc(this.x, this.y, parseInt(this.radius), 0, 2*Math.PI, false) ;
41 | 		ctx.fillStyle = this.highlightColor ;
42 | 		ctx.fill() ;
43 | 	}
44 | }
45 | 
46 | // 获得箭头的头部坐标
47 | AnimatedCircle.prototype.getArrowHeadPoint = function(fromX, fromY) {
48 | 	var xVec = parseInt(this.x - fromX) ;
49 | 	var yVec = parseInt(this.y - fromY) ;
50 | 	var len = Math.sqrt(xVec * xVec + yVec * yVec) ;
51 | 	var deltaX = this.radius * ( xVec / len ) ;
52 | 	var deltaY = this.radius * ( yVec / len ) ;
53 | 	return [this.x-deltaX, this.y-deltaY] ;
54 | } 
55 | 
56 | // 获得箭头的尾部坐标
57 | AnimatedCircle.prototype.getArrowTailPoint = function(fromX, fromY) {
58 | 	return this.getArrowHeadPoint(fromX, fromY) ;
59 | }


--------------------------------------------------------------------------------
/js/AnimatedHighlightCircle.js:
--------------------------------------------------------------------------------
 1 | // JavaScript Document
 2 | // 动画高亮圆形
 3 | var AnimatedHighlightCircle = function(objectID, radius) {
 4 | 	this.objectID = objectID ; // 物体的ID
 5 | 	this.radius = radius ; // 半径
 6 | 	this.thickness = 3 ; // 宽度
 7 | }
 8 | 
 9 | // 继承和构造函数
10 | AnimatedHighlightCircle.prototype = new AnimatedObject() ;
11 | AnimatedHighlightCircle.prototype.constructor = AnimatedHighlightCircle ;
12 | 
13 | // 画图
14 | AnimatedHighlightCircle.prototype.draw = function(ctx) {
15 | 	ctx.beginPath() ;
16 | 	// 设置透明度
17 | 	ctx.globalAlpha = 1.0 ;
18 | 	// 画外框
19 | 	ctx.arc(this.x, this.y, parseInt(this.radius)+parseInt(this.thickness), 0, 2*Math.PI, false) ;
20 | 	ctx.strokeStyle = this.foregroundColor ;
21 | 	ctx.lineWidth = this.thickness + 1 ;
22 | 	ctx.stroke() ;
23 | }


--------------------------------------------------------------------------------
/js/AnimatedHighlightRectangle.js:
--------------------------------------------------------------------------------
 1 | // JavaScript Document
 2 | // 动画高亮矩形
 3 | var AnimatedHighlightRectangle = function(objectID, width, height, xJust, yJust) {
 4 | 	this.objectID = objectID ; // 物体的ID
 5 | 	this.width = width ; // 宽
 6 | 	this.height = height ; // 高
 7 | 	this.xJustify = xJust ;
 8 | 	this.yJustify = yJust ;
 9 | 	this.thickness = 3 ; // 宽度
10 | }
11 | 
12 | // 继承和构造函数
13 | AnimatedHighlightRectangle.prototype = new AnimatedObject() ;
14 | AnimatedHighlightRectangle.prototype.constructor = AnimatedHighlightRectangle ;
15 | 
16 | // 画图
17 | AnimatedHighlightRectangle.prototype.draw = function(ctx) {
18 | 	var startX ; // 左上角的X坐标
19 | 	var startY ; // 左上角的Y坐标
20 | 	// 通过justX和justY来计算左上角点的坐标和文字的坐标
21 | 	if(this.xJustify.toUpperCase() == 'LEFT') {
22 | 		startX = this.x ;
23 | 	}
24 | 	else if(this.xJustify.toUpperCase() == 'CENTER') {
25 | 		startX = this.x - this.width/2 ;
26 | 	}
27 | 	else if(this.xJustify.toUpperCase() == 'RIGHT') {
28 | 		startX = this.x - this.width ;
29 | 	}
30 | 	if(this.yJustify.toUpperCase() == 'TOP') {
31 | 		startY = this.y ;
32 | 	}
33 | 	else if(this.yJustify.toUpperCase() == 'CENTER') {
34 | 		startY = this.y - this.height/2 ;
35 | 	}
36 | 	else if(this.yJustify.toUpperCase() == 'BOTTOM') {
37 | 		startY = this.y - this.height ;
38 | 	}
39 | 	ctx.beginPath() ;
40 | 	// 设置透明度
41 | 	ctx.globalAlpha = 1.0 ;
42 | 	// 画外框
43 | 	ctx.moveTo(startX - parseInt(this.highlightDiff), startY - parseInt(this.highlightDiff)) ;
44 | 	ctx.lineTo(startX+this.width + parseInt(this.highlightDiff), startY - parseInt(this.highlightDiff)) ;
45 | 	ctx.lineTo(startX+this.width + parseInt(this.highlightDiff), startY+this.height + parseInt(this.highlightDiff)) ;
46 | 	ctx.lineTo(startX - parseInt(this.highlightDiff), startY+this.height + parseInt(this.highlightDiff)) ;
47 | 	ctx.lineTo(startX - parseInt(this.highlightDiff), startY - parseInt(this.highlightDiff)) ;
48 | 	ctx.strokeStyle = '#FF6347' ;
49 | 	ctx.lineWidth = this.highlightDiff+1 ;
50 | 	ctx.stroke() ;
51 | }


--------------------------------------------------------------------------------
/js/AnimatedLabel.js:
--------------------------------------------------------------------------------
 1 | // JavaScript Document
 2 | // 标签类（继承AnimatedObject）
 3 | var AnimatedLabel = function(objectID, label) {
 4 | 	this.objectID = objectID ; // 物体ID
 5 | 	this.label = label ; // 标签
 6 | }
 7 | 
 8 | // 继承基类并且确定构造函数
 9 | AnimatedLabel.prototype = new AnimatedObject() ;
10 | AnimatedLabel.prototype.constructor = AnimatedLabel ;
11 | 
12 | // 画图
13 | AnimatedLabel.prototype.draw = function(ctx) {
14 | 	ctx.beginPath() ;
15 | 	// 设置透明度
16 | 	ctx.globalAlpha = 1.0 ;
17 | 	// 画文字
18 | 	ctx.font = "10px Arial" ;
19 | 	ctx.textAlign = "center" ;
20 | 	ctx.textBaseline = "middle" ;
21 | 	ctx.fillStyle = this.foregroundColor ;
22 | 	ctx.fillText(this.label, this.x, this.y) ;
23 | }


--------------------------------------------------------------------------------
/js/AnimatedLine.js:
--------------------------------------------------------------------------------
  1 | // JavaScript Document
  2 | // 动画直线类
  3 | var AnimatedLine = function(n1, n2, color, curve, directed, weight) {
  4 | 	this.Node1 = n1 ; // 起始节点
  5 | 	this.Node2 = n2 ; // 终止节点
  6 | 	this.foregroundColor = color ; // 前景色
  7 | 	this.curve = curve ;		// 表示连线的弯曲程度，其中0表示直线，取值介于 (-1,1) 
  8 | 	this.directed = directed ; // 是否有向
  9 | 	this.weight = weight ; // 边权
 10 | 	this.arrowHeight = 8 ; // 高度
 11 | 	this.arrowWidth = 4 ; // 宽度
 12 | }
 13 | 
 14 | // 继承基类并且确定构造函数
 15 | AnimatedLine.prototype = new AnimatedObject() ;
 16 | AnimatedLine.prototype.constructor = AnimatedLine ;
 17 | 
 18 | // 画箭头
 19 | AnimatedLine.prototype.drawArrow = function(ctx, controlX, controlY) {
 20 | 	var endPoint = this.Node2.getArrowTailPoint(this.Node1.x, this.Node1.y) ;
 21 | 	ctx.beginPath() ;
 22 | 	//var xVec = parseInt(this.Node1.x - this.Node2.x) ;
 23 | 	//var yVec = parseInt(this.Node1.y - this.Node2.y) ;
 24 | 	var xVec = controlX - endPoint[0];
 25 | 	var yVec = controlY - endPoint[1];
 26 | 	var len = Math.sqrt(xVec * xVec + yVec * yVec) ;
 27 | 	xVec = 1.0 * xVec / len ;
 28 | 	yVec = 1.0 * yVec / len ;
 29 | 	
 30 | 	ctx.moveTo(endPoint[0], endPoint[1]) ;
 31 | 	ctx.lineTo(endPoint[0] + xVec*this.arrowHeight - yVec*this.arrowWidth, endPoint[1] + yVec*this.arrowHeight + xVec*this.arrowWidth);
 32 | 	ctx.lineTo(endPoint[0] + xVec*this.arrowHeight + yVec*this.arrowWidth, endPoint[1] + yVec*this.arrowHeight - xVec*this.arrowWidth);
 33 | 	ctx.lineTo(endPoint[0], endPoint[1]) ;
 34 | 	ctx.closePath() ;
 35 | 	ctx.strokeStyle = this.foregroundColor ;
 36 | 	ctx.lineWidth = 1 ;
 37 | 	ctx.stroke();
 38 | 	ctx.fillStyle = this.foregroundColor ;
 39 | 	ctx.fill();
 40 | 	if(this.highlighted) {
 41 | 		ctx.beginPath() ;
 42 | 		// 设置透明度
 43 | 		ctx.globalAlpha = this.alpha;
 44 | 		// 画背景
 45 | 		ctx.moveTo(endPoint[0], endPoint[1]) ;
 46 | 		ctx.lineTo(endPoint[0] + xVec*this.arrowHeight - yVec*this.arrowWidth, endPoint[1] + yVec*this.arrowHeight + xVec*this.arrowWidth);
 47 | 		ctx.lineTo(endPoint[0] + xVec*this.arrowHeight + yVec*this.arrowWidth, endPoint[1] + yVec*this.arrowHeight - xVec*this.arrowWidth);
 48 | 		ctx.lineTo(endPoint[0], endPoint[1]) ;
 49 | 		ctx.closePath() ;
 50 | 		ctx.fillStyle = this.highlightColor ;
 51 | 		ctx.fill() ;
 52 | 	}
 53 | }
 54 | 
 55 | // 画直线
 56 | AnimatedLine.prototype.draw = function(ctx) {
 57 | 	ctx.beginPath() ;
 58 | 	// 设置透明度
 59 | 	ctx.globalAlpha = 1.0 ;
 60 | 	// 画直线
 61 |  	var startPoint = this.Node1.getArrowHeadPoint(this.Node2.x, this.Node2.y) ;
 62 | 	var endPoint = this.Node2.getArrowTailPoint(this.Node1.x, this.Node1.y) ;
 63 | 	
 64 | 	var deltaX = endPoint[0] - startPoint[0];
 65 | 	var deltaY = endPoint[1] - startPoint[1];
 66 | 	var midX = (deltaX) / 2.0 + startPoint[0];
 67 | 	var midY = (deltaY) / 2.0 + startPoint[1];
 68 | 	
 69 | 	var controlX = midX - deltaY * this.curve;
 70 | 	var controlY = midY + deltaX * this.curve;
 71 | 	//alert("control:"+controlX+","+controlY);
 72 | 	// 画边
 73 |     ctx.moveTo(startPoint[0], startPoint[1]) ;
 74 | 	//ctx.lineTo(endPoint[0], endPoint[1]) ;
 75 | 	ctx.quadraticCurveTo(controlX, controlY, endPoint[0], endPoint[1]);	// 画二次贝塞尔曲线
 76 | 	ctx.strokeStyle = this.foregroundColor ;
 77 | 	ctx.lineWidth = 2 ;
 78 | 	ctx.stroke() ;
 79 | 	// 是否高亮
 80 | 	if(this.highlighted) {
 81 | 		ctx.beginPath() ;
 82 | 		// 设置透明度
 83 | 		ctx.globalAlpha = this.alpha;
 84 | 		// 画背景
 85 | 		ctx.moveTo(startPoint[0], startPoint[1]) ;
 86 | 		ctx.quadraticCurveTo(controlX, controlY, endPoint[0], endPoint[1]);	// 画二次贝塞尔曲线
 87 | 		ctx.strokeStyle = this.highlightColor ;
 88 | 		ctx.lineWidth = 4 ;
 89 | 		ctx.stroke() ;
 90 | 	}
 91 | 	
 92 | 	var labelPosX = 0.25* startPoint[0] + 0.5*controlX + 0.25*endPoint[0]; 
 93 | 	var labelPosY =  0.25* startPoint[1] + 0.5*controlY + 0.25*endPoint[1]; 
 94 | 	var midLen = Math.sqrt(deltaY*deltaY + deltaX*deltaX);
 95 | 	if (midLen != 0)
 96 | 	{
 97 | 		labelPosX +=  (- deltaY * (this.curve>0 ? 1 : -1))  / midLen * 10;
 98 | 		labelPosY += ( deltaX * (this.curve>0 ? 1 : -1))  / midLen * 10;
 99 | 	}
100 | 	// 边上写上权重
101 | 	ctx.textAlign = 'center';
102 | 	ctx.font = '10px sans-serif';
103 | 	ctx.textBaseline   = 'middle'; 
104 | 	ctx.fillStyle = this.foregroundColor;
105 | 	ctx.fillText(this.weight, labelPosX, labelPosY);
106 | 		
107 | 	
108 | 	if(this.directed) {
109 | 		// 画箭头
110 | 		this.drawArrow(ctx, controlX, controlY ) ;
111 | 	}
112 | }
113 | 


--------------------------------------------------------------------------------
/js/AnimatedObject.js:
--------------------------------------------------------------------------------
 1 | // JavaScript Document
 2 | // 运动物体类的基类
 3 | function AnimatedObject() {
 4 | 	this.init() ;
 5 | }
 6 | 
 7 | // 初始化
 8 | AnimatedObject.prototype.init = function() {
 9 | 	this.foregroundColor = '#FF0000' ; // 前景色
10 | 	this.backgroundColor = '#00FF00' ; // 背景色
11 | 	this.highlightColor = '#FF6347' ; // 高亮色
12 | 	this.highlighted = false ; // 是否高亮
13 | 	this.highlightDiff = 3 ; // 高亮范围
14 | 	this.objectID = -1 ; // 物体ID
15 | 	this.label = "" ; // 标签
16 | 	this.x = 0 ; // x坐标 
17 | 	this.y = 0 ; // y坐标
18 | 	this.alpha = 0 ; // 透明度
19 | 	this.labelColor = '#FF0000' ; // 标签颜色
20 | 	this.addToScene = false ; // 是否添加到屏幕
21 | 	this.animationMaxFrame = animationMaxFrame ; // 最大动画帧数
22 | }
23 | 
24 | // 设置标签
25 | AnimatedObject.prototype.setLabel = function(label) {
26 | 	this.label = label ;
27 | }
28 | 
29 | // 设置前景色
30 | AnimatedObject.prototype.setForegroundColor = function(color) {
31 | 	this.foregroundColor = color ;
32 | }
33 | 
34 | // 设置背景色
35 | AnimatedObject.prototype.setBackgroundColor = function(color) {
36 | 	this.backgroundColor = color ;
37 | }
38 | 
39 | // 设置高亮色
40 | AnimatedObject.prototype.setHighlightColor = function(color) {
41 | 	this.highlightColor = color ;
42 | }
43 | 
44 | // 设置高亮
45 | AnimatedObject.prototype.setHighlight = function(value) {
46 | 	this.highlighted = value ;
47 | }
48 | 
49 | // 获得高亮
50 | AnimatedObject.prototype.getHighlight = function() {
51 | 	return this.highlighted ;
52 | }
53 | 
54 | // 强调高亮
55 | AnimatedObject.prototype.pluseHighlight = function(framenum) {
56 | 	if(this.highlighted) {
57 | 		var alpha = 1.0 ;
58 | 		if(framenum <= this.animationMaxFrame/2) {
59 | 			alpha = (2.0 * framenum / this.animationMaxFrame) ;
60 | 		}
61 | 		else {
62 | 			alpha = 2 -  (2.0 * framenum / this.animationMaxFrame) ;
63 | 		}
64 | 		//alpha = 1.0*framenum / this.animationMaxFrame ;
65 | 		this.setAlpha(alpha) ;
66 | 	}
67 | }
68 | 
69 | // 设置透明度
70 | AnimatedObject.prototype.setAlpha = function(alpha) {
71 | 	this.alpha = alpha ;
72 | }
73 | 
74 | // 获得透明度
75 | AnimatedObject.prototype.getAlpha = function() {
76 | 	return this.alpha ;
77 | }
78 | 
79 | // 获得箭头的头部的坐标
80 | AnimatedObject.prototype.getArrowHeadPoint = function(fromX, fromY) {
81 | }
82 | 
83 | // 获得箭头的尾部的坐标
84 | AnimatedObject.prototype.getArrowTailPoint = function(fromX, fromY) {
85 | }
86 | 


--------------------------------------------------------------------------------
/js/AnimatedPointer.js:
--------------------------------------------------------------------------------
 1 | // JavaScript Document
 2 | // 动画指针
 3 | var AnimatedPointer = function(objectID, label, length, direction) {
 4 | 	this.objectID = objectID ; // 物体的ID
 5 | 	this.label = label ; // 物体的标签
 6 | 	this.length = length ; // 箭头长度
 7 | 	this.direction = direction ; // 方向
 8 | 	this.height = 8 ; // 高度
 9 | 	this.width = 6 ; // 宽度
10 | 	this.interval = 10 ; // 间距
11 | }
12 | 
13 | // 继承和构造函数
14 | AnimatedPointer.prototype = new AnimatedObject() ;
15 | AnimatedPointer.prototype.constructor = AnimatedPointer ;
16 | 
17 | // 画箭头
18 | AnimatedPointer.prototype.drawArrow = function(ctx) {
19 | 	ctx.beginPath() ;
20 | 	// 判断方向
21 | 	if(this.direction.toUpperCase() == 'UP') {
22 | 		ctx.moveTo(this.x, this.y) ;
23 | 		ctx.lineTo(parseInt(this.x-this.width), parseInt(this.y+this.height)) ;
24 | 		ctx.moveTo(this.x, this.y) ;
25 | 		ctx.lineTo(parseInt(this.x+this.width), parseInt(this.y+this.height)) ;
26 | 		ctx.moveTo(this.x, this.y) ;
27 | 		ctx.lineTo(this.x, parseInt(this.y+this.length)) ;
28 | 	}
29 | 	else if(this.direction.toUpperCase() == 'DOWN') {
30 | 		ctx.moveTo(this.x, this.y) ;
31 | 		ctx.lineTo(parseInt(this.x-this.width), parseInt(this.y-this.height)) ;
32 | 		ctx.moveTo(this.x, this.y) ;
33 | 		ctx.lineTo(parseInt(this.x+this.width), parseInt(this.y-this.height)) ;
34 | 		ctx.moveTo(this.x, this.y) ;
35 | 		ctx.lineTo(this.x, parseInt(this.y-this.length)) ;
36 | 	}
37 | 	else if(this.direction.toUpperCase() == 'LEFT') {
38 | 		ctx.moveTo(this.x, this.y) ;
39 | 		ctx.lineTo(parseInt(this.x+this.height), parseInt(this.y-this.width)) ;
40 | 		ctx.moveTo(this.x, this.y) ;
41 | 		ctx.lineTo(parseInt(this.x+this.height), parseInt(this.y+this.width)) ;
42 | 		ctx.moveTo(this.x, this.y) ;
43 | 		ctx.lineTo(parseInt(this.x+this.length), this.y) ;
44 | 	}
45 | 	else if(this.direction.toUpperCase() == 'RIGHT') {
46 | 		ctx.moveTo(this.x, this.y) ;
47 | 		ctx.lineTo(parseInt(this.x-this.height), parseInt(this.y-this.width)) ;
48 | 		ctx.moveTo(this.x, this.y) ;
49 | 		ctx.lineTo(parseInt(this.x-this.height), parseInt(this.y+this.width)) ;
50 | 		ctx.moveTo(this.x, this.y) ;
51 | 		ctx.lineTo(parseInt(this.x-this.length), this.y) ;
52 | 	}
53 | 	ctx.closePath() ;
54 | 	ctx.strokeStyle = this.foregroundColor ;
55 | 	ctx.lineWidth = 2 ;
56 | 	ctx.stroke();
57 | 	ctx.fillStyle = this.foregroundColor ;
58 | 	ctx.fill();
59 | }
60 | 
61 | // 画图
62 | AnimatedPointer.prototype.draw = function(ctx) {
63 | 	// 开始画图
64 | 	ctx.beginPath() ;
65 | 	// 设置透明度
66 | 	ctx.globalAlpha = 1.0 ;
67 | 	// 画箭头
68 | 	this.drawArrow(ctx) ;
69 | 	// 写文字
70 | 	ctx.font = "10px Arial" ;
71 | 	ctx.textAlign = "center" ;
72 | 	ctx.textBaseline = "middle" ;
73 | 	ctx.fillStyle = this.foregroundColor ;
74 | 	// 判断方向
75 | 	if(this.direction.toUpperCase() == 'UP') {
76 | 		ctx.fillText(this.label, this.x, parseInt(this.y+this.length+this.interval)) ;
77 | 	}
78 | 	else if(this.direction.toUpperCase() == 'DOWN') {
79 | 		ctx.fillText(this.label, this.x, parseInt(this.y-this.length-this.interval)) ;
80 | 	}
81 | 	else if(this.direction.toUpperCase() == 'LEFT') {
82 | 		ctx.fillText(this.label, parseInt(this.x-this.length-this.interval), this.y) ;
83 | 	}
84 | 	else if(this.direction.toUpperCase() == 'RIGHT') {
85 | 		ctx.fillText(this.label, parseInt(this.x+this.length+this.interval), this.y) ;
86 | 	}
87 | }


--------------------------------------------------------------------------------
/js/AnimatedRectangle.js:
--------------------------------------------------------------------------------
  1 | // JavaScript Document
  2 | // 动画矩形
  3 | var AnimatedRectangle = function(objectID, label, width, height, xJust, yJust) {
  4 | 	this.objectID = objectID ; // 物体的ID
  5 | 	this.label = label ; // 物体的标签
  6 | 	this.width = width ; // 宽度
  7 | 	this.height = height ; // 高度
  8 | 	this.xJustify = xJust ; // x位置信息
  9 | 	this.yJustify = yJust ; // y位置信息
 10 | 	this.addToScene = true ; // 是否加入画布
 11 | }
 12 | 
 13 | // 继承和构造函数
 14 | AnimatedRectangle.prototype = new AnimatedObject() ;
 15 | AnimatedRectangle.prototype.constructor = AnimatedRectangle ;
 16 | 
 17 | // 获得最左侧x坐标
 18 | AnimatedRectangle.prototype.left = function() {
 19 | 	var xPos ;
 20 | 	if(this.xJustify == 'center') {
 21 | 		xPos = parseInt(this.x - this.width/2) ;
 22 | 	}
 23 | 	else if(this.xJustify == 'left') {
 24 | 		xPos = this.x ;
 25 | 	}
 26 | 	else if(this.xJustify == 'right') {
 27 | 		xPos = parseInt(this.x - this.width) ;
 28 | 	}
 29 | 	return xPos ;
 30 | }
 31 | 
 32 | // 获得最右侧x坐标
 33 | AnimatedRectangle.prototype.right = function() {
 34 | 	var xPos ;
 35 | 	if(this.xJustify == 'center') {
 36 | 		xPos = parseInt(this.x + this.width/2) ;
 37 | 	}
 38 | 	else if(this.xJustify == 'left') {
 39 | 		xPos = parseInt(this.x + this.width) ;
 40 | 	}
 41 | 	else if(this.xJustify == 'right') {
 42 | 		xPos = this.x ;
 43 | 	}
 44 | 	return xPos ;
 45 | }
 46 | 
 47 | // 获得最上侧y坐标
 48 | AnimatedRectangle.prototype.top = function() {
 49 | 	var yPos ;
 50 | 	if(this.yJustify == 'center') {
 51 | 		yPos = parseInt(this.y - this.height/2) ;
 52 | 	}
 53 | 	else if(this.yJustify == 'top') {
 54 | 		yPos = this.y ;
 55 | 	}
 56 | 	else if(this.yJustify == 'bottom') {
 57 | 		yPos = parseInt(this.y - this.height) ;  ;
 58 | 	}
 59 | 	return yPos ;
 60 | }
 61 | 
 62 | // 获得最下侧y坐标
 63 | AnimatedRectangle.prototype.bottom = function() {
 64 | 	var yPos ;
 65 | 	if(this.yJustify == 'center') {
 66 | 		yPos = parseInt(this.y + this.height/2) ;
 67 | 	}
 68 | 	else if(this.yJustify == 'top') {
 69 | 		yPos = parseInt(this.y + this.height) ;
 70 | 	}
 71 | 	else if(this.yJustify == 'bottom') {
 72 | 		yPos = this.y ;
 73 | 	}
 74 | 	return yPos ;
 75 | }
 76 | 
 77 | // 获得中间的x坐标
 78 | AnimatedRectangle.prototype.centerX = function() {
 79 | 	var xPos ;
 80 | 	if(this.xJustify == 'center') {
 81 | 		xPos = this.x ;
 82 | 	}
 83 | 	else if(this.xJustify == 'left') {
 84 | 		xPos = parseInt(this.x + this.width/2) ;
 85 | 	}
 86 | 	else if(this.xJustify == 'right') {
 87 | 		xPos = parseInt(this.x - this.width/2) ;
 88 | 	}
 89 | 	return xPos ;
 90 | }
 91 | 
 92 | // 获得中间的y坐标
 93 | AnimatedRectangle.prototype.centerY = function() {
 94 | 	var yPos ;
 95 | 	if(this.yJustify == 'center') {
 96 | 		yPos = this.y ;
 97 | 	}
 98 | 	else if(this.yJustify == 'top') {
 99 | 		yPos = parseInt(this.y + this.height/2) ;
100 | 	}
101 | 	else if(this.yJustify == 'bottom') {
102 | 		yPos = parseInt(this.y - this.height/2) ;
103 | 	}
104 | 	return yPos ;
105 | }
106 | 
107 | // 画图
108 | AnimatedRectangle.prototype.draw = function(ctx) {
109 | 	var startX ; // 左上角的X坐标
110 | 	var startY ; // 左上角的Y坐标
111 | 	var labelX ; // 文字的X坐标
112 | 	var labelY ; // 文字的Y坐标
113 | 	// 通过justX和justY来计算左上角点的坐标和文字的坐标
114 | 	if(this.xJustify.toUpperCase() == 'LEFT') {
115 | 		startX = this.x ;
116 | 		labelX = this.x + this.width/2 ;
117 | 	}
118 | 	else if(this.xJustify.toUpperCase() == 'CENTER') {
119 | 		startX = this.x - this.width/2 ;
120 | 		labelX = this.x ;
121 | 	}
122 | 	else if(this.xJustify.toUpperCase() == 'RIGHT') {
123 | 		startX = this.x - this.width ;
124 | 		labelX = this.x - this.width/2 ;
125 | 	}
126 | 	if(this.yJustify.toUpperCase() == 'TOP') {
127 | 		startY = this.y ;
128 | 		labelY = this.y + this.height/2 ;
129 | 	}
130 | 	else if(this.yJustify.toUpperCase() == 'CENTER') {
131 | 		startY = this.y - this.height/2 ;
132 | 		labelY = this.y ;
133 | 	}
134 | 	else if(this.yJustify.toUpperCase() == 'BOTTOM') {
135 | 		startY = this.y - this.height ;
136 | 		labelY = this.y - this.height/2 ;
137 | 	}
138 | 	// 开始画图
139 | 	ctx.beginPath() ;
140 | 	// 设置透明度
141 | 	ctx.globalAlpha = 1.0 ;
142 | 	// 画背景
143 | 	ctx.moveTo(startX, startY) ;
144 | 	ctx.lineTo(startX+this.width, startY) ;
145 | 	ctx.lineTo(startX+this.width, startY+this.height) ;
146 | 	ctx.lineTo(startX, startY+this.height) ;
147 | 	ctx.fillStyle = this.backgroundColor ;
148 | 	ctx.fill() ;
149 | 	// 画外框
150 | 	ctx.moveTo(startX, startY) ;
151 | 	ctx.lineTo(startX+this.width, startY) ;
152 | 	ctx.lineTo(startX+this.width, startY+this.height) ;
153 | 	ctx.lineTo(startX, startY+this.height) ;
154 | 	ctx.lineTo(startX, startY) ;
155 | 	ctx.strokeStyle = this.foregroundColor ;
156 | 	ctx.lineWidth = 2 ;
157 | 	ctx.stroke() ;
158 | 	// 写文字
159 | 	ctx.font = "10px Arial" ;
160 | 	ctx.textAlign = "center" ;
161 | 	ctx.textBaseline = "middle" ;
162 | 	ctx.fillStyle = this.foregroundColor ;
163 | 	ctx.fillText(this.label, labelX, labelY) ;
164 | 	// 判断是否需要画高亮的圆
165 | 	if(this.highlighted) {
166 | 		ctx.beginPath() ;
167 | 		// 设置透明度
168 | 		ctx.globalAlpha = this.alpha;
169 | 		// 画背景
170 | 		ctx.moveTo(startX , startY) ;
171 | 		ctx.lineTo(startX+this.width , startY) ;
172 | 		ctx.lineTo(startX+this.width , startY+this.height) ;
173 | 		ctx.lineTo(startX , startY+this.height) ;
174 | 		ctx.lineTo(startX, startY) ;
175 | 		ctx.fillStyle = this.highlightColor ;
176 | 		ctx.fill() ;
177 | 	}
178 | }
179 | 
180 | // 获得箭头的头部坐标
181 | AnimatedRectangle.prototype.getArrowHeadPoint = function(fromX, fromY) {
182 | 	var xDelta ;
183 | 	var yDelta ;
184 | 	var xPos ;
185 | 	var yPos ;
186 | 	// x
187 | 	if(this.left() > fromX) {
188 | 		xDelta = this.left() - fromX ;
189 | 		xPos = this.left() ;
190 | 	}
191 | 	else if(fromX > this.right()) {
192 | 		xDelta = fromX - this.right() ;
193 | 		xPos = this.right() ;
194 | 	}
195 | 	else {
196 | 		xDelta = 0 ;
197 | 		xPos = this.centerX() ;
198 | 	}
199 | 	// y
200 | 	if(this.bottom() > fromY) {
201 | 		yDelta = this.bottom() - fromY ;
202 | 		yPos = this.top() ;
203 | 	}
204 | 	else if(fromY > this.top()) {
205 | 		yDelta = fromY - this.top() ;
206 | 		yPos = this.bottom() ;
207 | 	}
208 | 	else {
209 | 		yDelta = 0 ;
210 | 		yPos = this.centerY() ;
211 | 	}
212 | 	// 比较delta
213 | 	if(xDelta > yDelta) {
214 | 		yPos = this.centerY() ;
215 | 	}
216 | 	else {
217 | 		xPos = this.centerX() ;
218 | 	}
219 | 	return [xPos, yPos] ;
220 | }
221 | 
222 | // 获得箭头的尾部坐标
223 | AnimatedRectangle.prototype.getArrowTailPoint = function(fromX, fromY) {
224 | 	return this.getArrowHeadPoint(fromX, fromY) ;
225 | }


--------------------------------------------------------------------------------
/js/Factorial.js:
--------------------------------------------------------------------------------
  1 | // JavaScript Document
  2 | 
  3 | var currentFactorial;
  4 | // 初始化函数
  5 | function init() {
  6 | 	objectManager = new ObjectManager() ;
  7 | 	animationManager = new AnimationManager(objectManager) ;
  8 | 	currentFactorial = new Factorial(animationManager, drawing.width, drawing.height) ;
  9 | }
 10 | 
 11 | // 阶乘
 12 | var Factorial = function(animManager, width, height) {
 13 | 	this.init(animManager, width, height) ;
 14 | 	// this.initControls() ; // 初始化控件
 15 | 	this.initAttributes() ; // 初始化属性
 16 | }
 17 | // 继承与构造
 18 | Factorial.prototype = new Algorithm();
 19 | Factorial.prototype.constructor = Factorial;
 20 | 
 21 | // 初始化控件
 22 | Factorial.prototype.initControls = function() {
 23 | 	addLabelToAlgorithmBar("节点数值");
 24 | 	this.insertField = addInputToAlgorithmBar("text", "");
 25 | 	this.factorialButton =	addInputToAlgorithmBar("button", "阶乘");
 26 | 	this.factorialButton.onclick = this.factorialCallBack.bind(this) ;
 27 | }
 28 | 
 29 | // 初始化属性
 30 | Factorial.prototype.initAttributes = function() {
 31 | 	// 逻辑部分
 32 | 	// 图形部分
 33 | 	this.objectIDStart = 1 ; // 图形的序号
 34 | 	this.objectIDCount = 0;	// 矩形数量
 35 | 	this.rectWidth = 50;
 36 | 	this.rectHeight = 30;
 37 | 	this.rectInterval = 30;	// 矩形之间的间隔
 38 | 	this.X0 = 100;	// 画矩形起点X
 39 | 	this.Y0 = 250;	// 画矩形起点Y
 40 | 	this.lineCurve = 0;
 41 | 	this.firstRun = true;	// 是不是第一次求阶乘
 42 | 	
 43 | 	this.foregroundColor = '#1E90FF' ; // 前景色
 44 | 	this.backgroundColor = '#B0E0E6' ; // 背景色
 45 | 	this.tomato = '#FF6347' ; // tomato色
 46 | 	this.palegreen = '#32CD32' ; // palegreen色
 47 | 	// 初始化状态框
 48 | 	// this.implementAction(this.initStateBox.bind(this), "start");
 49 | }
 50 | 
 51 | // 初始化状态框
 52 | Factorial.prototype.initStateBox = function(state) {
 53 | 	// 创建状态框
 54 | 	{
 55 | 		this.cmd("CreateStateBox", 0, state, 20, 20, 400, 40) ;
 56 | 		this.cmd("SetForegroundColor", 0, this.foregroundColor) ;
 57 | 		this.cmd("SetBackgroundColor", 0, this.backgroundColor) ;
 58 | 		this.cmd("Step") ;
 59 | 	}
 60 | 	return this.commands ;
 61 | }
 62 | 
 63 | // 阶乘回调函数
 64 | Factorial.prototype.factorialCallBack = function(value) {
 65 | 	// var insertValue = this.insertField.value;
 66 | 	var insertValue = value;
 67 | 	if (insertValue != "")
 68 | 	{
 69 | 		// set text value
 70 | 		// this.insertField.value = "";
 71 | 		this.implementAction(this.CalFactorial.bind(this), parseInt(insertValue));
 72 | 	}
 73 | }
 74 | 
 75 | // 阶乘函数
 76 | Factorial.prototype.CalFactorial = function(value) {
 77 | 	var MINVALUE = 1;
 78 | 	var MAXVALUE = 10;
 79 | 	if (value > MAXVALUE) {
 80 | 		alert("输入数值过大，页面无法显示！（请输入"+MINVALUE+"-"+MAXVALUE+"）");
 81 | 		return this.commands;
 82 | 	}
 83 | 	if (value < MINVALUE) {
 84 | 		alert("输入数值过小，页面无法显示！（请输入"+MINVALUE+"-"+MAXVALUE+"）");
 85 | 		return this.commands;
 86 | 	}
 87 | 	// 第n(n>1)次运行需要把之前留下的矩形去掉
 88 | 	if ( !this.firstRun ) {
 89 | 		this.cmd("Delete", this.objectIDStart);
 90 | 		this.objectIDCount = 0;
 91 | 		this.cmd("Step");
 92 | 	}
 93 | 	// 计算阶乘
 94 | 	this.Factorial(value);
 95 | 	var count = 1;
 96 | 	for (var i = this.objectIDCount-1 ; i > 0 ;i-- ) {
 97 | 		count = count * (this.objectIDCount-i + 1);
 98 | 		if ( i >= 1 ) {
 99 | 			this.cmd("Step");
100 | 			this.cmd("Disconnect", this.objectIDStart + i-1, this.objectIDStart + i);
101 | 			this.cmd("Step");
102 | 			this.cmd("Connect",this.objectIDStart + i ,this.objectIDStart + i-1 , 
103 | 						this.foregroundColor, this.lineCurve, true, "x"+(value-i+1));
104 | 			this.cmd("Step");
105 | 			this.cmd("Move", this.objectIDStart + i, this.X0 + (i-1) * (this.rectWidth + this.rectInterval), this.Y0);
106 | 			this.cmd("Step");
107 | 			this.cmd("SetLabel", this.objectIDStart + i-1, count );
108 | 			this.cmd("Disconnect", this.objectIDStart + i, this.objectIDStart + i-1);
109 | 			
110 | 		}
111 | 		this.cmd("Delete", this.objectIDStart+i);
112 | 		this.cmd("Step");
113 | 	}
114 | 	this.firstRun = false;
115 | 	return this.commands ;
116 | }
117 | 
118 | Factorial.prototype.Factorial = function (value) {
119 | 	
120 | 	if (value ==0 ) {
121 | 		value = 1;
122 | 	}
123 | 	if (value == 1 ) {
124 | 		// 画矩形
125 | 		this.cmd("CreateRectangle", this.objectIDStart + this.objectIDCount, value, this.rectWidth, this.rectHeight, 
126 | 						'left', 'center', this.X0 + this.objectIDCount * (this.rectWidth + this.rectInterval), this.Y0 );
127 | 		this.cmd("SetForegroundColor", this.objectIDStart + this.objectIDCount, this.foregroundColor);
128 | 		this.cmd("SetBackgroundColor", this.objectIDStart + this.objectIDCount, this.backgroundColor);
129 | 	
130 | 		// 画连线
131 | 		if (this.objectIDCount != 0 ) {
132 | 			this.cmd("Connect", this.objectIDStart+this.objectIDCount-1, this.objectIDStart+this.objectIDCount, 
133 | 							this.foregroundColor, this.lineCurve, true, (value + 1) + 'x');
134 | 		}
135 | 		else {
136 | 			this.cmd("Step");
137 | 			this.cmd("Step");
138 | 		}
139 | 
140 | 		this.objectIDCount++;
141 | 
142 | 		return 1;
143 | 	}
144 | 	// 绘矩形
145 | 	this.cmd("CreateRectangle", this.objectIDStart + this.objectIDCount, value+"!", this.rectWidth, this.rectHeight, 
146 | 					'left', 'center', this.X0 + this.objectIDCount * (this.rectWidth + this.rectInterval), this.Y0 );
147 | 	this.cmd("SetForegroundColor", this.objectIDStart + this.objectIDCount, this.foregroundColor);
148 | 	this.cmd("SetBackgroundColor", this.objectIDStart + this.objectIDCount, this.backgroundColor);
149 | 	
150 | 	// 画连线
151 | 	if (this.objectIDCount != 0 ) {
152 | 		this.cmd("Connect", this.objectIDStart+this.objectIDCount-1, this.objectIDStart+this.objectIDCount, 
153 | 						this.foregroundColor, this.lineCurve, true, (value + 1) + 'x');
154 | 	}
155 | 	
156 | 	this.objectIDCount++;
157 | 	
158 | 	this.cmd("Step");
159 | 	
160 | 	return this.Factorial(value-1)*value;
161 | }
162 | 


--------------------------------------------------------------------------------
/js/Forest.js:
--------------------------------------------------------------------------------
 1 | // JavaScript Document
 2 | 
 3 | // 初始化函数
 4 | function init() {
 5 | 	objectManager = new ObjectManager() ;
 6 | 	animationManager = new AnimationManager(objectManager) ;
 7 | 	var currentForest = new Forest(animationManager, drawing.width, drawing.height) ;
 8 | }
 9 | 
10 | // 森林
11 | var Forest = function(animManager, width, height) {
12 | 	this.init(animManager, width, height) ;
13 | 	this.initControls() ; // 初始化控件
14 | 	this.initAttributes() ; // 初始化属性
15 | }
16 | // 继承与构造
17 | Forest.prototype = new Algorithm();
18 | Forest.prototype.constructor = Forest;
19 | 
20 | // 初始化控件
21 | Forest.prototype.initControls = function() {
22 | 	/*
23 | 	addLabelToAlgorithmBar("节点数值");
24 | 	this.insertField = addInputToAlgorithmBar("text", "");
25 | 	this.ForestButton =	addInputToAlgorithmBar("button", "阶乘");
26 | 	this.ForestButton.onclick = this.ForestCallBack.bind(this) ;
27 | 	*/
28 | }
29 | 
30 | // 初始化属性
31 | Forest.prototype.initAttributes = function() {
32 | 	// 逻辑部分
33 | 	// 图形部分
34 | 	this.objectID = 1 ; // 图形的序号
35 | 	this.foregroundColor = '#1E90FF' ; // 前景色
36 | 	this.backgroundColor = '#B0E0E6' ; // 背景色
37 | 	this.tomato = '#FF6347' ; // tomato色
38 | 	this.palegreen = '#32CD32' ; // palegreen色
39 | 	// 初始化状态框
40 | 	this.implementAction(this.initStateBox.bind(this), "start");
41 | }
42 | 
43 | // 初始化状态框
44 | Forest.prototype.initStateBox = function(state) {
45 | 	// 创建状态框
46 | 	{
47 | 		this.cmd("CreateStateBox", 0, state, 20, 20, 400, 40) ;
48 | 		this.cmd("SetForegroundColor", 0, this.foregroundColor) ;
49 | 		this.cmd("SetBackgroundColor", 0, this.backgroundColor) ;
50 | 		this.cmd("Step") ;
51 | 	}
52 | 	return this.commands ;
53 | }
54 | 
55 | // 阶乘回调函数
56 | Forest.prototype.ForestCallBack = function(event) {
57 | 	var insertValue = this.insertField.value;
58 | 	if (insertValue != "")
59 | 	{
60 | 		// set text value
61 | 		this.insertField.value = "";
62 | 		this.implementAction(this.CalForest.bind(this), insertValue);
63 | 	}
64 | }
65 | 
66 | // 阶乘函数
67 | Forest.prototype.CalForest = function(value) {
68 | 	return this.commands ;
69 | }
70 | 
71 | // 树的节点
72 | var TreeNode = function(objectID, value, x, y, leftChild, rightChild, parent) {
73 | 	this.objectID = objectID ; // 图形序号
74 | 	this.value = value ; // 值
75 | 	this.x = x ; // x坐标
76 | 	this.y = y ; // y坐标
77 | 	this.leftChild = leftChild ; // 左孩子
78 | 	this.rightChild = rightChild ; // 右孩子
79 | 	this.parent = parent ; // 父亲
80 | }
81 | 


--------------------------------------------------------------------------------
/js/Queue.js:
--------------------------------------------------------------------------------
  1 | // JavaScript Document
  2 | 
  3 | var currentQueue;
  4 | // 初始化函数
  5 | function init() {
  6 | 	objectManager = new ObjectManager() ;
  7 | 	animationManager = new AnimationManager(objectManager) ;
  8 | 	currentQueue = new Queue(animationManager, drawing.width, drawing.height) ;
  9 | }
 10 | 
 11 | // 队列
 12 | var Queue= function(animManager, width, height) {
 13 | 	this.init(animManager, width, height) ;
 14 | 	//this.initControls() ; // 初始化控件
 15 | 	this.initAttributes() ; // 初始化属性
 16 | }
 17 | // 继承与构造
 18 | Queue.prototype = new Algorithm();
 19 | Queue.prototype.constructor = Queue;
 20 | 
 21 | // 初始化控件
 22 | Queue.prototype.initControls = function() {
 23 | 	addLabelToAlgorithmBar("数组大小");
 24 | 	this.insertField_maxSize = addInputToAlgorithmBar("text", "");
 25 | 	this.initButton = addInputToAlgorithmBar("button", "初始化数组");
 26 | 	this.initButton.onclick = this.initCallBack.bind(this) ;
 27 | 	addLabelToAlgorithmBar("数值");
 28 | 	this.insertField_value = addInputToAlgorithmBar("text", "");
 29 | 	this.pushButton =addInputToAlgorithmBar("button", "入队");
 30 | 	this.pushButton.onclick = this.pushCallBack.bind(this) ;
 31 | 	this.popButton = addInputToAlgorithmBar("button", "出队");
 32 | 	this.popButton.onclick = this.popCallBack.bind(this) ;
 33 | }
 34 | 
 35 | // 初始化
 36 | Queue.prototype.initAttributes = function() {
 37 | 	// 逻辑部分ID
 38 | 	this.front = 0 ; // 头指针
 39 | 	this.rear =0;    //尾指针
 40 | 	// 图形部分
 41 | 	this.objectID = 1 ; // 图形的序号
 42 | 	this.width = 50 ; // 矩形的宽度
 43 | 	this.height = 50 ; // 矩形的高度
 44 | 	this.foregroundColor = '#1E90FF' ; // 前景色
 45 | 	this.backgroundColor = '#B0E0E6' ; // 背景色
 46 | 	this.startX = 150 ; // 开始的x坐标
 47 | 	this.startY = 150 ; // 开始的y坐标
 48 | 	this.startArrayY = 250 ; // 开始的数组的y坐标
 49 |     this.startArrowY = 300 ; // 开始的箭头的y坐标
 50 |     this.length = 30 ; // 箭头的长度
 51 | 	// this.implementAction(this.initStateBox.bind(this), "start") ;
 52 | }
 53 | 
 54 | 
 55 | // 初始化状态框
 56 | Queue.prototype.initStateBox = function(state) {
 57 | 	return this.commands ;
 58 | }
 59 | 
 60 | // 初始化回调函数
 61 | Queue.prototype.initCallBack = function(length) {
 62 | 	if (parseInt(length) > 0 && parseInt(length) <= 16)
 63 | 	{
 64 | 		this.implementAction(this.initArray.bind(this), length);
 65 | 	}
 66 | 	else{
 67 | 		alert("初始化数组长度应在1-16之间");
 68 | 	}
 69 | }
 70 | 
 71 | // 入队回调函数
 72 | Queue.prototype.pushCallBack = function(value) {
 73 | 	if (value.trim() != "") {
 74 | 		this.implementAction(this.enQueue.bind(this), value);
 75 | 	}
 76 | }
 77 | 
 78 | // 出队回调函数
 79 | Queue.prototype.popCallBack = function() {
 80 | 	this.implementAction(this.deQueue.bind(this), 0);
 81 | }
 82 | 
 83 | Queue.prototype.clearCanvas = function() {
 84 | 	// 清空数组
 85 | 	if(this.queue != null && this.queue != undefined) {
 86 | 		for(var i=0 ; i<this.queue.length ; i++) {
 87 | 			if (this.queue[i] != null) {
 88 | 				this.cmd("Delete", this.queue[i].objectID) ;
 89 | 			}
 90 | 		}
 91 | 		this.queue = null ;
 92 | 	}
 93 | 	// 清空元素
 94 | 	if(this.orderObjectID != null && this.orderObjectID!= undefined) {
 95 | 		for(var i=0 ; i<this.orderObjectID.length ; i++) {
 96 | 			this.cmd("Delete", this.orderObjectID[i]) ;
 97 | 		}
 98 | 		this.orderObjectID = null ;
 99 | 	}
100 | 	this.front = 0 ; // 头指针
101 | 	this.rear =0;    //尾指针
102 | }
103 | 
104 | // 初始化数组
105 | Queue.prototype.initArray = function(maxSize) {
106 | 	this.clearCanvas() ;
107 | 	this.maxSize = parseInt(maxSize) + 1 ; // 数组最大容量
108 | 	this.queue = new Array(this.maxSize) ; // 队列数组
109 | 	this.orderObjectID = new Array(this.maxSize) ; // 队列的物体
110 |     // 设置状态栏
111 | 	{
112 | 		this.cmd("SetState", "创建大小为"+this.maxSize+"的数组") ;
113 | 	} 
114 | 	for(var i=0 ; i<this.maxSize ; i++) {
115 | 		this.orderObjectID[i] = this.objectID;
116 | 		this.cmd("CreateRectangle", this.objectID, "", this.width, this.height, 
117 | 			'center', 'center', parseInt(this.startX+i*(this.width-1)), this.startArrayY) ;
118 | 		this.cmd("SetForegroundColor", this.objectID, this.foregroundColor) ;
119 | 		this.cmd("SetBackgroundColor", this.objectID, '#FFFFFF') ;
120 |                 this.orderObjectID[i] =this.objectID;
121 | 		this.objectID ++ ;
122 | 	}
123 | 	return this.commands ;
124 | }
125 | 	
126 | // 插入
127 | Queue.prototype.enQueue = function(value) {
128 | 	if (this.queue == null) {
129 | 		this.cmd("SetState", "请先创建队列");
130 | 		return this.commands;
131 | 	}
132 | 	if((this.rear+1)% this.maxSize==this.front) {
133 | 		this.cmd('SetState', "队列已满，不能继续入队");
134 | 		// alert('Already full!') ;
135 | 	}
136 | 	else {
137 | 		// 出现矩形
138 | 		{
139 | 			this.cmd("SetState", "创建值为"+value+"的数组元素") ;
140 | 			this.cmd("Step") ;
141 | 			this.cmd("CreateRectangle", this.objectID, value, this.width, this.height, 
142 | 				'center', 'center', this.startX, this.startY) ;
143 | 			this.cmd("SetForegroundColor", this.objectID, this.foregroundColor) ;
144 | 			this.cmd("SetBackgroundColor", this.objectID, this.backgroundColor) ;
145 | 			this.cmd("Step") ;
146 | 		}
147 | 		// 查找对应位置
148 | 		{
149 | 			this.cmd("SetState", "数组"+this.rear+"位置无元素, 可插入新元素") ;
150 | 			this.cmd("Step") ;
151 | 			this.cmd("SetHighlight", this.orderObjectID[this.rear], true) ;
152 | 			this.cmd("Step") ;
153 | 			this.cmd("SetHighlight", this.orderObjectID[this.rear], false) ;
154 | 			this.cmd("Step") ;
155 | 		}
156 | 		this.queue[this.rear] = new QueueNode(this.objectID, value, this.startX+this.rear*(this.width-1), this.startArrayY);
157 | 		// 新生成的节点插入
158 | 		{
159 | 			this.cmd("Move", this.queue[this.rear].objectID, this.queue[this.rear].x, this.queue[this.rear].y) ;
160 | 			this.cmd("Step") ;
161 | 		}
162 | 		this.objectID ++ ;
163 | 		this.rear=(this.rear +1)% this.maxSize ;
164 | 				
165 | 	}
166 | 	return this.commands ;
167 | }
168 | 	
169 | // 删除
170 | Queue.prototype.deQueue = function() {
171 | 	if (this.queue == null) {
172 | 		this.cmd("SetState", "请先创建队列");
173 | 		return this.commands;
174 | 	}
175 | 	if(this.front==this.rear) {
176 | 		this.cmd('SetState', '队列已空，不能继续出队');
177 | 		// alert('Already empty!') ;
178 | 	}
179 | 	else {
180 | 		// 查找对应位置
181 | 		{
182 | 			this.cmd("SetState", "在数组"+this.front+"位置删除新元素"+this.queue[this.front].value) ;
183 | 			this.cmd("Step") ;
184 | 			this.cmd("SetHighlight", this.queue[this.front].objectID, true) ;
185 | 			this.cmd("Step") ;
186 | 			this.cmd("SetHighlight", this.queue[this.front].objectID, false) ;
187 | 			this.cmd("Step") ;
188 | 		}
189 | 		var deleteObjectID = this.queue[this.front].objectID;
190 | 		//出队列 
191 | 		{
192 | 			this.cmd("Move", deleteObjectID, this.startX ,this.startY) ;
193 | 			this.cmd("Step") ;
194 | 			this.cmd("Delete", deleteObjectID) ;
195 | 			this.cmd("Step") ;
196 | 		    this.cmd("SetState", "删除成功") ;
197 | 			this.cmd("Step") ;
198 | 		}
199 | 		this.queue[this.front] = null;
200 | 		this.front=(this.front+1) % this.maxSize ;
201 | 	}
202 | 	return this.commands ;
203 | }
204 | 
205 | // 队列的节点
206 | var QueueNode = function(objectID, value, x, y) {
207 | 	this.objectID = objectID ; // 图形序号
208 | 	this.value = value ; // 值
209 | 	this.x = x ; // x坐标
210 | 	this.y = y ; // y坐标
211 | }
212 | 


--------------------------------------------------------------------------------
/js/SingleAnimation.js:
--------------------------------------------------------------------------------
1 | // JavaScript Document
2 | // 单步动画
3 | var SingleAnimation = function(objectID, fromX, fromY, toX, toY) {
4 | 	this.objectID = objectID ; // 物体的ID 
5 | 	this.fromX = fromX ; // 起点X
6 | 	this.fromY = fromY ; // 起点Y
7 | 	this.toX = toX ; // 终点X
8 | 	this.toY = toY ; // 终点Y
9 | }


--------------------------------------------------------------------------------
/js/Slider.js:
--------------------------------------------------------------------------------
 1 | setAnimationSpeed = function(value){
 2 | 	alert("hello");
 3 | 	alert(parent.timespan);
 4 | 	// range of value [1, 100]
 5 | 	value = parseInt(value)
 6 | 	if (value >=1 && value<=100 ) {
 7 | 		var min = 5;
 8 | 		var max = 50;
 9 | 		alert(timespan);
10 | 		timespan = parseInt(1.0*value/100*(max-min)+min);
11 | 		alert(timespan);
12 | 	}
13 | }


--------------------------------------------------------------------------------
/js/Stack.js:
--------------------------------------------------------------------------------
  1 | // JavaScript Document
  2 | 
  3 | var currentStack;
  4 | // 初始化函数
  5 | function init() {
  6 | 	objectManager = new ObjectManager() ;
  7 | 	animationManager = new AnimationManager(objectManager) ;
  8 | 	currentStack = new Stack(animationManager, drawing.width, drawing.height) ;
  9 | }
 10 | 
 11 | // 栈
 12 | var Stack = function(animManager, width, height) {
 13 | 	this.init(animManager, width, height) ;
 14 | 	//this.initControls() ; // 初始化控件
 15 | 	this.initAttributes() ; // 初始化属性
 16 | }
 17 | // 继承与构造
 18 | Stack.prototype = new Algorithm();
 19 | Stack.prototype.constructor = Stack;
 20 | 
 21 | // 初始化控件
 22 | Stack.prototype.initControls = function() {
 23 | 	addLabelToAlgorithmBar("数组大小");
 24 | 	this.insertField_maxSize = addInputToAlgorithmBar("text", "");
 25 | 	this.initButton = addInputToAlgorithmBar("button", "初始化数组");
 26 | 	this.initButton.onclick = this.initCallBack.bind(this) ;
 27 | 	addLabelToAlgorithmBar("数值");
 28 | 	this.insertField_value = addInputToAlgorithmBar("text", "");
 29 | 	this.pushButton =addInputToAlgorithmBar("button", "入栈");
 30 | 	this.pushButton.onclick = this.pushCallBack.bind(this) ;
 31 | 	this.popButton = addInputToAlgorithmBar("button", "出栈");
 32 | 	this.popButton.onclick = this.popCallBack.bind(this) ;
 33 | }
 34 | 
 35 | // 初始化
 36 | Stack.prototype.initAttributes = function() {
 37 | 	// 逻辑部分ID
 38 | 	this.head = -1; // 头指针
 39 | 	// 图形部分
 40 | 	this.objectID = 1 ; // 图形的序号
 41 | 	this.width = 50 ; // 矩形的宽度
 42 | 	this.height = 50 ; // 矩形的高度
 43 | 	this.foregroundColor = '#1E90FF' ; // 前景色
 44 | 	this.backgroundColor = '#B0E0E6' ; // 背景色
 45 | 	this.startX = 250 ; // 开始的x坐标
 46 | 	this.startY = 100 ; // 开始的y坐标
 47 | 	this.startArrayY = 100 ; // 开始的数组的y坐标
 48 | 	this.startArrayX = 400 ; // 开始的数组的x坐标
 49 | 	// this.initStateBox("栈大小的初始化范围 1-8");
 50 | }
 51 | 
 52 | // 初始化状态框
 53 | Stack.prototype.initStateBox = function(state) {
 54 | 	this.cmd("SetState", state);
 55 | }
 56 | 
 57 | // 初始化回调函数
 58 | Stack.prototype.initCallBack = function(length) {
 59 | 	if (parseInt(length) > 0 && parseInt(length) <= 8) {
 60 | 		this.implementAction(this.initArray.bind(this), length);
 61 | 	}
 62 | 	else {
 63 | 		alert("栈的大小应在1~8之间") ;
 64 | 	}
 65 | }
 66 | 
 67 | // 入栈回调函数
 68 | Stack.prototype.pushCallBack = function(value) {
 69 | 	if (value.trim() != "") {
 70 | 		this.implementAction(this.pushNode.bind(this), value.trim());
 71 | 	}
 72 | }
 73 | 
 74 | // 出栈回调函数
 75 | Stack.prototype.popCallBack = function() {
 76 | 	this.implementAction(this.popNode.bind(this), 0);
 77 | }
 78 |  
 79 | // 清空数组
 80 | Stack.prototype.clearCanvas = function() {      
 81 | 	for(var i=1 ; i<this.objectID ; i++) {
 82 | 		this.cmd("Delete", i) ;
 83 | 	}
 84 | 	this.objectID = 1 ;
 85 | 	this.head = -1; // 头指针
 86 | }
 87 | 
 88 | // 初始化数组
 89 | Stack.prototype.initArray = function(maxSize) {
 90 |     this.clearCanvas() ; // 删除所有数组
 91 | 	this.maxSize = maxSize ; // 数组最大容量
 92 | 	this.stack = new Array(maxSize) ; // 顺序表数组
 93 | 	this.orderObjectID = new Array(maxSize) ; // 顺序表的物体
 94 |         
 95 | 	// 设置状态栏
 96 | 	{
 97 | 		this.cmd("SetState", "创建大小为"+maxSize+"的数组") ;
 98 | 	} 
 99 |        
100 | 	for(var i=0 ; i<this.maxSize ; i++) {
101 | 		this.orderObjectID[i] =i;
102 | 		this.cmd("CreateRectangle", this.objectID, "", this.width, this.height, 
103 | 			'center', 'center',this.startArrayX ,  parseInt(this.startY+i*(this.width-1))) ;
104 | 		this.cmd("SetForegroundColor", this.objectID, this.foregroundColor) ;
105 | 		this.cmd("SetBackgroundColor", this.objectID, '#FFFFFF') ;
106 |         this.orderObjectID[i] =this.objectID;
107 | 		this.objectID ++ ;
108 | 		
109 | 	}
110 | 	return this.commands ;
111 | }
112 | 	
113 | // 入栈
114 | Stack.prototype.pushNode = function(value) {
115 | 	if (this.stack == null) {
116 | 		this.cmd("SetState", '请先创建栈');
117 | 		return this.commands;
118 | 	}
119 | 	if(this.head >= this.maxSize-1) {
120 | 		this.cmd("SetState", '栈已满，不能继续入栈');
121 | 		// alert('Already full!') ;
122 | 	}
123 | 	else {
124 | 		this.head ++ ;
125 | 		// 出现矩形
126 | 		{
127 | 			this.cmd("SetState", "创建值为"+value+"的数组元素") ;
128 | 			this.cmd("Step") ;
129 | 
130 | 			this.cmd("CreateRectangle", this.objectID, value, this.width, this.height, 
131 | 				'center', 'center', this.startX, this.startY) ;
132 | 			this.cmd("SetForegroundColor", this.objectID, this.foregroundColor) ;
133 | 			this.cmd("SetBackgroundColor", this.objectID, this.backgroundColor) ;
134 | 			this.cmd("Step") ;
135 | 		}
136 | 		// 查找对应位置
137 | 		{
138 | 			this.cmd("SetState", "数组"+this.head+"位置无元素, 可插入新元素") ;
139 | 			this.cmd("Step") ;
140 | 			this.cmd("SetHighlight",this.maxSize-this.head, true) ;
141 | 			this.cmd("Step") ;
142 | 			this.cmd("SetHighlight",this.maxSize-this.head, false) ;
143 | 			this.cmd("Step") ;
144 | 		}
145 | 		this.orderObjectID[this.maxSize-this.head] = this.objectID ;
146 | 		this.stack[this.head] = value ;
147 | 		// 新生成的节点插入
148 | 		{
149 | 			this.cmd("SetState", "在数组"+this.head+"位置插入新元素"+value) ;
150 | 			this.cmd("Step") ;
151 | 			this.cmd("Move", this.orderObjectID[this.maxSize-this.head], this.startArrayX,this.startY+(this.maxSize-this.head-1)*(this.width-1)) ;
152 | 			this.cmd("Step") ;
153 | 		}
154 | 		this.objectID ++ ;
155 | 	}
156 | 	return this.commands ;
157 | }
158 | 	
159 | // 弹栈
160 | Stack.prototype.popNode = function() {
161 | 	if (this.stack == null) {
162 | 		this.cmd("SetState", '请先创建栈');
163 | 		return this.commands;
164 | 	}
165 | 	if(this.head <= -1) {
166 | 		this.cmd("SetState", '栈已空，不能继续出栈');
167 | 		// alert('Already empty!') ;
168 | 	}
169 | 	else {
170 | 			// 查找对应位置
171 | 			{
172 |                 this.cmd("SetState", "在数组"+this.head+"位置删除新元素"+this.stack[this.head]) ;
173 | 				this.cmd("Step") ;
174 | 				this.cmd("SetHighlight", this.orderObjectID[this.maxSize-this.head], true) ;
175 | 				this.cmd("Step") ;
176 | 				this.cmd("SetHighlight", this.orderObjectID[this.maxSize-this.head], false) ;
177 | 				this.cmd("Step") ;
178 | 			}
179 | 			var deleteObjectID = this.orderObjectID[this.maxSize-this.head] ;
180 | 			this.head -- ;
181 | 			// 新生成的节点删除
182 | 			{
183 | 				this.cmd("Move", deleteObjectID, this.startX ,this.startY) ;
184 | 				this.cmd("Step") ;
185 | 				this.cmd("Delete", deleteObjectID) ;
186 | 				this.cmd("Step") ;
187 | 				this.cmd("SetState", "删除成功") ;
188 | 				this.cmd("Step") ;
189 | 			}
190 | 			//Stack.pop(this.head);
191 | 			//this.stack[this.head] = [] ;
192 | 			//this.head -- ;
193 | 			//this.stack[this.head] = 0;
194 | 		}
195 | 	return this.commands ;
196 | }
197 | 
198 | // 栈的节点
199 | var StackNode = function(objectID, value, x, y) {
200 | 	this.objectID = objectID ; // 图形序号
201 | 	this.value = value ; // 值
202 | 	this.x = x ; // x坐标
203 | 	this.y = y ; // y坐标
204 | }
205 | 


--------------------------------------------------------------------------------
/js/StateBox.js:
--------------------------------------------------------------------------------
 1 | // JavaScript Document
 2 | // 动画矩形
 3 | var StateBox = function(objectID, state, width, height) {
 4 | 	this.objectID = objectID ; // 物体的ID
 5 | 	this.state = state ; // 物体的标签
 6 | 	this.width = width ; // 宽度
 7 | 	this.height = height ; // 高度
 8 | 	this.addToScene = true ; // 是否加入画布
 9 | }
10 | 
11 | // 继承和构造函数
12 | StateBox.prototype = new AnimatedObject() ;
13 | StateBox.prototype.constructor = StateBox ;
14 | 
15 | // 设置状态
16 | StateBox.prototype.setState = function(state) {
17 | 	this.state = state ;
18 | }
19 | 
20 | // 画图
21 | StateBox.prototype.draw = function(ctx) {
22 | 	// 开始画图
23 | 	ctx.beginPath() ;
24 | 	// 设置透明度
25 | 	ctx.globalAlpha = 1.0 ;
26 | 	// 画背景
27 | 	ctx.moveTo(this.x, this.y) ;
28 | 	ctx.lineTo(this.x+this.width, this.y) ;
29 | 	ctx.lineTo(this.x+this.width, this.y+this.height) ;
30 | 	ctx.lineTo(this.x, this.y+this.height) ;
31 | 	ctx.fillStyle = this.backgroundColor ;
32 | 	ctx.fill() ;
33 | 	// 写文字
34 | 	ctx.font = "16px Arial" ;
35 | 	ctx.textAlign = "left" ;
36 | 	ctx.textBaseline = "middle" ;
37 | 	ctx.fillStyle = this.foregroundColor ;
38 | 	ctx.fillText(this.state, this.x+20, parseInt(this.y+this.height/2)) ;
39 | }


--------------------------------------------------------------------------------
/list/factorial.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 | <head>
 4 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
 5 | 	<script src="../jquery.js"></script>
 6 | 	<script src="../index.js"></script>
 7 | 	<script type = "application/javascript" src = "../js/AnimationManager.js"> </script>
 8 |     <script type = "application/javascript" src = "../js/ObjectManager.js"> </script>
 9 |     <script type = "application/javascript" src = "../js/AnimatedObject.js"> </script>
10 | 	<script type = "application/javascript" src = "../js/AnimatedLabel.js"> </script>
11 |     <script type = "application/javascript" src = "../js/AnimatedCircle.js"> </script>
12 | 	<script type = "application/javascript" src = "../js/AnimatedHighlightCircle.js"> </script>
13 |     <script type = "application/javascript" src = "../js/AnimatedLine.js"> </script>
14 |     <script type = "application/javascript" src = "../js/AnimatedRectangle.js"> </script>
15 |     <script type = "application/javascript" src = "../js/AnimatedPointer.js"> </script>
16 | 	<script type = "application/javascript" src = "../js/AnimatedHighlightRectangle.js"> </script>
17 |     <script type = "application/javascript" src = "../js/Algorithm.js"> </script>
18 |     <script type = "application/javascript" src = "../js/Factorial.js"> </script>
19 |     <link rel="stylesheet" href="../css/index.css" />
20 |     <link rel="shortcut icon" href="../favicon.ico" />
21 | 	<title>阶乘</title>
22 | 	<style>
23 | 	</style>
24 | 	<script>
25 |           var type=0;
26 |           var index;
27 | 	</script>
28 | </head>
29 | <body onload="init();ini();">
30 | 	<div class="mainSub">
31 | 		<div class="header">
32 | 			<img class="logo" src="../image/logo.png" alt="logo" onclick="window.location.href='../index.html'" />
33 | 			<div class="navList">
34 | 		        <a href="linearList.html" class="nav" style="text-decoration:none;">顺序表</a>
35 | 		        <a href="singleList.html" class="nav" style="text-decoration:none;">单链表</a>
36 | 		        <a href="stackList.html" class="nav" style="text-decoration:none;">栈</a>
37 | 		        <a href="queueList.html" class="nav" style="text-decoration:none;">队列</a>
38 | 		        <a href="factorial.html" class="nav selected" style="text-decoration:none;">阶乘</a>
39 | 		        <a href="linkedQueue.html" class="nav" style="text-decoration:none;">链式队列</a>
40 | 			</div>
41 | 		</div>
42 | 		<div class="showBox" width="1000" height="500" style="overflow: scroll;">
43 | 		   <canvas id="drawing" width="2000" height="1000">Canvas</canvas>
44 | 		</div>
45 | 		<div class="factStartHide">
46 | 			<img src="../image/arrow_white_right.png" alt="" />
47 | 		</div>
48 | 		<div class="factStarts">
49 | 			<p class="b1" onmouseenter="enterFun(this);" onmouseleave="leaveFun(this);">阶乘</p>
50 | 		</div>
51 | 		<div class="factNum subFT1" onmouseenter="enterFun(this);" onmouseleave="leaveFun(this);">
52 | 			<span>数值</span>
53 | 			<input type="text" class="factNumber"/>
54 | 		</div>
55 | 		<div class="factCal subFT1" onmouseenter="enterFun(this);" onmouseleave="leaveFun(this);">
56 | 			<p>计算</p>
57 | 		</div>
58 | 		<div class="stateHide">
59 | 			<img src="../image/arrow_white_right.png" alt="" />
60 | 		</div>
61 | 		<div class="state">
62 | 			<p></p>
63 | 		</div>
64 | 		<!--div class="codeHide">
65 | 			<img src="../image/arrow_white_right.png" alt="" />
66 | 		</div>
67 | 		<div class="codes">
68 | 			<p>xx</p>
69 | 			<p>xx</p>
70 | 			<p>xx</p>
71 | 			<p>xx</p>
72 | 			<p>xx</p>
73 | 			<p>xx</p>
74 | 	    </div-->
75 | 	    <div class="controlBar">
76 | 	    	<input type="range" name="controlSlider" id="controlSlider"  min="1" max="100" value="60" onchange="setAnimationSpeed(this.value);" />
77 | 	    </div>
78 | 	</div>
79 | 	<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1256898616'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/z_stat.php%3Fid%3D1256898616' type='text/javascript'%3E%3C/script%3E"));</script>
80 | </body>
81 | </html>


--------------------------------------------------------------------------------
/list/linearList.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 | <head>
 4 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
 5 |     <script src="../jquery.js"></script>
 6 | 	<script src="../index.js"></script>
 7 | 	<script type = "application/javascript" src = "../js/AnimationManager.js"> </script>
 8 |     <script type = "application/javascript" src = "../js/ObjectManager.js"> </script>
 9 |     <script type = "application/javascript" src = "../js/AnimatedObject.js"> </script>
10 |     <script type = "application/javascript" src = "../js/AnimatedCircle.js"> </script>
11 |     <script type = "application/javascript" src = "../js/AnimatedLine.js"> </script>
12 |     <script type = "application/javascript" src = "../js/AnimatedRectangle.js"> </script>
13 |     <script type = "application/javascript" src = "../js/AnimatedPointer.js"> </script>
14 |     <script type = "application/javascript" src = "../js/AnimatedLabel.js"> </script>
15 |     <script type = "application/javascript" src = "../js/Algorithm.js"> </script>
16 |     <script type = "application/javascript" src = "../js/OrderList.js"> </script>
17 | 	<link rel="stylesheet" href="../css/index.css" />
18 | 	<link rel="shortcut icon" href="../favicon.ico" />
19 | 	<title>线性表</title>
20 | 	<script>
21 |           var type=0;
22 |           var index;
23 | 	</script>
24 | </head>
25 | <body onload="init();ini();">
26 | 	<div class="mainSub">
27 | 		<div class="header">
28 | 			<img class="logo" src="../image/logo.png" alt="logo" onclick="window.location.href='../index.html'" />
29 | 			<div class="navList">
30 | 			        <a href="linearList.html" class="nav selected" style="text-decoration:none;">顺序表</a>
31 | 			        <a href="singleList.html" class="nav" style="text-decoration:none;">单链表</a>
32 | 			        <a href="stackList.html" class="nav" style="text-decoration:none;">栈</a>
33 | 			        <a href="queueList.html" class="nav"style="text-decoration:none;">队列</a>
34 | 			        <a href="factorial.html" class="nav" style="text-decoration:none;">阶乘</a>
35 | 			        <a href="linkedQueue.html" class="nav" style="text-decoration:none;">链式队列</a>
36 | 			</div>
37 | 		</div>
38 | 		<div class="showBox" width="1000" height="500" style="overflow: scroll;">
39 | 		   <canvas id="drawing" width="2000" height="1000">Canvas</canvas>
40 | 		</div>
41 | 		<div class="startHide">
42 | 			<img src="../image/arrow_white_right.png" alt="" />
43 | 		</div>
44 | 		<div class="starts">
45 | 			<p class="create r1">创建</p>
46 | 			<p class="insert r2">插入</p>
47 | 			<p class="delete r3">删除</p>
48 | 		</div>
49 | 		<div class="length subR1">
50 | 			<span>长度</span><input type="text" class="inputLength"/>
51 | 		</div>
52 | 		<div class="init subR1">
53 | 			<p>初始化</p>
54 | 		</div>
55 | 		<div class="serialNumber subR2"> 
56 | 			<span>位置</span>
57 | 			<input type="text" class="inputNumber"/>
58 | 		</div>
59 | 		<div class="insertNumber subR2">
60 | 			<span>数值</span>
61 | 			<input type="text" class="inputInsertNumber"/>
62 | 		</div>
63 | 		<div class="insertGo subR2">
64 | 			<p>插入</p>
65 | 		</div>
66 | 		<div class="deleteNumber subR3">
67 | 			<span>位置</span>
68 | 			<input type="text" class="inputDeleteNumber"/>
69 | 		</div>
70 | 		<div class="deleteGo subR3">
71 | 			<p>删除</p>
72 | 		</div> 
73 | 		<div class="stateHide">
74 | 			<img src="../image/arrow_white_right.png" alt="" />
75 | 		</div>
76 | 		<div class="state">
77 | 			<p></p>
78 | 		</div>
79 | 		<!--div class="codeHide">
80 | 			<img src="../image/arrow_white_right.png" alt="" />
81 | 		</div>
82 | 		<div class="codes">
83 | 			<p>xx</p>
84 | 			<p>xx</p>
85 | 			<p>xx</p>
86 | 			<p>xx</p>
87 | 			<p>xx</p>
88 | 			<p>xx</p>
89 | 	    </div-->
90 | 	    <div class="controlBar">
91 | 	    	<input type="range" name="controlSlider" id="controlSlider"  min="1" max="100" value="60" onchange="setAnimationSpeed(this.value);" />
92 | 	    </div>
93 | 	</div>
94 | 	<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1256898616'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/z_stat.php%3Fid%3D1256898616' type='text/javascript'%3E%3C/script%3E"));</script>
95 | </body>
96 | </html>


--------------------------------------------------------------------------------
/list/linkedQueue.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 | <head>
 4 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
 5 |     <script src="../jquery.js"></script>
 6 | 	<script src="../index.js"></script>
 7 | 	<script type = "application/javascript" src = "../js/AnimationManager.js"> </script>
 8 |     <script type = "application/javascript" src = "../js/ObjectManager.js"> </script>
 9 |     <script type = "application/javascript" src = "../js/AnimatedObject.js"> </script>
10 |     <script type = "application/javascript" src = "../js/AnimatedCircle.js"> </script>
11 |     <script type = "application/javascript" src = "../js/AnimatedLine.js"> </script>
12 |     <script type = "application/javascript" src = "../js/AnimatedRectangle.js"> </script>
13 |     <script type = "application/javascript" src = "../js/AnimatedPointer.js"> </script>
14 |     <script type = "application/javascript" src = "../js/AnimatedLabel.js"> </script>
15 |     <script type = "application/javascript" src = "../js/Algorithm.js"> </script>
16 |     <script type = "application/javascript" src = "../js/LinkedQueue.js"> </script>
17 |     <link rel="stylesheet" href="../css/index.css" />
18 |     <link rel="shortcut icon" href="../favicon.ico" />
19 | 	<title>链式队列</title>
20 | 	<script>
21 |           var type=0;
22 |           var index;
23 | 	</script>
24 | </head>
25 | <body onload="init();ini();">
26 | 	<div class="mainSub">
27 | 		<div class="header">
28 | 			<img class="logo" src="../image/logo.png" alt="logo" onclick="window.location.href='../index.html'" />
29 | 			<div class="navList">
30 | 			        <a href="linearList.html" class="nav" style="text-decoration:none;">顺序表</a>
31 | 			        <a href="singleList.html" class="nav" style="text-decoration:none;">单链表</a>
32 | 			        <a href="stackList.html" class="nav" style="text-decoration:none;">栈</a>
33 | 			        <a href="queueList.html" class="nav" style="text-decoration:none;">队列</a>
34 | 			        <a href="factorial.html" class="nav" style="text-decoration:none;">阶乘</a>
35 | 			        <a href="linkedQueue.html" class="nav selected" style="text-decoration:none;">链式队列</a>
36 | 			</div>
37 | 		</div>
38 | 		<div class="showBox" width="1000" height="500" style="overflow: scroll;">
39 | 		   <canvas id="drawing" width="2000" height="1000">Canvas</canvas>
40 | 		</div>
41 | 		<div class="linkedQueueStartHide">
42 | 			<img src="../image/arrow_white_right.png" alt="" />
43 | 		</div>
44 | 		<div class="linkedQueueStarts">
45 | 			<!-- <p class="create r1"  onmouseenter="enterFun(this);" onmouseleave="leaveFun(this);">创建</p> -->
46 | 			<p class="insert r2"  onmouseenter="enterFun(this);" onmouseleave="leaveFun(this);">入队</p>
47 | 			<p class="out r3" onmouseenter="enterFun(this);" onmouseleave="leaveFun(this);">出队</p>
48 | 		</div>
49 | 		<div class="linkedQueueLength subLU1" onmouseenter="enterFun(this);" onmouseleave="leaveFun(this);">
50 | 			<span>数组大小</span>
51 | 			<input type="text" class="qInputLength"/>
52 | 		</div>
53 | 		<div class="linkedQueueInit subLU1" onmouseenter="enterFun(this);" onmouseleave="leaveFun(this);">
54 | 			<p>初始化</p>
55 | 		</div>
56 | 		<div class="linkedQueueInsertNumber subLU2" onmouseenter="enterFun(this);" onmouseleave="leaveFun(this);">
57 | 			<span>数值</span>
58 | 			<input type="text" class="queueInputNumber"/>
59 | 		</div>
60 | 		<div class="insertLinkedQueue subLU2" onmouseenter="enterFun(this);" onmouseleave="leaveFun(this);">
61 | 			<p>入队</p>
62 | 		</div>
63 | 		<div class="outLinkedQueue subLU3" onmouseenter="enterFun(this);" onmouseleave="leaveFun(this);">
64 | 			<p>出队</p>
65 | 		</div>  
66 | 		
67 | 		<div class="stateHide">
68 | 			<img src="../image/arrow_white_right.png" alt="" />
69 | 		</div>
70 | 		<div class="state">
71 | 			<p></p>
72 | 		</div>
73 | 		<!--div class="codeHide">
74 | 			<img src="../image/arrow_white_right.png" alt="" />
75 | 		</div>
76 | 		<div class="codes">
77 | 			<p>xx</p>
78 | 			<p>xx</p>
79 | 			<p>xx</p>
80 | 			<p>xx</p>
81 | 			<p>xx</p>
82 | 			<p>xx</p>
83 | 	    </div-->
84 | 	    <div class="controlBar">
85 | 	    	<input type="range" name="controlSlider" id="controlSlider"  min="1" max="100" value="60" onchange="setAnimationSpeed(this.value);" />
86 | 	    </div>
87 | 	</div>
88 | 	<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1256898616'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/z_stat.php%3Fid%3D1256898616' type='text/javascript'%3E%3C/script%3E"));</script>
89 | </body>
90 | </html>


--------------------------------------------------------------------------------
/list/queueList.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 | <head>
 4 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
 5 |     <script src="../jquery.js"></script>
 6 | 	<script src="../index.js"></script>
 7 | 	<script type = "application/javascript" src = "../js/AnimationManager.js"> </script>
 8 |     <script type = "application/javascript" src = "../js/ObjectManager.js"> </script>
 9 |     <script type = "application/javascript" src = "../js/AnimatedObject.js"> </script>
10 |     <script type = "application/javascript" src = "../js/AnimatedCircle.js"> </script>
11 |     <script type = "application/javascript" src = "../js/AnimatedLine.js"> </script>
12 |     <script type = "application/javascript" src = "../js/AnimatedRectangle.js"> </script>
13 |     <script type = "application/javascript" src = "../js/AnimatedPointer.js"> </script>
14 |     <script type = "application/javascript" src = "../js/AnimatedLabel.js"> </script>
15 |     <script type = "application/javascript" src = "../js/Algorithm.js"> </script>
16 |     <script type = "application/javascript" src = "../js/Queue.js"> </script>
17 |     <link rel="stylesheet" href="../css/index.css" />
18 |     <link rel="shortcut icon" href="../favicon.ico" />
19 | 	<title>队列</title>
20 | 	<script>
21 |           var type=0;
22 |           var index;
23 | 	</script>
24 | </head>
25 | <body onload="init();ini();">
26 | 	<div class="mainSub">
27 | 		<div class="header">
28 | 			<img class="logo" src="../image/logo.png" alt="logo" onclick="window.location.href='../index.html'" />
29 | 			<div class="navList">
30 | 			        <a href="linearList.html" class="nav" style="text-decoration:none;">顺序表</a>
31 | 			        <a href="singleList.html" class="nav" style="text-decoration:none;">单链表</a>
32 | 			        <a href="stackList.html" class="nav" style="text-decoration:none;">栈</a>
33 | 			        <a href="queueList.html" class="nav selected" style="text-decoration:none;">队列</a>
34 | 			        <a href="factorial.html" class="nav" style="text-decoration:none;">阶乘</a>
35 | 			        <a href="linkedQueue.html" class="nav" style="text-decoration:none;">链式队列</a>
36 | 			</div>
37 | 		</div>
38 | 		<div class="showBox" width="1000" height="500" style="overflow: scroll;">
39 | 		   <canvas id="drawing" width="2000" height="1000">Canvas</canvas>
40 | 		</div>
41 | 		<div class="startHide">
42 | 			<img src="../image/arrow_white_right.png" alt="" />
43 | 		</div>
44 | 		<div class="queueStarts">
45 | 			<p class="create r1">创建</p>
46 | 			<p class="insert r2">入队</p>
47 | 			<p class="out r3">出队</p>
48 | 		</div>
49 | 		<div class="queueLength subU1">
50 | 			<span>数组大小</span>
51 | 			<input type="text" class="qInputLength"/>
52 | 		</div>
53 | 		<div class="queueInit subU1">
54 | 			<p>初始化</p>
55 | 		</div>
56 | 		<div class="queueInsertNumber subU2">
57 | 			<span>数值</span>
58 | 			<input type="text" class="queueInputNumber"/>
59 | 		</div>
60 | 		<div class="insertQueue subU2">
61 | 			<p>入队</p>
62 | 		</div>
63 | 		<div class="outQueue subU3">
64 | 			<p>出队</p>
65 | 		</div>  
66 | 		
67 | 		<div class="stateHide">
68 | 			<img src="../image/arrow_white_right.png" alt="" />
69 | 		</div>
70 | 		<div class="state">
71 | 			<p></p>
72 | 		</div>
73 | 		<!--div class="codeHide">
74 | 			<img src="../image/arrow_white_right.png" alt="" />
75 | 		</div>
76 | 		<div class="codes">
77 | 			<p>xx</p>
78 | 			<p>xx</p>
79 | 			<p>xx</p>
80 | 			<p>xx</p>
81 | 			<p>xx</p>
82 | 			<p>xx</p>
83 | 	    </div-->
84 | 	    <div class="controlBar">
85 | 	    	<input type="range" name="controlSlider" id="controlSlider"  min="1" max="100" value="60" onchange="setAnimationSpeed(this.value);" />
86 | 	    </div>
87 | 	</div>
88 | 	<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1256898616'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/z_stat.php%3Fid%3D1256898616' type='text/javascript'%3E%3C/script%3E"));</script>
89 | </body>
90 | </html>


--------------------------------------------------------------------------------
/list/singleList.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 | <head>
 4 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
 5 |     <script src="../jquery.js"></script>
 6 | 	<script src="../index.js"></script>
 7 | 	<script type = "application/javascript" src = "../js/AnimationManager.js"> </script>
 8 |     <script type = "application/javascript" src = "../js/ObjectManager.js"> </script>
 9 |     <script type = "application/javascript" src = "../js/AnimatedObject.js"> </script>
10 |     <script type = "application/javascript" src = "../js/AnimatedCircle.js"> </script>
11 |     <script type = "application/javascript" src = "../js/AnimatedLine.js"> </script>
12 |     <script type = "application/javascript" src = "../js/AnimatedRectangle.js"> </script>
13 |     <script type = "application/javascript" src = "../js/AnimatedPointer.js"> </script>
14 |     <script type = "application/javascript" src = "../js/AnimatedLabel.js"> </script>
15 |     <script type = "application/javascript" src = "../js/Algorithm.js"> </script>
16 |     <script type = "application/javascript" src = "../js/LinkedList.js"> </script>
17 | 	<link rel="stylesheet" href="../css/index.css" />
18 | 	<link rel="shortcut icon" href="../favicon.ico" />
19 | 	<title>单链表</title>
20 | 	<script>
21 |           var type=0;
22 |           var index;
23 | 	</script>
24 | </head>
25 | <body onload="init();ini();">
26 | 	<div class="mainSub">
27 | 		<div class="header">
28 | 			<img class="logo" src="../image/logo.png" alt="logo" onclick="window.location.href='../index.html'" />
29 | 			<div class="navList">
30 | 			        <a href="linearList.html" class="nav" style="text-decoration:none;">顺序表</a>
31 | 			        <a href="singleList.html" class="nav selected" style="text-decoration:none;">单链表</a>
32 | 			        <a href="stackList.html" class="nav" style="text-decoration:none;">栈</a>
33 | 			        <a href="queueList.html" class="nav"style="text-decoration:none;">队列</a>
34 | 			        <a href="factorial.html" class="nav" style="text-decoration:none;">阶乘</a>
35 | 			        <a href="linkedQueue.html" class="nav" style="text-decoration:none;">链式队列</a>
36 | 			</div>
37 | 		</div>
38 | 		<div class="showBox" width="1000" height="500" style="overflow: scroll;">
39 | 		   <canvas id="drawing" width="2000" height="1000">Canvas</canvas>
40 | 		</div>
41 | 		<div class="singleStartHide">
42 | 			<img src="../image/arrow_white_right.png" alt="" />
43 | 		</div>
44 | 		<div class="singleStarts">
45 | 			<p class="insert r1">插入</p>
46 | 			<p class="delete r2">删除</p>
47 | 		</div>
48 | 		<div class="singleSerialNumber subT1"> 
49 | 			<span>序号</span>
50 | 			<input type="text" class="singleSerial"/>
51 | 		</div>
52 | 		<div class="singleInsertNumber subT1">
53 | 			<span>数值</span>
54 | 			<input type="text" class="singleInputNumber"/>
55 | 		</div>
56 | 		<div class="singleInsert subT1">
57 | 			<p>插入</p>
58 | 		</div>
59 | 		<div class="singleDeleteNumber subT2">
60 | 			<span>序号</span>
61 | 			<input type="text" class="singleDelNumber"/>
62 | 		</div>
63 | 		<div class="singleDelete subT2">
64 | 			<p>删除</p>
65 | 		</div> 
66 | 		<div class="stateHide">
67 | 			<img src="../image/arrow_white_right.png" alt="" />
68 | 		</div>
69 | 		<div class="state">
70 | 			<p></p>
71 | 		</div>
72 | 		<!--div class="codeHide">
73 | 			<img src="../image/arrow_white_right.png" alt="" />
74 | 		</div>
75 | 		<div class="codes">
76 | 			<p>xx</p>
77 | 			<p>xx</p>
78 | 			<p>xx</p>
79 | 			<p>xx</p>
80 | 			<p>xx</p>
81 | 			<p>xx</p>
82 | 	    </div-->
83 | 	    <div class="controlBar">
84 | 	    	<input type="range" name="controlSlider" id="controlSlider"  min="1" max="100" value="60" onchange="setAnimationSpeed(this.value);" />
85 | 	    </div>
86 | 	</div>
87 | 	<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1256898616'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/z_stat.php%3Fid%3D1256898616' type='text/javascript'%3E%3C/script%3E"));</script>
88 | </body>
89 | </html>


--------------------------------------------------------------------------------
/list/stackList.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 | <head>
 4 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
 5 |     <script src="../jquery.js"></script>
 6 | 	<script src="../index.js"></script>
 7 | 	<script type = "application/javascript" src = "../js/AnimationManager.js"> </script>
 8 |     <script type = "application/javascript" src = "../js/ObjectManager.js"> </script>
 9 |     <script type = "application/javascript" src = "../js/AnimatedObject.js"> </script>
10 |     <script type = "application/javascript" src = "../js/AnimatedCircle.js"> </script>
11 |     <script type = "application/javascript" src = "../js/AnimatedLine.js"> </script>
12 |     <script type = "application/javascript" src = "../js/AnimatedRectangle.js"> </script>
13 |     <script type = "application/javascript" src = "../js/AnimatedPointer.js"> </script>
14 |     <script type = "application/javascript" src = "../js/AnimatedLabel.js"> </script>
15 |     <script type = "application/javascript" src = "../js/Algorithm.js"> </script>
16 |     <script type = "application/javascript" src = "../js/Stack.js"> </script>
17 | 	<link rel="stylesheet" href="../css/index.css" />
18 | 	<link rel="shortcut icon" href="../favicon.ico" />
19 | 	<title>栈</title>
20 | 	<script>
21 |           var type=0;
22 |           var index;
23 | 	</script>
24 | </head>
25 | <body onload="init();ini();">
26 | 	<div class="mainSub">
27 | 		<div class="header">
28 | 			<img class="logo" src="../image/logo.png" alt="logo" onclick="window.location.href='../index.html'" />
29 | 			<div class="navList">
30 | 			        <a href="linearList.html" class="nav" style="text-decoration:none;">顺序表</a>
31 | 			        <a href="singleList.html" class="nav" style="text-decoration:none;">单链表</a>
32 | 			        <a href="stackList.html" class="nav selected" style="text-decoration:none;">栈</a>
33 | 			        <a href="queueList.html" class="nav"style="text-decoration:none;">队列</a>
34 | 			        <a href="factorial.html" class="nav" style="text-decoration:none;">阶乘</a>
35 | 			        <a href="linkedQueue.html" class="nav" style="text-decoration:none;">链式队列</a>
36 | 			</div>
37 | 		</div>
38 | 		<div class="showBox" width="1000" height="500" style="overflow: scroll;">
39 | 		   <canvas id="drawing" width="2000" height="1000">Canvas</canvas>
40 | 		</div>
41 | 		<div class="startHide">
42 | 			<img src="../image/arrow_white_right.png" alt="" />
43 | 		</div>
44 | 		<div class="stackStarts">
45 | 			<p class="create r1">创建</p>
46 | 			<p class="insert r2">入栈</p>
47 | 			<p class="out r3">出栈</p>
48 | 		</div>
49 | 		<div class="stackLength subS1">
50 | 			<span>数组大小</span>
51 | 			<input type="text" class="InputLength"/>
52 | 		</div>
53 | 		<div class="stackInit subS1">
54 | 			<p>初始化</p>
55 | 		</div>
56 | 		<div class="stackInsertNumber subS2">
57 | 			<span>数值</span>
58 | 			<input type="text" class="stackInputNumber"/>
59 | 		</div>
60 | 		<div class="insertStack subS2">
61 | 			<p>入栈</p>
62 | 		</div>
63 | 		<div class="outStack subS3">
64 | 			<p>出栈</p>
65 | 		</div>  
66 | 		
67 | 		<div class="stateHide">
68 | 			<img src="../image/arrow_white_right.png" alt="" />
69 | 		</div>
70 | 		<div class="state">
71 | 			<p></p>
72 | 		</div>
73 | 		<!--div class="codeHide">
74 | 			<img src="../image/arrow_white_right.png" alt="" />
75 | 		</div>
76 | 		<div class="codes">
77 | 			<p>xx</p>
78 | 			<p>xx</p>
79 | 			<p>xx</p>
80 | 			<p>xx</p>
81 | 			<p>xx</p>
82 | 			<p>xx</p>
83 | 	    </div-->
84 | 	    <div class="controlBar">
85 | 	    	<input type="range" name="controlSlider" id="controlSlider"  min="1" max="100" value="60" onchange="setAnimationSpeed(this.value);" />
86 | 	    </div>
87 | 	</div>
88 | 	<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1256898616'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/z_stat.php%3Fid%3D1256898616' type='text/javascript'%3E%3C/script%3E"));</script>
89 | </body>
90 | </html>


--------------------------------------------------------------------------------
/page/test.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <meta charset="UTF-8">
 5 | <title>Insert title here</title>
 6 | </head>
 7 | <body>
 8 | 
 9 | <h1>Hello, this is a test page</h1>
10 | 
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/sort/compareSort.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 | <head>
 4 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
 5 | 	<script src="../jquery.js"></script>
 6 | 	<script src="../index.js"></script>
 7 | 	<script type = "application/javascript" src = "../js/AnimationManager.js"> </script>
 8 |     <script type = "application/javascript" src = "../js/ObjectManager.js"> </script>
 9 |     <script type = "application/javascript" src = "../js/AnimatedObject.js"> </script>
10 |     <script type = "application/javascript" src = "../js/AnimatedCircle.js"> </script>
11 | 	<script type = "application/javascript" src = "../js/AnimatedHighlightCircle.js"> </script>
12 |     <script type = "application/javascript" src = "../js/AnimatedLine.js"> </script>
13 |     <script type = "application/javascript" src = "../js/AnimatedRectangle.js"> </script>
14 |     <script type = "application/javascript" src = "../js/AnimatedPointer.js"> </script>
15 | 	<script type = "application/javascript" src = "../js/AnimatedHighlightRectangle.js"> </script>
16 |     <script type = "application/javascript" src = "../js/Algorithm.js"> </script>
17 |     <script type = "application/javascript" src = "../js/CompareSort.js"> </script>
18 | 	<link rel="stylesheet" href="../css/index.css" />
19 | 	<link rel="stylesheet" type="text/css" href="../css/sort.css"/>
20 | 	<link rel="shortcut icon" href="../favicon.ico" />
21 | 	<title>比较排序</title>
22 | 	<script>
23 |           var type=0;
24 |           var index;
25 | 	</script>
26 | </head>
27 | <body onload="init();ini();">
28 | 	<div class="mainSub">
29 | 		<div class="header">
30 | 			<img class="logo" src="../image/logo.png" alt="logo" onclick="window.location.href='../index.html'" />
31 | 			<div class="navList">
32 | 			        <a href="compareSort.html" class="nav selected" style="text-decoration:none;">比较排序</a>
33 | 			        <a href="radixSort.html" class="nav" style="text-decoration:none;">基数排序</a>
34 | 			        <a href="heapSort.html" class="nav" style="text-decoration:none;">堆排序</a>
35 | 			</div>
36 | 		</div>
37 | 		<div class="showBox" width="1000" height="500" style="overflow: scroll;">
38 | 		   <canvas id="drawing" width="2000" height="1000">Canvas</canvas>
39 | 		</div>
40 | 		<div class="sortStartHide">
41 | 			<img src="../image/arrow_white_right.png" alt="" />
42 | 		</div>
43 | 		<div class="compareSortStarts">
44 | 			<p class="r1">生成数组</p>
45 | 			<p class="r2">排序</p>
46 | 		</div>
47 | 		<div class="arrayLength subC1">
48 | 			<span>长度</span>
49 | 			<input type="text" class="sortArrayLength"/>
50 | 		</div>
51 | 		<div class="createArray subC1">
52 | 			<p>生成</p>
53 | 		</div>
54 | 		<div class="insertSort subC2">
55 | 			<p>插入排序</p>
56 | 		</div>
57 |         <div class="selectSort subC2">
58 | 			<p>选择排序</p>
59 | 		</div>
60 | 		<div class="bubbleSort subC2">
61 | 			<p>冒泡排序</p>
62 | 		</div>
63 | 		<div class="shellSort subC2">
64 | 			<p>希尔排序</p>
65 | 		</div>
66 | 		<div class="quickSort subC2">
67 | 			<p>快速排序</p>
68 | 		</div>
69 | 		<div class="mergeSort subC2">
70 | 			<p>归并排序</p>
71 | 		</div>
72 | 		<div class="stateHide">
73 | 			<img src="../image/arrow_white_right.png" alt="" />
74 | 		</div>
75 | 		<div class="state">
76 | 			<p></p>
77 | 		</div>
78 | 		<!--div class="codeHide">
79 | 			<img src="../image/arrow_white_right.png" alt="" />
80 | 		</div>
81 | 		<div class="codes">
82 | 			<p>xx</p>
83 | 			<p>xx</p>
84 | 			<p>xx</p>
85 | 			<p>xx</p>
86 | 			<p>xx</p>
87 | 			<p>xx</p>
88 | 	    </div-->
89 | 	    <div class="controlBar">
90 | 	    	<input type="range" name="controlSlider" id="controlSlider"  min="1" max="100" value="60" onchange="setAnimationSpeed(this.value);" />
91 | 	    </div>
92 | 	</div>
93 | 	<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1256898616'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/z_stat.php%3Fid%3D1256898616' type='text/javascript'%3E%3C/script%3E"));</script>
94 | </body>
95 | </html>


--------------------------------------------------------------------------------
/sort/heapSort.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 | <head>
 4 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
 5 | 	<script src="../jquery.js"></script>
 6 | 	<script src="../index.js"></script>
 7 | 	<script type = "application/javascript" src = "../js/AnimationManager.js"> </script>
 8 |     <script type = "application/javascript" src = "../js/ObjectManager.js"> </script>
 9 |     <script type = "application/javascript" src = "../js/AnimatedObject.js"> </script>
10 |     <script type = "application/javascript" src = "../js/AnimatedCircle.js"> </script>
11 | 	<script type = "application/javascript" src = "../js/AnimatedHighlightCircle.js"> </script>
12 |     <script type = "application/javascript" src = "../js/AnimatedLine.js"> </script>
13 |     <script type = "application/javascript" src = "../js/AnimatedRectangle.js"> </script>
14 |     <script type = "application/javascript" src = "../js/AnimatedPointer.js"> </script>
15 | 	<script type = "application/javascript" src = "../js/AnimatedHighlightRectangle.js"> </script>
16 |     <script type = "application/javascript" src = "../js/Algorithm.js"> </script>
17 |     <script type = "application/javascript" src = "../js/HeapSort.js"> </script>
18 |     <link rel="stylesheet" href="../css/index.css" />
19 | 	<link rel="stylesheet" type="text/css" href="../css/sort.css"/>
20 | 	<link rel="shortcut icon" href="../favicon.ico" />
21 | 	<title>堆排序</title>
22 | 	<script>
23 |           var type=0;
24 |           var index;
25 | 	</script>
26 | </head>
27 | <body onload="init();ini();">
28 | 	<div class="mainSub">
29 | 		<div class="header">
30 | 			<img class="logo" src="../image/logo.png" alt="logo" onclick="window.location.href='../index.html'" />
31 | 			<div class="navList">
32 | 			        <a href="compareSort.html" class="nav" style="text-decoration:none;">比较排序</a>
33 | 			        <a href="radixSort.html" class="nav" style="text-decoration:none;">基数排序</a>
34 | 			        <a href="heapSort.html" class="nav selected" style="text-decoration:none;">堆排序</a>
35 | 			</div>
36 | 		</div>
37 | 		<div class="showBox" width="1000" height="500" style="overflow: scroll;">
38 | 		   <canvas id="drawing" width="2000" height="1000">Canvas</canvas>
39 | 		</div>
40 | 		<div class="sortStartHide">
41 | 			<img src="../image/arrow_white_right.png" alt="" />
42 | 		</div>
43 | 		<div class="heapSortStarts">
44 | 			<p class="r1" onmouseenter="enterFun(this);" onmouseleave="leaveFun(this);">初始化数组</p>
45 | 			<p class="r2" onmouseenter="enterFun(this);" onmouseleave="leaveFun(this);">堆排序</p>
46 | 		</div>
47 | 		<div class="arrayLength subHS1" onmouseenter="enterFun(this);" onmouseleave="leaveFun(this);">
48 | 			<span>长度</span>
49 | 			<input type="text" class="sortArrayLength"/>
50 | 		</div>
51 | 		<div class="createHeapArray subHS1" onmouseenter="enterFun(this);" onmouseleave="leaveFun(this);" style="width:150px">
52 | 			<p>随机生成数组</p>
53 | 		</div>
54 | 		<div class="heapSort subHS2" onmouseenter="enterFun(this);" onmouseleave="leaveFun(this);">
55 | 			<p>开始排序</p>
56 | 		</div>
57 | 		<div class="stateHide">
58 | 			<img src="../image/arrow_white_right.png" alt="" />
59 | 		</div>
60 | 		<div class="state">
61 | 			<p></p>
62 | 		</div>
63 | 		<!--div class="codeHide">
64 | 			<img src="../image/arrow_white_right.png" alt="" />
65 | 		</div>
66 | 		<div class="codes">
67 | 			<p>xx</p>
68 | 			<p>xx</p>
69 | 			<p>xx</p>
70 | 			<p>xx</p>
71 | 			<p>xx</p>
72 | 			<p>xx</p>
73 | 	    </div-->
74 | 	    <div class="controlBar">
75 | 	    	<input type="range" name="controlSlider" id="controlSlider"  min="1" max="100" value="60" onchange="setAnimationSpeed(this.value);" />
76 | 	    </div>
77 | 	</div>
78 | 	<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1256898616'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/z_stat.php%3Fid%3D1256898616' type='text/javascript'%3E%3C/script%3E"));</script>
79 | </body>
80 | </html>


--------------------------------------------------------------------------------
/sort/radixSort.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 | <head>
 4 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
 5 | 	<script src="../jquery.js"></script>
 6 | 	<script src="../index.js"></script>
 7 | 	<script type = "application/javascript" src = "../js/AnimationManager.js"> </script>
 8 |     <script type = "application/javascript" src = "../js/ObjectManager.js"> </script>
 9 |     <script type = "application/javascript" src = "../js/AnimatedObject.js"> </script>
10 |     <script type = "application/javascript" src = "../js/AnimatedCircle.js"> </script>
11 | 	<script type = "application/javascript" src = "../js/AnimatedHighlightCircle.js"> </script>
12 |     <script type = "application/javascript" src = "../js/AnimatedLine.js"> </script>
13 |     <script type = "application/javascript" src = "../js/AnimatedRectangle.js"> </script>
14 |     <script type = "application/javascript" src = "../js/AnimatedPointer.js"> </script>
15 | 	<script type = "application/javascript" src = "../js/AnimatedHighlightRectangle.js"> </script>
16 |     <script type = "application/javascript" src = "../js/Algorithm.js"> </script>
17 |     <script type = "application/javascript" src = "../js/RadixSort.js"> </script>
18 | 	<link rel="stylesheet" href="../css/index.css" />
19 | 	<link rel="stylesheet" type="text/css" href="../css/sort.css"/>
20 | 	<link rel="shortcut icon" href="../favicon.ico" />
21 | 	<title>基数排序</title>
22 | 	<script>
23 |           var type=0;
24 |           var index;
25 | 	</script>
26 | </head>
27 | <body onload="init();ini();">
28 | 	<div class="mainSub">
29 | 		<div class="header">
30 | 			<img class="logo" src="../image/logo.png" alt="logo" onclick="window.location.href='../index.html'" />
31 | 			<div class="navList">
32 | 			        <a href="compareSort.html" class="nav" style="text-decoration:none;">比较排序</a>
33 | 			        <a href="radixSort.html" class="nav selected" style="text-decoration:none;">基数排序</a>
34 | 			        <a href="heapSort.html" class="nav" style="text-decoration:none;">堆排序</a>
35 | 			</div>
36 | 		</div>
37 | 		<div class="showBox" width="1000" height="500" style="overflow: scroll;">
38 | 		   <canvas id="drawing" width="2000" height="1000">Canvas</canvas>
39 | 		</div>
40 | 		<div class="sortStartHide">
41 | 			<img src="../image/arrow_white_right.png" alt="" />
42 | 		</div>
43 | 		<div class="radixSortStarts">
44 | 			<p class="r1">生成数组</p>
45 | 			<p class="r2">排序</p>
46 | 		</div>
47 | 		<div class="arrayLength subV1">
48 | 			<span>长度</span>
49 | 			<input type="text" class="sortArrayLength"/>
50 | 		</div>
51 | 		<div class="createRadixArray subV1">
52 | 			<p>生成</p>
53 | 		</div>
54 | 		<div class="radixSort subV2">
55 | 			<p>基数排序</p>
56 | 		</div>
57 | 		<div class="stateHide">
58 | 			<img src="../image/arrow_white_right.png" alt="" />
59 | 		</div>
60 | 		<div class="state">
61 | 			<p></p>
62 | 		</div>
63 | 		<!--div class="codeHide">
64 | 			<img src="../image/arrow_white_right.png" alt="" />
65 | 		</div>
66 | 		<div class="codes">
67 | 			<p>xx</p>
68 | 			<p>xx</p>
69 | 			<p>xx</p>
70 | 			<p>xx</p>
71 | 			<p>xx</p>
72 | 			<p>xx</p>
73 | 	    </div-->
74 | 	    <div class="controlBar">
75 | 	    	<input type="range" name="controlSlider" id="controlSlider"  min="1" max="100" value="60" onchange="setAnimationSpeed(this.value);" />
76 | 	    </div>
77 | 	</div>
78 | 	<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1256898616'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/z_stat.php%3Fid%3D1256898616' type='text/javascript'%3E%3C/script%3E"));</script>
79 | </body>
80 | </html>


--------------------------------------------------------------------------------
/string/patternMatch.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 | <head>
 4 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
 5 | 	<script src="../jquery.js"></script>
 6 | 	<script src="../index.js"></script>
 7 | 	<script type = "application/javascript" src = "../js/AnimationManager.js"> </script>
 8 |     <script type = "application/javascript" src = "../js/ObjectManager.js"> </script>
 9 |     <script type = "application/javascript" src = "../js/AnimatedObject.js"> </script>
10 |     <script type = "application/javascript" src = "../js/AnimatedCircle.js"> </script>
11 | 	<script type = "application/javascript" src = "../js/AnimatedHighlightCircle.js"> </script>
12 |     <script type = "application/javascript" src = "../js/AnimatedLine.js"> </script>
13 |     <script type = "application/javascript" src = "../js/AnimatedRectangle.js"> </script>
14 |     <script type = "application/javascript" src = "../js/AnimatedPointer.js"> </script>
15 | 	<script type = "application/javascript" src = "../js/AnimatedHighlightRectangle.js"> </script>
16 |     <script type = "application/javascript" src = "../js/Algorithm.js"> </script>
17 |     <script type = "application/javascript" src = "../js/PatternMatch.js"> </script>
18 | 	<link rel="stylesheet" href="../css/index.css" />
19 | 	<link rel="stylesheet" type="text/css" href="../css/string.css"/>
20 | 	<link rel="shortcut icon" href="../favicon.ico" />
21 | 	<title>模式匹配</title>
22 | 	<script>
23 |           var type=0;
24 |           var index;
25 | 	</script>
26 | </head>
27 | <body onload="init();ini();">
28 | 	<div class="mainSub">
29 | 		<div class="header">
30 | 			<img class="logo" src="../image/logo.png" alt="logo" onclick="window.location.href='../index.html'" />
31 | 			<div class="navList">
32 | 			        <a href="patternMatch.html" class="nav selected" style="text-decoration:none;">模式匹配</a>
33 | 			        <a href="search.html" class="nav" style="text-decoration:none;">查找</a>
34 | 			</div>
35 | 		</div>
36 | 		<div class="showBox" width="1000" height="500" style="overflow: scroll;">
37 | 		   <canvas id="drawing" width="2000" height="1000">Canvas</canvas>
38 | 		</div>
39 | 		<div class="patternStartHide">
40 | 			<img src="../image/arrow_white_right.png" alt="" />
41 | 		</div>
42 | 		<div class="patternStarts">
43 | 			<p class="r1">目标串</p>
44 | 			<p class="r2">模式串</p>
45 | 			<p class="r3">匹配</p>
46 | 		</div>
47 | 		<div class="patternString subW1">
48 | 			<span>输入</span>
49 | 			<input type="text" class="patternString_de"/>
50 | 		</div>
51 | 		<div class="createPattern subW1">
52 | 			<p>生成</p>
53 | 		</div>
54 | 		<div class="targetString subW2"> 
55 | 			<span>输入</span>
56 | 			<input type="text" class="targetString_de"/>
57 | 		</div>
58 | 		<div class="createTarget subW2">
59 | 			<p>生成</p>
60 | 		</div>
61 | 		<div class="match subW3">
62 | 			<p>KMP匹配</p>
63 | 		</div>
64 |         <div class="matchStart subW3">
65 | 			<p>简单匹配</p>
66 | 		</div>
67 | 		<div class="stateHide">
68 | 			<img src="../image/arrow_white_right.png" alt="" />
69 | 		</div>
70 | 		<div class="state">
71 | 			<p></p>
72 | 		</div>
73 | 		<!--div class="codeHide">
74 | 			<img src="../image/arrow_white_right.png" alt="" />
75 | 		</div>
76 | 		<div class="codes">
77 | 			<p>xx</p>
78 | 			<p>xx</p>
79 | 			<p>xx</p>
80 | 			<p>xx</p>
81 | 			<p>xx</p>
82 | 			<p>xx</p>
83 | 	    </div-->
84 | 	    <div class="controlBar">
85 | 	    	<input type="range" name="controlSlider" id="controlSlider"  min="1" max="100" value="60" onchange="setAnimationSpeed(this.value);" />
86 | 	    </div>
87 | 	</div>
88 | 	<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1256898616'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/z_stat.php%3Fid%3D1256898616' type='text/javascript'%3E%3C/script%3E"));</script>
89 | </body>
90 | </html>


--------------------------------------------------------------------------------
/string/search.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 | <head>
 4 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
 5 | 	<script src="../jquery.js"></script>
 6 | 	<script src="../index.js"></script>
 7 | 	<script type = "application/javascript" src = "../js/AnimationManager.js"> </script>
 8 |     <script type = "application/javascript" src = "../js/ObjectManager.js"> </script>
 9 |     <script type = "application/javascript" src = "../js/AnimatedObject.js"> </script>
10 |     <script type = "application/javascript" src = "../js/AnimatedCircle.js"> </script>
11 | 	<script type = "application/javascript" src = "../js/AnimatedHighlightCircle.js"> </script>
12 |     <script type = "application/javascript" src = "../js/AnimatedLine.js"> </script>
13 |     <script type = "application/javascript" src = "../js/AnimatedRectangle.js"> </script>
14 |     <script type = "application/javascript" src = "../js/AnimatedPointer.js"> </script>
15 | 	<script type = "application/javascript" src = "../js/AnimatedHighlightRectangle.js"> </script>
16 |     <script type = "application/javascript" src = "../js/Algorithm.js"> </script>
17 |     <script type = "application/javascript" src = "../js/Search.js"> </script>
18 | 	<link rel="stylesheet" href="../css/index.css" />
19 | 	<link rel="stylesheet" type="text/css" href="../css/string.css"/>
20 | 	<link rel="shortcut icon" href="../favicon.ico" />
21 | 	<title>字符串查找</title>
22 | 	<script>
23 |           var type=0;
24 |           var index;
25 | 	</script>
26 | </head>
27 | <body onload="init();ini();">
28 | 	<div class="mainSub">
29 | 		<div class="header">
30 | 			<img class="logo" src="../image/logo.png" alt="logo" onclick="window.location.href='../index.html'" />
31 | 			<div class="navList">
32 | 			        <a href="patternMatch.html" class="nav" style="text-decoration:none;">模式匹配</a>
33 | 			        <a href="search.html" class="nav selected" style="text-decoration:none;">查找</a>
34 | 			</div>
35 | 		</div>
36 | 		<div class="showBox" width="1000" height="500" style="overflow: scroll;">
37 | 		   <canvas id="drawing" width="2000" height="1000">Canvas</canvas>
38 | 		</div>
39 | 		<div class="searchStartHide">
40 | 			<img src="../image/arrow_white_right.png" alt="" />
41 | 		</div>
42 | 		<div class="searchStarts">
43 | 			<p class="r1">数组大小</p>
44 | 			<p class="r2">数组内容</p>
45 | 			<p class="r3">查找数字</p>
46 | 		</div>
47 | 		<div class="searchArray subY1">
48 | 			<span>大小</span>
49 | 			<input type="text" class="arraySize"/>
50 | 		</div>
51 | 		<div class="setSize subY1">
52 | 			<p>设置</p>
53 | 		</div>
54 | 		<div class="searchContent subY2"> 
55 | 			<span>内容</span>
56 | 			<input type="text" class="contentDetail"/>
57 | 		</div>
58 | 		<div class="createSearchArray subY2">
59 | 			<p>生成</p>
60 | 		</div>
61 | 		<div class="searchOne subY3"> 
62 | 			<span>输入</span>
63 | 			<input type="text" class="whichOne"/>
64 | 		</div>
65 |         <div class="binarySearch subY3">
66 | 			<p>二分查找</p>
67 | 		</div>
68 | 		<div class="sequentialSearch subY3">
69 | 			<p>顺序查找</p>
70 | 		</div>
71 | 		<div class="stateHide">
72 | 			<img src="../image/arrow_white_right.png" alt="" />
73 | 		</div>
74 | 		<div class="state">
75 | 			<p></p>
76 | 		</div>
77 | 		<!--div class="codeHide">
78 | 			<img src="../image/arrow_white_right.png" alt="" />
79 | 		</div>
80 | 		<div class="codes">
81 | 			<p>xx</p>
82 | 			<p>xx</p>
83 | 			<p>xx</p>
84 | 			<p>xx</p>
85 | 			<p>xx</p>
86 | 			<p>xx</p>
87 | 	    </div-->
88 | 	    <div class="controlBar">
89 | 	    	<input type="range" name="controlSlider" id="controlSlider"  min="1" max="100" value="60" onchange="setAnimationSpeed(this.value);" />
90 | 	    </div>
91 | 	</div>
92 | 	<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1256898616'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/z_stat.php%3Fid%3D1256898616' type='text/javascript'%3E%3C/script%3E"));</script>
93 | </body>
94 | </html>


--------------------------------------------------------------------------------
/string/stringMatch.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3 | <head>
  4 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
  5 | 	<script src="../jquery.js"></script>
  6 | 	<script src="../index.js"></script>
  7 | 	<script type = "application/javascript" src = "../js/AnimationManager.js"> </script>
  8 |     <script type = "application/javascript" src = "../js/ObjectManager.js"> </script>
  9 |     <script type = "application/javascript" src = "../js/AnimatedObject.js"> </script>
 10 |     <script type = "application/javascript" src = "../js/AnimatedCircle.js"> </script>
 11 |     <script type = "application/javascript" src = "../js/AnimatedLine.js"> </script>
 12 |     <script type = "application/javascript" src = "../js/AnimatedRectangle.js"> </script>
 13 |     <script type = "application/javascript" src = "../js/AnimatedPointer.js"> </script>
 14 |     <script type = "application/javascript" src = "../js/Algorithm.js"> </script>
 15 |     <script type = "application/javascript" src = "../js/OrderList.js"> </script>
 16 | 	<link rel="stylesheet" href="../css/index.css" />
 17 | 	<link rel="stylesheet" type="text/css" href="../css/graph.css"/>
 18 | 	<link rel="shortcut icon" href="../favicon.ico" />
 19 | 	<title>模式匹配</title>
 20 | 	<script>
 21 |           var type=0;
 22 |           var index;
 23 | 	</script>
 24 | </head>
 25 | <body onload="init();ini();">
 26 | 	<div class="mainSub">
 27 | 		<div class="header">
 28 | 			<img class="logo" src="../image/logo.png" alt="logo" onclick="window.location.href='../index.html'" />
 29 | 			<div class="navList">
 30 | 			        <a href="patternMatch.html" class="nav" style="text-decoration:none;">模式匹配</a>
 31 | 			        <a href="string.html" class="nav" style="text-decoration:none;">查找</a>
 32 | 			</div>
 33 | 		</div>
 34 | 		<div class="showBox" width="1000" height="500" style="overflow: scroll;">
 35 | 		   <canvas id="drawing" width="2000" height="1000">Canvas</canvas>
 36 | 		</div>
 37 | 		<div class="primStartHide">
 38 | 			<img src="../image/arrow_white_right.png" alt="" />
 39 | 		</div>
 40 | 		<div class="primStarts">
 41 | 			<p class="r1">1</p>
 42 | 			<p class="r2">2</p>
 43 | 			<p class="r3">3</p>
 44 | 		</div>
 45 | 		<div class="peakPrimNum subX1">
 46 | 			<span>顶点数量</span>
 47 | 			<input type="text" class="peakPrimNumber"/>
 48 | 		</div>
 49 | 		<div class="createPrimGraph subX1">
 50 | 			<p>生成随机图</p>
 51 | 		</div>
 52 | 		<div class="startPrimPeak subX2"> 
 53 | 			<span>起点</span>
 54 | 			<input type="text" class="startPrimNumber"/>
 55 | 		</div>
 56 | 		<div class="endPrimPeak subX2">
 57 | 			<span>终点</span>
 58 | 			<input type="text" class="endPrimNumber"/>
 59 | 		</div>
 60 | 		<div class="weightPrim subX2">
 61 | 			<span>权重</span>
 62 | 			<input type="text" class="weightPrimNumber"/>
 63 | 		</div>
 64 | 		<div class="addPrimEdge subX2">
 65 | 			<p>添加边</p>
 66 | 		</div>
 67 |         <div class="deletePrimEdge subX2">
 68 | 			<p>删除边</p>
 69 | 		</div>
 70 | 		<div class="runPrimPeak subX3">
 71 | 			<span>起始顶点</span>
 72 | 			<input type="text" class="runPrimNumber"/>
 73 | 		</div>
 74 | 		<div class="runTraverse subX3 Prim">
 75 | 			<p>Run Prim</p>
 76 | 		</div>
 77 | 		<div class="stateHide">
 78 | 			<img src="../image/arrow_white_right.png" alt="" />
 79 | 		</div>
 80 | 		<div class="state">
 81 | 			<p></p>
 82 | 		</div>
 83 | 		<!--div class="codeHide">
 84 | 			<img src="../image/arrow_white_right.png" alt="" />
 85 | 		</div>
 86 | 		<div class="codes">
 87 | 			<p>xx</p>
 88 | 			<p>xx</p>
 89 | 			<p>xx</p>
 90 | 			<p>xx</p>
 91 | 			<p>xx</p>
 92 | 			<p>xx</p>
 93 | 	    </div-->
 94 | 	    <div class="controlBar">
 95 | 	    	<input type="range" name="controlSlider" id="controlSlider"  min="1" max="100" value="30" onchange="setAnimationSpeed(this.value);" />
 96 | 	    </div>
 97 | 	</div>
 98 | 	<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1256898616'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/z_stat.php%3Fid%3D1256898616' type='text/javascript'%3E%3C/script%3E"));</script>
 99 | </body>
100 | </html>


--------------------------------------------------------------------------------
/tree/BST.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 | <head>
 4 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
 5 | 	<script src="../jquery.js"></script>
 6 | 	<script src="../index.js"></script>
 7 | 	<script type = "application/javascript" src = "../js/AnimationManager.js"> </script>
 8 |     <script type = "application/javascript" src = "../js/ObjectManager.js"> </script>
 9 |     <script type = "application/javascript" src = "../js/AnimatedObject.js"> </script>
10 |     <script type = "application/javascript" src = "../js/AnimatedCircle.js"> </script>
11 | 	<script type = "application/javascript" src = "../js/AnimatedHighlightCircle.js"> </script>
12 |     <script type = "application/javascript" src = "../js/AnimatedLine.js"> </script>
13 |     <script type = "application/javascript" src = "../js/AnimatedRectangle.js"> </script>
14 |     <script type = "application/javascript" src = "../js/AnimatedPointer.js"> </script>
15 | 	<script type = "application/javascript" src = "../js/AnimatedHighlightRectangle.js"> </script>
16 |     <script type = "application/javascript" src = "../js/Algorithm.js"> </script>
17 |     <script type = "application/javascript" src = "../js/BinarySearchTree.js"> </script>
18 | 	<link rel="stylesheet" href="../css/index.css" />
19 | 	<link rel="stylesheet" type="text/css" href="../css/sort.css"/>
20 | 	<link rel="stylesheet" type="text/css" href="../css/tree.css" />
21 | 	<link rel="shortcut icon" href="../favicon.ico" />
22 | 	<title>线索二叉树</title>
23 | 	<script>
24 |           var type=0;
25 |           var index;
26 | 	</script>
27 | </head>
28 | <body onload="init();ini();">
29 | 	<div class="mainSub">
30 | 		<div class="header">
31 | 			<img class="logo" src="../image/logo.png" alt="logo" onclick="window.location.href='../index.html'" />
32 | 			<div class="navList">
33 | 			        <a href="BST.html" class="nav selected" style="text-decoration:none;">BST</a>
34 | 			        <a href="heap.html" class="nav" style="text-decoration:none;">堆</a>
35 | 			        <a href="HuffmanTree.html" class="nav" style="text-decoration:none;">霍夫曼树</a>
36 | 			        <a href="avlTree.html" class="nav" style="text-decoration:none;">AVL树</a>
37 | 			        <a href="BT2T.html" class="nav" style="text-decoration:none;">二叉树转换</a>
38 | 			        <a href="thrdBtree.html" class="nav" style="text-decoration:none;">线索二叉树</a>
39 | 			</div>
40 | 		</div>
41 | 		<div class="showBox" width="1000" height="500" style="overflow: scroll;">
42 | 		   <canvas id="drawing"  width="2000" height="1000">Canvas</canvas>
43 | 		</div>
44 | 		<div class="treeStartHide">
45 | 			<img src="../image/arrow_white_right.png" alt="" />
46 | 		</div>
47 | 		<div class="bstTreeStarts">
48 | 			<p class="s1">结点操作</p>
49 | 		</div>
50 | 		<div class="bstTreeNum subB1">
51 | 			<span>数值</span>
52 | 			<input type="text" class="bstTreeNumber"/>
53 | 		</div>
54 | 		<div class="bstTreeInsert subB1">
55 | 			<p>插入</p>
56 | 		</div>
57 | 		<div class="bstTreeSearch subB1">
58 | 			<p>查找</p>
59 | 		</div>
60 | 		<div class="bstTreeDelete subB1">
61 | 			<p>删除</p>
62 | 		</div>
63 | 		<div class="stateHide">
64 | 			<img src="../image/arrow_white_right.png" alt="" />
65 | 		</div>
66 | 		<div class="state">
67 | 			<p>平台只支持数字节点，暂不支持字母或字符串</p>
68 | 		</div>
69 | 		<!--div class="codeHide">
70 | 			<img src="../image/arrow_white_right.png" alt="" />
71 | 		</div>
72 | 		<div class="codes">
73 | 			<p>xx</p>
74 | 			<p>xx</p>
75 | 			<p>xx</p>
76 | 			<p>xx</p>
77 | 			<p>xx</p>
78 | 			<p>xx</p>
79 | 	    </div-->
80 | 	    <div class="controlBar">
81 | 	    	<input type="range" name="controlSlider" id="controlSlider"  min="1" max="100" value="60" onchange="setAnimationSpeed(this.value);" />
82 | 	    </div>
83 | 	</div>
84 | 	<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1256898616'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/z_stat.php%3Fid%3D1256898616' type='text/javascript'%3E%3C/script%3E"));</script>
85 | </body>
86 | </html>


--------------------------------------------------------------------------------
/tree/BT2T.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3 | <head>
  4 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
  5 | 	<script src="../jquery.js"></script>
  6 | 	<script src="../index.js"></script>
  7 | 	<script type = "application/javascript" src = "../js/AnimationManager.js"> </script>
  8 |     <script type = "application/javascript" src = "../js/ObjectManager.js"> </script>
  9 |     <script type = "application/javascript" src = "../js/AnimatedObject.js"> </script>
 10 |     <script type = "application/javascript" src = "../js/AnimatedCircle.js"> </script>
 11 | 	<script type = "application/javascript" src = "../js/AnimatedHighlightCircle.js"> </script>
 12 |     <script type = "application/javascript" src = "../js/AnimatedLine.js"> </script>
 13 |     <script type = "application/javascript" src = "../js/AnimatedLabel.js"> </script>
 14 |     <script type = "application/javascript" src = "../js/AnimatedRectangle.js"> </script>
 15 |     <script type = "application/javascript" src = "../js/AnimatedPointer.js"> </script>
 16 | 	<script type = "application/javascript" src = "../js/AnimatedHighlightRectangle.js"> </script>
 17 |     <script type = "application/javascript" src = "../js/Algorithm.js"> </script>
 18 |     <script type = "application/javascript" src = "../js/BT2T.js"> </script>
 19 | 	<link rel="stylesheet" href="../css/index.css" />
 20 | 	<link rel="stylesheet" type="text/css" href="../css/tree.css"/>
 21 | 	<link rel="shortcut icon" href="../favicon.ico" />
 22 | 	<title>树与森林的转换</title>
 23 | 	<script>
 24 |           var type=0;
 25 |           var index;
 26 | 	</script>
 27 | </head>
 28 | <body onload="init();ini();">
 29 | 	<div class="mainSub">
 30 | 		<div class="header">
 31 | 			<img class="logo" src="../image/logo.png" alt="logo" onclick="window.location.href='../index.html'" />
 32 | 			<div class="navList">
 33 | 			        <a href="BST.html" class="nav" style="text-decoration:none;">BST</a>
 34 | 			        <a href="heap.html" class="nav" style="text-decoration:none;">堆</a>
 35 | 			        <a href="HuffmanTree.html" class="nav" style="text-decoration:none;">霍夫曼树</a>
 36 | 			        <a href="avlTree.html" class="nav" style="text-decoration:none;">AVL树</a>
 37 | 			        <a href="BT2T.html" class="nav selected" style="text-decoration:none;">二叉树转换</a>
 38 | 			        <a href="thrdBtree.html" class="nav" style="text-decoration:none;">线索二叉树</a>
 39 | 			</div>
 40 | 		</div>
 41 | 		<div class="showBox" width="1000" height="500" style="overflow: scroll;">
 42 | 		   <canvas id="drawing" width="2000" height="1000">Canvas</canvas>
 43 | 		</div>
 44 | 		<div class="treeBT2TStartHide">
 45 | 			<img src="../image/arrow_white_right.png" alt="" />
 46 | 		</div>
 47 | 		<div class="BT2TStarts">
 48 | 			<!--p class="r1">转换方式</p>
 49 | 			<p class="r2">添加边</p>
 50 | 			<p class="r3">转换</p>
 51 | 			<p class="r4">刷新</p-->
 52 | 			<p class="r1" id="autoBT2T">自动演示</p>
 53 | 		</div>
 54 | 		<div class="T2BTAction subD1">
 55 | 			<p>树转二叉树</p>
 56 | 		</div>
 57 | 		<div class="BT2TAction subD1">
 58 | 			<p>二叉树转树</p>
 59 | 		</div>
 60 | 		<!--div class="transformMethod subD1" onmouseenter="enterFun(this);" onmouseleave="leaveFun(this);">
 61 | 			<select name="" id="treeStyle">
 62 | 				<option value="bTree"></option>
 63 | 				<option value="bTree">bTree</option>
 64 | 				<option value="Tree">Tree</option>
 65 | 			</select>
 66 | 		</div>
 67 | 		<div class="BT2TNode subD2" onmouseenter="enterFun(this);" onmouseleave="leaveFun(this);"> 
 68 | 			<span>节点</span>
 69 | 			<input type="text" class="parentNodeDetail"/>
 70 | 		</div>
 71 | 		<div class="leftOrRight subD2" onmouseenter="enterFun(this);" onmouseleave="leaveFun(this);">
 72 | 			<span>的</span>
 73 | 			<select name="" id="zuoyou">
 74 | 				<option value="left">left</option>
 75 | 				<option value="right">right</option>
 76 | 			</select>
 77 | 		</div>
 78 | 		<div class="childNode subD2" onmouseenter="enterFun(this);" onmouseleave="leaveFun(this);">
 79 | 			<span>子节点是</span>
 80 | 			<input type="text" class="childNodeDetail"/>
 81 | 		</div>
 82 | 		<div class="BCreateLine subD2" onmouseenter="enterFun(this);" onmouseenter="enterFun(this);" onmouseleave="leaveFun(this);">
 83 | 			<p>生成边</p>
 84 | 		</div>
 85 | 		<div class="transformP subD3 " onmouseenter="enterFun(this);" onmouseleave="leaveFun(this);">
 86 | 			<p>转换</p>
 87 | 		</div>
 88 | 		<div class="updateP subD4" onmouseenter="enterFun(this);" onmouseleave="leaveFun(this);">
 89 | 			<p>刷新</p>
 90 | 		</div-->
 91 | 		<div class="stateHide">
 92 | 			<img src="../image/arrow_white_right.png" alt="" />
 93 | 		</div>
 94 | 		<div class="state">
 95 | 			<p></p>
 96 | 		</div>
 97 | 		<!--div class="codeHide">
 98 | 			<img src="../image/arrow_white_right.png" alt="" />
 99 | 		</div>
100 | 		<div class="codes">
101 | 			<p>xx</p>
102 | 			<p>xx</p>
103 | 			<p>xx</p>
104 | 			<p>xx</p>
105 | 			<p>xx</p>
106 | 			<p>xx</p>
107 | 	    </div-->
108 | 	</div>
109 | 	<div class="controlBar">
110 |     	<input type="range" name="controlSlider" id="controlSlider"  min="1" max="100" value="60" onchange="setAnimationSpeed(this.value);" />
111 | 	</div>
112 | 	<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1256898616'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/z_stat.php%3Fid%3D1256898616' type='text/javascript'%3E%3C/script%3E"));</script>
113 | </body>
114 | </html>


--------------------------------------------------------------------------------
/tree/HuffmanTree.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 | <head>
 4 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
 5 | 	<script src="../jquery.js"></script>
 6 | 	<script src="../index.js"></script>
 7 | 	<script type = "application/javascript" src = "../js/AnimationManager.js"> </script>
 8 |     <script type = "application/javascript" src = "../js/ObjectManager.js"> </script>
 9 |     <script type = "application/javascript" src = "../js/AnimatedObject.js"> </script>
10 |     <script type = "application/javascript" src = "../js/AnimatedCircle.js"> </script>
11 | 	<script type = "application/javascript" src = "../js/AnimatedHighlightCircle.js"> </script>
12 |     <script type = "application/javascript" src = "../js/AnimatedLine.js"> </script>
13 |     <script type = "application/javascript" src = "../js/AnimatedLabel.js"> </script>
14 |     <script type = "application/javascript" src = "../js/AnimatedRectangle.js"> </script>
15 |     <script type = "application/javascript" src = "../js/AnimatedPointer.js"> </script>
16 | 	<script type = "application/javascript" src = "../js/AnimatedHighlightRectangle.js"> </script>
17 |     <script type = "application/javascript" src = "../js/Algorithm.js"> </script>
18 |     <script type = "application/javascript" src = "../js/Huffman.js"> </script>
19 | 	<link rel="stylesheet" href="../css/index.css" />
20 | 	<link rel="stylesheet" type="text/css" href="../css/tree.css"/>
21 | 	<link rel="shortcut icon" href="../favicon.ico" />
22 | 	<title>霍夫曼树</title>
23 | 	<script>
24 |           var type=0;
25 |           var index;
26 | 	</script>
27 | </head>
28 | <body onload="init();ini();">
29 | 	<div class="mainSub">
30 | 		<div class="header">
31 | 			<img class="logo" src="../image/logo.png" alt="logo" onclick="window.location.href='../index.html'" />
32 | 			<div class="navList">
33 | 			        <a href="BST.html" class="nav" style="text-decoration:none;">BST</a>
34 | 			        <a href="heap.html" class="nav" style="text-decoration:none;">堆</a>
35 | 			        <a href="HuffmanTree.html" class="nav selected" style="text-decoration:none;">霍夫曼树</a>
36 | 			        <a href="avlTree.html" class="nav" style="text-decoration:none;">AVL树</a>
37 | 			        <a href="BT2T.html" class="nav" style="text-decoration:none;">二叉树转换</a>
38 | 			        <a href="thrdBtree.html" class="nav" style="text-decoration:none;">线索二叉树</a>
39 | 			</div>
40 | 		</div>
41 | 		<div class="showBox" width="1000" height="500" style="overflow: scroll;">
42 | 		   <canvas id="drawing" width="2000" height="1000">Canvas</canvas>
43 | 		</div>
44 | 		<div class="HuffmanStartHide">
45 | 			<img src="../image/arrow_white_right.png" alt="" />
46 | 		</div>
47 | 		<div class="HuffmanStarts" >
48 | 			<p class="r1" onmouseenter="enterFun(this);" onmouseleave="leaveFun(this);">插入</p>
49 | 			<p class="r2" id="autoHuffman" onmouseenter="enterFun(this);" onmouseleave="leaveFun(this);">自动演示</p>
50 | 		</div>
51 | 		<div class="subE1 HuffmanInput" onmouseenter="enterFun(this);" onmouseleave="leaveFun(this);">
52 | 			<span>文本</span>
53 | 			<input type="text" class="inputText"/>
54 | 		</div>
55 | 		<div class="createHuffman subE1" onmouseenter="enterFun(this);" onmouseenter="enterFun(this);" onmouseleave="leaveFun(this);">
56 | 			<p>建立Huffman树</p>
57 | 		</div>
58 | 		<div class="stateHide">
59 | 			<img src="../image/arrow_white_right.png" alt="" />
60 | 		</div>
61 | 		<div class="state">
62 | 			<p>输入一串文本，用逗号分开。</p>
63 | 		</div>
64 | 		<!--div class="codeHide">
65 | 			<img src="../image/arrow_white_right.png" alt="" />
66 | 		</div>
67 | 		<div class="codes">
68 | 			<p>xx</p>
69 | 			<p>xx</p>
70 | 			<p>xx</p>
71 | 			<p>xx</p>
72 | 			<p>xx</p>
73 | 			<p>xx</p>
74 | 	    </div-->
75 | 	</div>
76 | 	<div class="controlBar">
77 |     	<input type="range" name="controlSlider" id="controlSlider"  min="1" max="100" value="60" onchange="setAnimationSpeed(this.value);" />
78 | 	</div>
79 | 	<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1256898616'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/z_stat.php%3Fid%3D1256898616' type='text/javascript'%3E%3C/script%3E"));</script>
80 | </body>
81 | </html>


--------------------------------------------------------------------------------
/tree/avlTree.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 | <head>
 4 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
 5 | 	<script src="../jquery.js"></script>
 6 | 	<script src="../index.js"></script>
 7 | 	<script type = "application/javascript" src = "../js/AnimationManager.js"> </script>
 8 |     <script type = "application/javascript" src = "../js/ObjectManager.js"> </script>
 9 |     <script type = "application/javascript" src = "../js/AnimatedObject.js"> </script>
10 |     <script type = "application/javascript" src = "../js/AnimatedCircle.js"> </script>
11 | 	<script type = "application/javascript" src = "../js/AnimatedHighlightCircle.js"> </script>
12 |     <script type = "application/javascript" src = "../js/AnimatedLine.js"> </script>
13 |     <script type = "application/javascript" src = "../js/AnimatedRectangle.js"> </script>
14 |     <script type = "application/javascript" src = "../js/AnimatedPointer.js"> </script>
15 | 	<script type = "application/javascript" src = "../js/AnimatedHighlightRectangle.js"> </script>
16 |     <script type = "application/javascript" src = "../js/Algorithm.js"> </script>
17 |     <script type = "application/javascript" src = "../js/AVLTree.js"> </script>
18 | 	<link rel="stylesheet" href="../css/index.css" />
19 | 	<link rel="stylesheet" type="text/css" href="../css/sort.css"/>
20 | 	<link rel="stylesheet" type="text/css" href="../css/tree.css" />
21 | 	<link rel="shortcut icon" href="../favicon.ico" />
22 | 	<title>AVL树</title>
23 | 	<script>
24 |           var type=0;
25 |           var index;
26 | 	</script>
27 | </head>
28 | <body onload="init();ini();">
29 | 	<div class="mainSub">
30 | 		<div class="header">
31 | 			<img class="logo" src="../image/logo.png" alt="logo" onclick="window.location.href='../index.html'" />
32 | 			<div class="navList">
33 | 			        <a href="BST.html" class="nav" style="text-decoration:none;">BST</a>
34 | 			        <a href="heap.html" class="nav" style="text-decoration:none;">堆</a>
35 | 			        <a href="HuffmanTree.html" class="nav" style="text-decoration:none;">霍夫曼树</a>
36 | 			        <a href="avlTree.html" class="nav selected" style="text-decoration:none;">AVL树</a>
37 | 			        <a href="BT2T.html" class="nav" style="text-decoration:none;">二叉树转换</a>
38 | 			        <a href="thrdBtree.html" class="nav" style="text-decoration:none;">线索二叉树</a>
39 | 			</div>
40 | 		</div>
41 | 		<div class="showBox" width="1000" height="500" style="overflow: scroll;">
42 | 		   <canvas id="drawing" width="2000" height="1000">Canvas</canvas>
43 | 		</div>
44 | 		<div class="treeStartHide">
45 | 			<img src="../image/arrow_white_right.png" alt="" />
46 | 		</div>
47 | 		<div class="avlTreeStarts">
48 | 			<p class="a1">自动演示</p>
49 | 		</div>
50 | 		<!--div class="avlInsert subA1">
51 | 			<span>数值</span>
52 | 			<input type="text" class="avlNumber"/>
53 | 		</div-->
54 | 		<div class="avlAction subA1">
55 | 			<p>演示</p>
56 | 		</div>
57 |         <div class="avlDelete subA1">
58 |             <p>随机删除</p>
59 |         </div>
60 | 		<div class="stateHide">
61 | 			<img src="../image/arrow_white_right.png" alt="" />
62 | 		</div>
63 | 		<div class="state">
64 | 			<p>平台只支持数字节点，暂不支持字母或字符串</p>
65 | 		</div>
66 | 		<!--div class="codeHide">
67 | 			<img src="../image/arrow_white_right.png" alt="" />
68 | 		</div>
69 | 		<div class="codes">
70 | 			<p>xx</p>
71 | 			<p>xx</p>
72 | 			<p>xx</p>
73 | 			<p>xx</p>
74 | 			<p>xx</p>
75 | 			<p>xx</p>
76 | 	    </div-->
77 | 	    <div class="controlBar">
78 | 	    	<input type="range" name="controlSlider" id="controlSlider"  min="1" max="100" value="60" onchange="setAnimationSpeed(this.value);" />
79 | 	    </div>
80 | 	</div>
81 | 	<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1256898616'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/z_stat.php%3Fid%3D1256898616' type='text/javascript'%3E%3C/script%3E"));</script>
82 | </body>
83 | </html>


--------------------------------------------------------------------------------
/tree/heap.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 | <head>
 4 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
 5 | 	<script src="../jquery.js"></script>
 6 | 	<script src="../index.js"></script>
 7 | 	<script type = "application/javascript" src = "../js/AnimationManager.js"> </script>
 8 |     <script type = "application/javascript" src = "../js/ObjectManager.js"> </script>
 9 |     <script type = "application/javascript" src = "../js/AnimatedObject.js"> </script>
10 |     <script type = "application/javascript" src = "../js/AnimatedCircle.js"> </script>
11 | 	<script type = "application/javascript" src = "../js/AnimatedHighlightCircle.js"> </script>
12 |     <script type = "application/javascript" src = "../js/AnimatedLine.js"> </script>
13 |     <script type = "application/javascript" src = "../js/AnimatedRectangle.js"> </script>
14 |     <script type = "application/javascript" src = "../js/AnimatedPointer.js"> </script>
15 | 	<script type = "application/javascript" src = "../js/AnimatedHighlightRectangle.js"> </script>
16 |     <script type = "application/javascript" src = "../js/Algorithm.js"> </script>
17 |     <script type = "application/javascript" src = "../js/Heap.js"> </script>
18 | 	<link rel="stylesheet" href="../css/index.css" />
19 | 	<link rel="stylesheet" type="text/css" href="../css/tree.css" />
20 | 	<link rel="shortcut icon" href="../favicon.ico" />
21 | 	<title>堆</title>
22 | 	<style>
23 | 	</style>
24 | 	<script>
25 |           var type=0;
26 |           var index;
27 | 	</script>
28 | </head>
29 | <body onload="init();ini();">
30 | 	<div class="mainSub">
31 | 		<div class="header">
32 | 			<img class="logo" src="../image/logo.png" alt="logo" onclick="window.location.href='../index.html'" />
33 | 			<div class="navList">
34 | 			        <a href="BST.html" class="nav" style="text-decoration:none;">BST</a>
35 | 			        <a href="heap.html" class="nav selected" style="text-decoration:none;">堆</a>
36 | 			        <a href="HuffmanTree.html" class="nav" style="text-decoration:none;">霍夫曼树</a>
37 | 			        <a href="avlTree.html" class="nav" style="text-decoration:none;">AVL树</a>
38 | 			        <a href="BT2T.html" class="nav" style="text-decoration:none;">二叉树转换</a>
39 | 			        <a href="thrdBtree.html" class="nav" style="text-decoration:none;">线索二叉树</a>
40 | 			</div>
41 | 		</div>
42 | 		<div class="showBox" width="1000" height="500" style="overflow: scroll;">
43 | 		   <canvas id="drawing" width="2000" height="1000">Canvas</canvas>
44 | 		</div>
45 | 		<div class="treeStartHide">
46 | 			<img src="../image/arrow_white_right.png" alt="" />
47 | 		</div>
48 | 		<div class="heapStarts">
49 | 			<p class="b1">增删结点</p>
50 | 		</div>
51 | 		<div class="heapNum subH1">
52 | 			<span>数值</span>
53 | 			<input type="text" class="heapNumber"/>
54 | 		</div>
55 | 		<div class="heapInsert subH1">
56 | 			<p>插入</p>
57 | 		</div>
58 | 		<div class="heapDelete subH1">
59 | 			<p>删除</p>
60 | 		</div>
61 | 		<div class="stateHide">
62 | 			<img src="../image/arrow_white_right.png" alt="" />
63 | 		</div>
64 | 		<div class="state">
65 | 			<p></p>
66 | 		</div>
67 | 		<!--div class="codeHide">
68 | 			<img src="../image/arrow_white_right.png" alt="" />
69 | 		</div>
70 | 		<div class="codes">
71 | 			<p>xx</p>
72 | 			<p>xx</p>
73 | 			<p>xx</p>
74 | 			<p>xx</p>
75 | 			<p>xx</p>
76 | 			<p>xx</p>
77 | 	    </div-->
78 | 	    <div class="controlBar">
79 | 	    	<input type="range" name="controlSlider" id="controlSlider"  min="1" max="100" value="60" onchange="setAnimationSpeed(this.value);" />
80 | 	    </div>
81 | 	</div>
82 | 	<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1256898616'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/z_stat.php%3Fid%3D1256898616' type='text/javascript'%3E%3C/script%3E"));</script>
83 | </body>
84 | </html>


--------------------------------------------------------------------------------
/tree/thrdBtree.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3 | <head>
  4 | 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
  5 | 	<script src="../jquery.js"></script>
  6 | 	<script src="../index.js"></script>
  7 | 	<script type = "application/javascript" src = "../js/AnimationManager.js"> </script>
  8 |     <script type = "application/javascript" src = "../js/ObjectManager.js"> </script>
  9 |     <script type = "application/javascript" src = "../js/AnimatedObject.js"> </script>
 10 |     <script type = "application/javascript" src = "../js/AnimatedCircle.js"> </script>
 11 | 	<script type = "application/javascript" src = "../js/AnimatedHighlightCircle.js"> </script>
 12 |     <script type = "application/javascript" src = "../js/AnimatedLine.js"> </script>
 13 |     <script type = "application/javascript" src = "../js/AnimatedLabel.js"> </script>
 14 |     <script type = "application/javascript" src = "../js/AnimatedRectangle.js"> </script>
 15 |     <script type = "application/javascript" src = "../js/AnimatedPointer.js"> </script>
 16 | 	<script type = "application/javascript" src = "../js/AnimatedHighlightRectangle.js"> </script>
 17 |     <script type = "application/javascript" src = "../js/Algorithm.js"> </script>
 18 |     <script type = "application/javascript" src = "../js/ThrdBTree.js"> </script>
 19 | 	<link rel="stylesheet" href="../css/index.css" />
 20 | 	<link rel="stylesheet" type="text/css" href="../css/tree.css"/>
 21 | 	<link rel="shortcut icon" href="../favicon.ico" />
 22 | 	<title>线索二叉树</title>
 23 | 	<script>
 24 |           var type=0;
 25 |           var index;
 26 | 	</script>
 27 | </head>
 28 | <body onload="init();ini();">
 29 | 	<div class="mainSub">
 30 | 		<div class="header">
 31 | 			<img class="logo" src="../image/logo.png" alt="logo" onclick="window.location.href='../index.html'" />
 32 | 			<div class="navList">
 33 | 			        <a href="BST.html" class="nav" style="text-decoration:none;">BST</a>
 34 | 			        <a href="heap.html" class="nav" style="text-decoration:none;">堆</a>
 35 | 			        <a href="HuffmanTree.html" class="nav" style="text-decoration:none;">霍夫曼树</a>
 36 | 			        <a href="avlTree.html" class="nav" style="text-decoration:none;">AVL树</a>
 37 | 			        <a href="BT2T.html" class="nav" style="text-decoration:none;">二叉树转换</a>
 38 | 			        <a href="thrdBtree.html" class="nav selected" style="text-decoration:none;">线索二叉树</a>
 39 | 			</div>
 40 | 		</div>
 41 | 		<div class="showBox" width="1000" height="500" style="overflow: scroll;">
 42 | 		   <canvas id="drawing" width="2000" height="1000">Canvas</canvas>
 43 | 		</div>
 44 | 		<div class="ThrdBtreestartHide">
 45 | 			<img src="../image/arrow_white_right.png" alt="" />
 46 | 		</div>
 47 | 		<div class="ThrdBtreestarts">
 48 | 			<p class="r1" onmouseenter="enterFun(this);" onmouseleave="leaveFun(this);">添加边</p>
 49 | 			<p class="r2" onmouseenter="enterFun(this);" onmouseleave="leaveFun(this);">线索化</p>
 50 | 			<p class="r3" onmouseenter="enterFun(this);" onmouseleave="leaveFun(this);">刷新页面</p>
 51 | 			<p class="r4" id="autoThrdTree" onmouseenter="enterFun(this);" onmouseleave="leaveFun(this);">自动演示</p>
 52 | 		</div>
 53 | 		<div class="ThrdBtreeNode subF1" onmouseenter="enterFun(this);" onmouseleave="leaveFun(this);">
 54 | 			<span>节点</span>
 55 | 			<input type="text" class="parentNodeDetail"/>
 56 | 		</div>
 57 | 		<div class="ThrdBtreeRight subF1" onmouseenter="enterFun(this);" onmouseleave="leaveFun(this);">
 58 | 			<span>的</span>
 59 | 			<select name="" id="ThrdBtreezuoyou">
 60 | 				<option value="left">left</option>
 61 | 				<option value="right">right</option>
 62 | 			</select>
 63 | 		</div>
 64 | 		<div class="ThrdBtreechildNode subF1" onmouseenter="enterFun(this);" onmouseleave="leaveFun(this);">
 65 | 			<span>子节点是</span>
 66 | 			<input type="text" class="childNodeDetail"/>
 67 | 		</div>
 68 | 		<div class="ThrdBtreeCreateLine subF1" onmouseenter="enterFun(this);" onmouseleave="leaveFun(this);">
 69 | 			<p>生成边</p>
 70 | 		</div>
 71 | 		<div class="addThrd subF2" onmouseenter="enterFun(this);" onmouseleave="leaveFun(this);">
 72 | 			<p>加入线索</p>
 73 | 		</div>
 74 | 		<div class="ThrdUpdate subF3" onmouseenter="enterFun(this);" onmouseleave="leaveFun(this);">
 75 | 			<p>刷新</p>
 76 | 		</div>
 77 | 		<div class="stateHide">
 78 | 			<img src="../image/arrow_white_right.png" alt="" />
 79 | 		</div>
 80 | 		<div class="state">
 81 | 			<p>中序线索化二叉树</p>
 82 | 		</div>
 83 | 		<!--div class="codeHide">
 84 | 			<img src="../image/arrow_white_right.png" alt="" />
 85 | 		</div>
 86 | 		<div class="codes">
 87 | 			<p>xx</p>
 88 | 			<p>xx</p>
 89 | 			<p>xx</p>
 90 | 			<p>xx</p>
 91 | 			<p>xx</p>
 92 | 			<p>xx</p>
 93 | 	    </div-->
 94 | 	</div>
 95 | 	<div class="controlBar">
 96 |     	<input type="range" name="controlSlider" id="controlSlider"  min="1" max="100" value="60" onchange="setAnimationSpeed(this.value);" />
 97 | 	</div>
 98 | 	<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1256898616'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/z_stat.php%3Fid%3D1256898616' type='text/javascript'%3E%3C/script%3E"));</script>
 99 | </body>
100 | </html>


--------------------------------------------------------------------------------