话不多说，直接上代码

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. 网站开启gzip的方法

    .如果空间支持Zlib压缩文件,可用php.ini方法 这个方法比较简单,压缩率也较高,可达75%左右.新建一个名为 php.ini 的文件,添加以下代码,保存后上传至网站根目录即可. output_ ...

  2. cocos2d-实现读取.plist文件（使用数组CCArray）

    学习札记之cocos2d-x2.1.1实现读取.plist文件(使用数组CCArray) <?xml version="1.0" encoding="UTF-8&q ...

  3. Smarty - 安装+入门小例子

    环境: smarty 1.在http://www.smarty.net/download下载最新smarty包,window选择zips,linux下选择tar.gz.以windows为例,下载后解压 ...

  4. linux cmd

    Linux查找包含特定字符串的文件名的方法 Pasted from <http://www.jbxue.com/LINUXjishu/9790.html> find .|xargs gre ...

  5. 02-OC方法、属性

    目录: 一.方法 二.实例变量 三.属性(点语法) 四.初始化方法(自定义构造方法) 回到顶部 一.方法 1 函数与方法有什么区别? 函数只是一个程序的代码段,与类无关. 方法,类的一部分,代表对象可 ...

  6. 探究绑定事件的this指向以及event传参的小问题

    this指向 直接上代码,凑合着看 <input type="button" onclick="page()" value="点我"& ...

  7. 分享非常有用的Java程序(关键代码)(八)---Java InputStream读取网络响应Response数据的方法!(重要)

    原文:分享非常有用的Java程序(关键代码)(八)---Java InputStream读取网络响应Response数据的方法!(重要) Java InputStream读取数据问题 ======== ...

  8. 基于MapReduce的HBase开发

    在伪分布式模式和全分布式模式下 HBase 是架构在 HDFS 上的,因此完全可以将MapReduce 编程框架和 HBase 结合起来使用.也就是说,将 HBase 作为底层“存储结构”, MapR ...

  9. NSThread的一些细节

    1.NSThread创建方式(一个NSThread对象就代表一条线程)1.1>创建\启动线程(1)线程一启动,就会在thread中执行self的run方法NSTread *thread = [[ ...

  10. 为进度条增加“伪进度条”？（使用QEventLoop和QTimer）

    在实际开发中,可能会遇到这样的场景:“一个操作非常耗时,但却无法获取其进度百分比”.造成这种情况的原因可能有: 1)该操作属于第三方库(泛指我们使用但无法修改的第三方代码,因此质量有高有底),可能由于 ...