Algorithm/order.html at master · yanaxie/Algorithm · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>排序算法</title>
  <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <style>
  .pt10 {
    padding-top: 10px;
  }
  .tc {
    text-align: center;
  }
  </style>
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-xs-6 pt10">
      <form class="form-inline" id="number_form">
        <div class="form-group">
          <label for="numberInput">数字</label>
          <input type="text" class="form-control"
            placeholder="请输入要排序的数字"
          id="numberInput">
        </div>
        <button class="btn btn-primary" type="submit">提交</button>
      </form>
      <div class="row pt10">
        <div class="row col-xs-6 col-xs-offset-3" >
          <table class="table table-striped ">
            <thead>
              <tr>
                <th>序号</th>
                <th>数字</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td colspan="2" class="tc">目前没有数字...</td>
              </tr>
            </tbody>
          </table>
          <button type="button" id="sortBtn" class="btn btn-default">排序</button>
        </div>
      </div>
    </div>
    <div class="col-xs-6 pt10">
      <p class="bg-primary">

      </p>
    </div>
  </div>
</div>
<script>
  const oForm = document.getElementById('number_form');
  const oNumInput = document.getElementById('numberInput');
  const sortBtn = document.getElementById('sortBtn');
  const oMsg=document.querySelector('.bg-primary');
  let gNum = 1;
  const numArr = [];
  const arr=[];
  const orderedArr=[];
  for(let i=0;i<11;i++){
      // 桶子里都是空的
      arr[i]=0;
    }
  oForm.addEventListener('submit', function(event) {
    event.preventDefault();
    // trim string类型的一个方法， 去除左右的空格
    const num = oNumInput.value.trim();
    // 安全性检测
    // num 表单  string类型  parseInt 将字符串变数字
    if(num.length > 0 && !isNaN(num)) {
      if(gNum == 1) {
        document.querySelector('tbody').innerHTML = getTrHtml(num);
      } else {
        document.querySelector('tbody').innerHTML += getTrHtml(num);
      }
      numArr.push(parseInt(num));
      gNum++;
      oNumInput.value = '';
    } else {
      alert('请输入数字');
    }
  });
  // 功能：提供新的一行。
  // 1 序号  从1增
  // 2 用户在表单中填的值
  // 3 返回tr html
  // 需要传参， 当前用户输入的数字
  function getTrHtml(num) {
    const str = `
      <tr>
        <td>${gNum}</td>
        <td>${num}</td>
      </tr>
    `;
    return str;
  }

  // 考试完， 要将同学们的成绩进行排序。
  // 5分 3分  5分  2分 8分
  // 分数的从小到大提序。
  // 数组 桶排序  11 个数的数组  0-10 分  下标就是顺序

  sortBtn.addEventListener('click', function() {
    // 1 获取当前用户输入的数据
    // 倒序
    // console.log(numArr.sort(function(a,b){
    //   return a<b;
    // }));

    for(let i=0;i<numArr.length;i++){
      arr[numArr[i]]++;
    }
      console.log(arr);
    for(let i=0;i<arr.length;i++){
      for(let j=0;j<arr[i];j++){
        // console.log(i+',');
        orderedArr.push(i);
      }
    }
    oMsg.innerHTML=`从小到大排序：${orderedArr.join(',')}`;
  });

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