以前参加面试的时候，被问到过让用JS实现一个快速排序，当时太年轻，并没有回答上来。

于是，这里便把三种排序都用JS来做了一下。结合html，从input文本框中获取输入进行排序。

关于这几种算法的原理，我在这里也不过多叙述了。必要的地方，我在代码里面注释了一下的。

以下是代码：

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'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:;

     padding:;

     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：

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

为空：

不是数字且不足十位：

超出十位：

输入正确的情况下：

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

有一个不足就是，这样排序的话，输入的数字只能是一位的数字（0-9系列），至于如何实现两位数甚至更多位数的排序，还需要进一步学习。

如果大家有什么问题或者建议的，希望不吝赐教！^_^

JS实现冒泡排序，插入排序和快速排序(从input中获取内容)的更多相关文章

  1. input中的内容改变时触发的事件

    input中的内容改变时触发的事件 1. onchange事件与onpropertychange事件的区别: onchange事件在内容改变(两次内容有可能相等)且失去焦点时触发:onproperty ...

  2. 当input中的内容改变时触发的事件

    当input中的内容改变时触发的事件 1 $('#id').bind('input propertychange', function() { //处理内容 } 循环js事件 $(document). ...

  3. JS去遍历Table的所有单元格中的内容

    用JS去遍历Table的所有单元格中的内容,可以用如下JS代码实现 function GetInfoFromTable(tableid) { var tableInfo = ""; ...

  4. iphone中点击input不能选中input中的内容

    点击一个input,通过它的click事件选中这个input框中的内容,这个用jquery挺好实现的,但是有一个问题,在PC端和android手机上都可以让功能正常实现,在iphone上就没有效果了, ...

  5. js数组冒泡排序、快速排序、插入排序

    1.冒泡排序 //第一种 function bubblesort(ary){ for(var i=0;i<ary.length-1;i++){ for(var j=0;j<ary.leng ...

  6. js 实时监听input中值变化

    注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...

  7. JS 捕获 input 中 键盘按键

    JS 捕获 input 中 键盘按键 的相应处理事件是很简单的,google搜索一下很容易找到处理方式,请看如下一种简单的处理方式: HTML代码: <div> <input typ ...

  8. js下读取input中的value值

    很多人(包括我),总想像以前操作js一样,读取到input中的值:document.getElementById('').value; 结果事实证明这样读到得是null. eval(document. ...

  9. [Java]数组排序-选择排序 冒泡排序 插入排序

    1 选择排序  原理:a 将数组中的每个元素,与第一个元素比较          如果这个元素小于第一个元素, 就将这个         两个元素交换.       b 每轮使用a的规则, 可以选择出 ...

随机推荐

  1. win7无法识别U盘，驱动信息：该设备的驱动程序未被安装。 (代码 28)

    台式机的win7 64位系统可以识别u盘,但笔记本的win7 64位却识别不了,说明U盘是可以用的.查看笔记本的设备管理器,发现驱动安装失败,提示信息为“该设备的驱动程序未被安装. (代码 28) ” ...

  2. WebService的优点和基本原理

    WebService简介(1)WebService是一个SOA(面向服务的编程)的架构,它是不依赖于语言,不依赖于平台,可以实现不同的语言间的相互调用,通过Internet进行基于Http协议的网络应 ...

  3. HDU 3416 Marriage Match IV dij+dinic

    题意:给你n个点,m条边的图(有向图,记住一定是有向图),给定起点和终点,问你从起点到终点有几条不同的最短路 分析:不同的最短路,即一条边也不能相同,然后刚开始我的想法是找到一条删一条,然后光荣TLE ...

  4. 自动测试框架（by myself）

    这段日子以来一直在自动话测试,然后关于框架一直有个很模糊的概念,通过N多人的解说,这个应该不能算是一个框架,但是还是很模糊 如下图是我自己认为的框架,不知道是否正确(请大侠们多多指点) 1.用nuni ...

  5. Java笔记(二十八)……IO流下 IO包中其他常用类以及编码表问题

    PrintWriter打印流 Writer的子类,既可以接收字符流,也可以接收字节流,还可以接收文件名或者文件对象,非常方便 同时,还可以设置自动刷新以及保持原有格式写入各种文本类型的print方法 ...

  6. Java笔记(二十)……线程间通信

    概述 当需要多线程配合完成一项任务时,往往需要用到线程间通信,以确保任务的稳步快速运行 相关语句 wait():挂起线程,释放锁,相当于自动放弃了执行权限 notify():唤醒wait等待队列里的第 ...

  7. leetcode—triangle

    1.题目描述 Given a triangle, find the minimum path sum from top to bottom. Each step you may move to adj ...

  8. 【Java基础】增强for循环要注意陷阱

    什么是增强for循环 增强for循环是一种简单模式的for循环,为了方便数组和集合的遍历而存在. int[] arr = new int[]{1, 2, 3, 4, 5, 6}; for (int a ...

  9. openstack 制作大于2TB根分区自动扩容的CENTOS镜像

    制作镜像的时候默认分的是30G空间 qemu-img create -f raw centos.img 30G 看官网文档安装完系统需要安装cloud-init和clout-utils包,本人安装了完 ...

  10. 关于easyui模拟win2012桌面的一个例子系列

    最近时间比较充裕,想到之前领导问我,什么界面更适合公司这种屏幕小但是又要求可以同时处理更多的工作. 我感觉  windows是最合适的,毕竟微软已经做了这么多年的系统了,人的操作习惯已经被他们确定了. ...