JS实现冒泡排序，插入排序和快速排序并排序输出-js教程-PHP中文网

首页

web前端

js教程

JS实现冒泡排序，插入排序和快速排序并排序输出

高洛峰

Dec 29, 2016 pm 03:54 PM

在一次面试中被问到了此问题，但是真是懵了，没能回答上来，后来通过JS整理了一下，在结合html代码做了一个文本框，把输入的内容从文本框排序输出，再次不做叙述了，下面通过一段代码给大家展示下：

以下是代码：

index.html
 
 <!DOCTYPE html>
 <html>
 <head>
   <title>Sorting</title>
   <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
  
   <!--主要页面结构-->
   <div class="container">
     <input type="text" name="number" id="number" placeholder="Please enter 10 numbers(don&#39;t leave space)" />
     <a href="javascript:void()" class="sortbtn" id="resultBtn">Sort</a>
     <label class="title">After Sorted:</label>
  
     <!--以下三个label分别显示冒泡，插入，快速排序的结果-->
     <label class="result" for="bubblesort"></label>
     <label class="result" for="insertsort"></label>
     <label class="result" for="quicksort"></label>
   </div>
   <!--end-->
    
   <script type="text/javascript" src="script.js"></script>
 </body>
 </html>

来给这个页面写点样式，不然就太不好看了。

style.css
 
 *{
   margin: 0;
   padding: 0;
   list-style: none;
 }
 .container{
   width: 400px;
   margin: 100px auto;
 }
 input[type="text"]{
   display: block;
   width: 400px;
   height: 40px;
   text-align: center;
   line-height: 40px;
   outline: none;
   font-size: 14px;
   border-radius: 15px;
   border: 1px solid #aaaaaa;
 }
 .sortbtn{
   display: block;
   width: 200px;
   height: 34px;
   text-align: center;
   line-height: 34px;
   border: 1px solid black;
   border-radius: 10px;
   text-decoration: none;
   color: black;
   margin-left: 100px;
   margin-top: 30px;
 }
 .sortbtn:hover{
   display: block;
   background-color: black;
   color: #ffffff;
 }
 label{
   display: block;
   width: 200px;
   text-align: center;
   margin-left: 100px;
   margin-top: 20px;
   font-size: 20px;
 }

然后就是主要的功能实现了。

script.js
 
window.onload = function(){
  var btn = document.getElementById("resultBtn");      //结果输出按钮
  var inputnum = document.getElementById("number");    //数字输入框
  var resultlbl =document.getElementsByTagName("label");  //结果显示的label 
  var i,j,temp;
 
  //冒泡排序
  var bubble = function(arr){
    for(i=0;i<9;i++){
      for(j=0;j<9-i;j++){
        if(arr[j] > arr[j+1]){
          temp = arr[j];
          arr[j] = arr[j+1];
          arr[j+1] = temp;
        }
      }
    }
    return arr;
  }
 
  //插入排序
  var insersort = function(arr){
    for(i=1;i<10;i++){
      temp = arr[i];
      j = i;
      while(j > 0 && arr[j-1] > temp){
        arr[j] = arr[j-1];
        j--;
      }
      arr[j] = temp;
    }
    return arr;
  }
 
  //快速排序
  var quicksort = function(arr){
    var basenum,basenumIndex;
    var left = [];
    var right = [];
 
    if(arr.length <= 1){
      return arr;
    }
    //基准数的位置
    basenumIndex = Math.floor(arr.length/2);
    basenum = arr.splice(basenumIndex,1)[0];
    for(i=0;i<arr.length;i++){
      if(arr[i] < basenum){
        left.push(arr[i]);
      }
      else{
        right.push(arr[i]);
      }
     }
     //递归调用
     return quicksort(left).concat([basenum],quicksort(right));
   }
  
   //判断输入的值类型是否为数字
   function isNum(num){
    var reNum =/^[0-9]+$/;
    return (reNum.test(num)); 
}
  
   //按钮点击事件
   btn.onclick = function(){
     //判断输入的值的类型和长度以及是否为空
     if(!isNum(inputnum.value) || inputnum.value == "" || inputnum.value.length > 10 || inputnum.value.length < 10){
       resultlbl[0].innerHTML = "Your format is wrong![Must Be 10 numbers]";
       resultlbl[0].style.color = "red";
     }
     else{
       resultlbl[0].innerHTML = "After Sorted:";
       resultlbl[0].style.color = "black";
       var inputstream = inputnum.value.toString();  //将输入的内容转换为字符串
       var data = inputstream.split("");        //将转换的字符串分割，相当于转化为数组
        
       //结果输出
       resultlbl[1].innerHTML = "BubbleSort:" + "<br/>" + bubble(data);
       resultlbl[2].innerHTML = "InsertSort:" + "<br/>" + insersort(data);
       resultlbl[3].innerHTML = "QuickSort:" + "<br/>" + quicksort(data);
     }
   }
 }

最后的效果是这样的：

未输入情况下，一只安静的文本框，一只安静的按钮和一个label：

JS实现冒泡排序，插入排序和快速排序并排序输出

输入的不是数字，未输入十位或者超出十位，或者为空，点击按钮之后，都会提示错误：

为空：

JS实现冒泡排序，插入排序和快速排序并排序输出

不是数字且不足十位：

JS实现冒泡排序，插入排序和快速排序并排序输出

超出十位：

JS实现冒泡排序，插入排序和快速排序并排序输出

输入正确的情况下：

JS实现冒泡排序，插入排序和快速排序并排序输出

提示：输入的数字之间不用加空格，输入的数字之间不用加空格，输入的数字之间不用加空格，重要的事情说三遍

需要注意的是文本框中输入的数字只能是一位的数字（0-9），有关两位数字甚至更多位数字的排序方法请继续追踪此网站。希望这些内容对大家有所帮助。

更多JS实现冒泡排序，插入排序和快速排序并排序输出相关文章请关注PHP中文网！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

JavaScript的角色：使网络交互和动态Apr 24, 2025 am 12:12 AM

JavaScript是现代网站的核心，因为它增强了网页的交互性和动态性。1)它允许在不刷新页面的情况下改变内容，2)通过DOMAPI操作网页，3)支持复杂的交互效果如动画和拖放，4)优化性能和最佳实践提高用户体验。

C和JavaScript：连接解释Apr 23, 2025 am 12:07 AM

C 和JavaScript通过WebAssembly实现互操作性。1）C 代码编译成WebAssembly模块，引入到JavaScript环境中，增强计算能力。2）在游戏开发中，C 处理物理引擎和图形渲染，JavaScript负责游戏逻辑和用户界面。

从网站到应用程序：JavaScript的不同应用Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中，JavaScript与HTML、CSS一起操作DOM，实现动态效果，并支持如jQuery、React等框架。2)通过ReactNative和Ionic，JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行，支持高并发请求。

Python vs. JavaScript：比较用例和应用程序Apr 21, 2025 am 12:01 AM

Python更适合数据科学和自动化，JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色，使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺，用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用，支持全栈开发。