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

以下是代码：

index.html！' DOCTYPE html html标题标题排序/标题链接rel='样式表type=' text/CSS ' href=' style。CSS头身！-主要页面结构- div class='container '输入类型='text' name='number' id='number '占位符='请输入10个数字（不要留空格)'/a href=' JavaScript : void()' class=' sort BTN ' id=' result BTN ' sort/a label class=' title '排序后的：/label！-以下三个标签分别显示冒泡，插入，快速排序的结果-label class=' result ' for=' bubble sort '/label label class=' result ' for=' insert sort '/label label class=' result ' for=' quick sort '/label/div！-结束-脚本类型=' text/JAVAScript ' src=' http :脚本。js '/脚本/正文/html来给这个页面写点样式，不然就太不好看了。

风格。CSS * {边距： ^ 0；padd : 0；列表样式：无；} .容器{ width : 400 pxmargin : 100 px自动；}输入[type=' text ']{显示：块；宽度： 400像素；高度： 40px文本对齐：中心；线高： 40px大纲：无；font-size : 14px边框半径： 15pxborder: 1px实心# aaaaaa }。sortbtn { display:块；宽度： 200像素；高： 34px文本对齐：中心；线高： 34pxborder: 1px纯黑；边框半径： 10px文本装饰：无；颜色：黑色；左边距： 100像素；边距-top : 30px；} .排序BTN :悬停{显示： }块；背景-颜色：黑色；color: # ffffff}标签{ display:块宽度： 200像素；文本对齐：中心；左边距： 100像素；边距-top : 20px；font-size : 20px}然后就是主要的功能实现了。

剧本。jswindow。onload=function(){ var BTN=document。getelementbyid(' result BTN ')；//结果输出按钮var输入数=文档。getelementbyid(' number ')；//数字输入框var结果LBL=文档。getelementsbytagname(' label ')；//结果显示的标记变量I、j、temp//冒泡排序var bubble=function(arr){ for(I=0；i9；I){ for(j=0；j9-I；j){ if(arr[j]arr[j 1]){ temp=arr[j]；arr[j]=arr[j 1]；arr[j 1]=温度；} } }返回arr} //插入排序var insersort=function(arr){ for(I=1；i10I){ temp=arr[I]；j=I；while(j 0 arr[j-1]temp){ arr[j]=arr[j-1]；j-；} arr[j]=temp；}返回arr} //快速排序var quick sort=function(arr){ var basenam，basenumIndexvar left=[]；var right=[]；如果(arr。length=1){ return arr；} //基准数的位置basenumIndex=数学。地板(arr。长度/2)；基数=arr。拼接(BaseNumindex，1)[0]；for(I=0；长度；I){ if(arr[I]basenam){ left。推动；} else {对。推动；} } //递归调用返回快速排序（左)。concat([basenam]，quicksort(右));} //判断输入的值类型是否为数字函数是=/^[0-9]$/；返回(ReNum。测试(数量))；} //按钮点击事件btn.onclick=function(){ //判断输入的值的类型和长度以及是否为空if(！isNum(输入编号。值)| |输入数字。value==' ' | |输入数字。价值。长度10 | |输入数字。价值。长度10){结果LBL[0].innerHTML='您的格式错误！[必须是10个数字]';结果LBL[0]。风格。颜色='红色'；} else{ resultlbl[0].innerHTML="在排序：之后";resultlbl[0]。风格。颜色='黑色'；var inputstream=输入数。价值。ToString()；//将输入的内容转换为字符串var数据=inputstream。split(')；//将转换的字符串分割，相当于转化为数组//结果输出resultlbl[1]。innerHTML=' bubble sort : ' ' br/' bubble(数据);resultlbl[2]。rsort中的innerHTML=' insert sort : ' ' br/'数据);resultlbl[3]。innerHTML=“快速排序：”“br/”快速排序(数据);} } }最后的效果是这样的：

未输入情况下，一只安静的文本框，一只安静的按钮和一个标签:

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

为空：

不是数字且不足十位：

超出十位：

输入正确的情况下：

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

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