IFE2017/js-task-05.html at master · icyfish/IFE2017 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
<!DOCTYPE>
<html>
  <head>
    <meta charset="utf-8">
    <title>IFE JavaScript Task 05</title>
  <style type="text/css">
    .num-queue {
    	height: 200px;
    	margin: 20px 0 1px 0;
    	position: relative;
    	white-space: nowrap;
    	font-size: 0;
    }
    span {
      font-size: 0;
      display: inline-block;
    	margin: 0 0 0 2px;
    	vertical-align: bottom;
    	position: relative;
    	width: 20px;
    	background: #2be;
    }
    .sort-container {
      margin: 20px 0 1px 0;
    }
  </style>
  </head>
<body>
  <div>
    <input type='text' class='num'/>
    <button class='left-in'>左侧入</button>
    <button class='right-in'>右侧入</button>
    <button class='left-out'>左侧出</button>
    <button class='right-out'>右侧出</button>
  </div>
  <div class='num-queue'>
    <!-- 初始数据 -->
    <span>23</span>
    <span>34</span>
    <span>14</span>
    <span>38</span>
    <span>42</span>
    <span>23</span>
    <span>15</span>
    <span>54</span>
    <span>65</span>
    <span>43</span>
    <span>78</span>
  </div>
  <div class='sort'>
    <button class='bubble'>冒泡排序</button>
    <button class='selection'>选择排序</button>
    <button class='insertion'>插入排序</button>
  </div>
  <div class='sort-container'>
  </div>
<script>
(function(){

  const inputBox = document.querySelector('.num');
  const leftIn = document.querySelector('.left-in');
  const rightIn = document.querySelector('.right-in');
  const leftOut = document.querySelector('.left-out');
  const rightOut = document.querySelector('.right-out');
  const bubble = document.querySelector('.bubble');
  const selection = document.querySelector('.selection');
  const insertion = document.querySelector('.insertion');

  // 从右侧添加数字

  function appendItem(){
    const numQueue = document.querySelector('.num-queue');
    const numContainer = document.createElement('span');
    if(validateInput(inputBox)){
      numContainer.textContent = inputBox.value;
      // 动态添加图表高度样式
      numContainer.style.height = +inputBox.value;
      numQueue.appendChild(numContainer);
    };
  };

  // 从左侧添加数字

  function insertItem(){
    const numQueue = document.querySelector('.num-queue');
    const numContainer = document.createElement('span');
    if(validateInput(inputBox)){
      numContainer.textContent = inputBox.value;
      numContainer.style.height = +inputBox.value;
      numQueue.insertBefore(numContainer, numQueue.firstChild);
    };
  }

  // 移除数字

  function removeItem(item){
    const numQueue = document.querySelector('.num-queue');
    if(numQueue.firstElementChild){
      numQueue.removeChild(item);
      alert(`队列中还剩下${numQueue.children.length}个数字。`);
    } else {
      alert(`队列中没有数字, 请添加。`);
    }
  }

  // 限制输入为10-100之内的数字

  function validateInput(input){
    if(Number(input.value) >= 10 && Number(input.value) <= 100){
      return input.value;
    } else{
      input.focus();
      alert('请输入10-100之间的数字!');
    }
  };

  // 为按钮添加点击事件

  function clickHandler(btn){
    btn.addEventListener('click', () => {
      const numQueue = document.querySelector('.num-queue');
      switch (btn) {
        case rightIn:
          if(document.querySelectorAll('.num-queue span').length < 60){
            // 将数列长度限制为60个以内
            appendItem();
          } else {
            alert('数字个数已达60上限!');
          }
          inputBox.value = '';
          clickNumToRemove();
          break;
        case leftIn:
          if(document.querySelectorAll('.num-queue span').length < 60){
            numQueue.children[0] ? insertItem() : appendItem();
          } else {
            alert('数字个数已达60上限!');
          }
          inputBox.value = '';
          clickNumToRemove();
          break;
        case rightOut:
          removeItem(numQueue.lastElementChild);
          break;
        case leftOut:
          removeItem(numQueue.firstElementChild);
          break;
        case bubble:
          bubbleSort();
          renderSortedArray(bubbleSort);
          break;
        case selection:
          selectionSort();
          renderSortedArray(selectionSort);
          break;
        case insertion:
          insertionSort();
          renderSortedArray(insertionSort);
          break;
      }
    })
  };

  // 点击队列某个元素以删除该元素

  function clickNumToRemove(){
    const nums = document.querySelectorAll('.num-queue span');
    nums.forEach(num => {
      num.onclick = function(){
        removeItem(this);
      }
    });
  };

  function swap(items, firstIndex, secondIndex){
    var temp = items[firstIndex];
    items[firstIndex] = items[secondIndex];
    items[secondIndex] = temp;
  };

  // 冒泡排序
  function bubbleSort(){
    let items = [...document.querySelectorAll('.num-queue span')].map(num => +num.textContent);
    let len = items.length, i, j, stop;

    for (i = 0; i < len; i++){
      for (j = 0, stop = len-i; j < stop; j++){
        if (items[j] > items[j+1]){
          swap(items, j, j+1);
        }
      }
    }
    return items;
  };

  // 选择排序
  function selectionSort(){
    let items = [...document.querySelectorAll('.num-queue span')].map(num => +num.textContent);
    let len = items.length, min;

    for (i = 0; i < len; i++){
      min = i;
      for(j = i + 1; j < len; j++){
        if(items[j] < items[min]){
          min = j;
        }
      }
      if(i != min){
        swap(items, i, min);
      }
    }
    return items;
  };

  // 插入排序

  function insertionSort() {
    let items = [...document.querySelectorAll('.num-queue span')].map(num => +num.textContent);
    let len = items.length, value, i, j;
    for (i=0; i < len; i++) {
      value = items[i];
      for (j=i-1; j > -1 && items[j] > value; j--) {
        items[j+1] = items[j];
      }
      items[j+1] = value;
    }
    return items;
  };

  // 将排好序的数组渲染到DOM中
  function renderSortedArray(sortFunc){
    const sortedArray = sortFunc().map(num => {
      return `<span style="height: ${num}px;">${num}</span>`;
    });
    document.querySelector('.sort-container').innerHTML = sortedArray.join('');
  }


  function init(){
    clickHandler(rightIn);
    clickHandler(leftIn);
    clickHandler(rightOut);
    clickHandler(leftOut);
    clickHandler(bubble);
    clickHandler(selection);
    clickHandler(insertion);
    clickNumToRemove();
    // 给初始数据添加样式
    document.querySelectorAll('.num-queue span').forEach(span => {
      span.style.height = +span.textContent;
    });
  };

  init();
  })();

</script>
</body>
</html>