话不多说，直接上代码

html源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<script src="../../../../CommonJS/jquery-1.9.1.js"></script>

 <script src="../Js/InsertSort.js"></script>

 <link rel="stylesheet" type="text/css" href="../../../../CommCss/base.css">

<title>插入排序</title>

</head>

<body  style="background-color: rgb(236, 236, 199);">

<div class="TopDiv" style="left:380px">

<span style="margin-left:20px">排序规则：输入框中输入以逗号隔开的的数字，排序结果按照从小到大升序排列</span>

<input type="text" style="width:400px;position:absolute;top:60px;left:20px" id="content"/>

<input type="button" id="click" value="单击进行排序 "   style="width:120px;position:absolute;top:60px;left:445px"/>

<label style="width:100px;position:absolute;top:120px;left:20px">结果显示区：</label>

<textarea id="conclude" style="width:500px;height:100px;position:absolute;top:160px;left:120px"></textarea>

</div>

</body>

</html>

　　

js源代码

// JavaScript Document

var myarr=[];

$(function(){

           //单击排序按钮触发的事件

           $("#click").click(function(){

               insert_mine();

               })

          document.onkeydown=function(event){

              var  e=event||window.event||arguments.callee.caller.arguments[0];

              if(e&&e.keyCode==13&&$("#content").is(":focus"))

                      {

                          insert_mine();

                      }

              }

           })

var insert_mine=function(){

    var content=$("#content");

    if(!content.val()){alert("请输入要排序的内容！");return false;};

    var arr=content.val().split(",");

    for(var  i=0;i<arr.length;i++)

    {

        if(isNaN(arr[i])){alert("输入的有非法 数字，程序已经退出！");return false;}

        myarr=arr_solve(myarr,arr[i]);

    }

    alert("排序结束。");

    $("#conclude").val(myarr.toString());

    myarr=[];

}

var arr_solve=function(arr1,i){

    debugger;

    if(arr1.length==0)

    {

        arr1[0]=i;

        }

        else

        {

            for(var k=0;k<arr1.length;k++)

            {

            if(parseInt(arr1[k])>=parseInt(i)&&k<arr1.length)

                {

            //前面的 索引都不用 动 ，要动的是后面的索引

            //arr[k]=i;

            for(var j=arr1.length;j>k;j--)

            {

                arr1[j]=arr1.slice(0)[j-1];

            }

                    arr1[k]=i;

                    console.log(arr1.toString());

                    return arr1;

                    }

                    else

                    {

                        if(arr1.length==k+1)

                        {

                        arr1[arr1.length]=i;

                        console.log(arr1.toString());

                        return arr1;

                        }

                        }

                }

            }

            console.log(arr1.toString());

    return arr1;

    }

输入规则：输入框中输入以逗号隔开的的数字

输出规则:排序结果按照从小到大升序排列

运行结果截图：

这里需要注意的是，数组中元素的交换不能直接用赋值的方式，要用数组自带的slice方法。

备注：运行此程序需要导入jquery库

用js实现插入排序的更多相关文章

  1. javascript的冒泡排序， 快速排序， 选择排序， 插入排序

    冒泡排序, 最经典的排序, 把比较大的数字往后放, 和选择排序恰恰相反: <!DOCTYPE html> <html lang="en"> <head ...

  2. JS实现冒泡排序，插入排序和快速排序(从input中获取内容)

    以前参加面试的时候,被问到过让用JS实现一个快速排序,当时太年轻,并没有回答上来. 于是,这里便把三种排序都用JS来做了一下.结合html,从input文本框中获取输入进行排序. 关于这几种算法的原理 ...

  3. 直接插入排序法原理及其js实现

    直接插入排序法就像我们打扑克牌时整理牌面一样,先让我们脑补一下我们打牌的过程. 首先摸了一张6, 接着摸到一张4,比6小,插到6的前面: 又摸到一张7,比6大,插到6的后面: 又摸到一张5,比6小,比 ...

  4. 使用 js 实现十大排序算法: 插入排序

    使用 js 实现十大排序算法: 插入排序 插入排序 // 双重循环 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!

  5. js【生成规定数量不重复随机数】、【冒泡排序】、【鸡尾酒排序】、【选择排序】、【插入排序】、【未完工的二分插入排序】------【总结】

    [生成规定数量不重复随机数] function creatRandom( num ){ var randomLen = num, ranArr = [], thisRan = null, whileO ...

  6. 结构-行为-样式-Js排序算法之 直接插入排序

    最新因工作原因需要接触到算法,之前学习C++的时候有接触过算法,Javascript中实现算法其实也是大同小异.下面我讲下第一个实现的排序算法--直接插入排序.基本实现思路:假定一个数组中前n(n&g ...

  7. 用js实现算法：冒泡排序、插入排序和快速排序

    一.冒泡排序 function bubbleSort(arr){ for(var i=0;i<arr.length;i++){ for(var j=0;j<arr.length-i-1;j ...

  8. 直接插入排序（js版）

    直接插入排序(从小到大) 基本思想:将一个记录插入到已经排好序的有序表中,得到一个新的,记录数加1的有序表. function insertSort(arr){ var i,j,temp=0; for ...

  9. js三种经典排序：冒泡排序、插入排序、快速排序

    冒泡排序: function bubbleSort(arr){ for(var r=1;r<arr.length-1;r++){ for(var i=0;i<arr.length-r;i+ ...

随机推荐

  1. PHP学习笔记1-常量，函数

    常量:使用const(php5)声明,只能被赋值一次,php5以下版本使用define: <?php const THE_VALUE = 100;//PHP5中才有const echo THE_ ...

  2. Delphi资源大全

    A curated list of awesome Delphi frameworks, libraries, resources, and shiny things. Inspired by awe ...

  3. 【Android LibGDX游戏引擎开发教程】第06期：图形图像的绘制（下）图片整合工具的使用

    在上一篇文章中,我们提到了图片必须是2的n次方的问题.但是随着Libgdx的不断完善和发展,使用一些工具就 可以很好的解决了这样一个问题,但是它的功能又不仅仅只限于此,那么下面就来让我们看看Textu ...

  4. TCP三次握手和四次挥手具体解释

    三次握手:建立TCP须要三次握手才干建立, 先Client端发送连接请求报文,Server段接受连接后回复ACK报文,并为这次连接分配资源.Client端接收到ACK报文后也向Server段发生ACK ...

  5. Oracle基础（五）：多表查询

    一.多表查询 (一)简单多表查询 1.多表查询的机制 1)SQL: SELECT * FROM emp; --14条记录 SELECT * FROM dept;--4条记录 SELECT * FROM ...

  6. 使用webview来查看网站

    1.权限 <uses-permission android:name="android.permission.INTERNET"/> 2.视图 <Relative ...

  7. 嵌入式环境：挂载开发板根NFS文件系统失败

    挂载开发板根NFS文件系统的时候,发现了下面的问题: Looking up port of RPC 100003/2 on 192.168.2.109rpcbind: server 192.168.2 ...

  8. 80端口的烦恼：[3]清除NT Kernel占用80端口

    链接地址:http://jingyan.baidu.com/article/f96699bbca15a1894e3c1bc4.html 当一台电脑安装了vs又安装了xampp时,可以能发生80端口号冲 ...

  9. iOS－响应上下左右滑动手势

    -(void)viewDidLoad{ UISwipeGestureRecognizer *recognizer; recognizer = [[UISwipeGestureRecognizer al ...

  10. File类常见方法

    package file; import java.io.File; public class FileTest2 { public static void main(String[] args) { ...