I was asked about this question in an interview, but it was really stunned. I couldn't answer it. Later, I sorted it out through JS and made a text box in the combination of HTML code. The description, let's show you through a piece of code:
The following is the code:
Index.html <! Doctype html> <html> <head> <Title> Sorting </Title> <link Roth = "Stylesheet" Type = "Text/CSS" HREF = "Style.css"> </Head> <body > <!-Main page structure-> <div> <input type = "text" name = "number" id = "number" placeholder = "Please Enter 10 Numbers (DON'T Leave Space)" /<AT href = "javascript: void ()" ID = "resultbtn"> sort </a> <Label> After sorted: </label> <!-The following three labels displayed, inserted, and quickly sorted the results- -> <Label for = "Bubblesort"> </Label> <Label for = "Insertsort"> </Label> <Label for = "Quicksort"> </Label> </Div> <!-End-> <script type = "text/javascript" src = "script.js"> </script> </body> </html>
Come to write some styles to this page, otherwise it will be too bad.
style.css *{margin: 0; padding: 0; list-style: none;} .container {width: 400px; margin: 100px auto;} input [type = "text"] {display: block; : 400px1 Height: 40px; text-align: center; line-height: 40px; outline: none; font-size: 14px; border-radius: 15px; 1px solid #aaaaaaa;} .sortbtnn {Display: Block; Width: 200px Height: 34px; text-align: center; line-height: 34px; border: 1px solid black; border-radius: 10px; text-decics: none; multi: black; : 100px; Margin-Top: 30px ;} .sortbtn: Hover {display: block; background-color: black; color: #ffffff;} label {display: block; width: 200px; text-align: center; gin-heft: 100px; Margin-Top: 20px ; font-size: 20px;}Then there is the main function implementation.
script.jswindow.onload = Function () {var btn = document.GetelementByid ("resultbtn"); // Results output buttons var inputnum = document.getelementbyid ("number") ; // Digital input box var resultlbl = document.GetelementsBytagname ("label"); // The results show label var I, J, Temp; // Bubble sorting varuck = function (ARR) {for (i = 0; i <9; i ++) {for (j = 0 0 0 0 0 0 0 0 0 0 0 ; j <9-i; j ++) {if (ARR [J]> Arr [J+1]) {test = arr [j]; arr [j] = arr [j+1]; arr [j+1] = Temp;}}} Return Arr;} // Insert the sorting Var Insersort = Function (ARR) {for (i = 1; i <10; i ++) {temp = arr [i]; j = i; space (j> 0 && arr [j-1]> Temp) {arr [j] = arr [j-1]; j-;} arr [j] = temp;} Return arr;} // Quickly sort Var Quicksort = Function ( Arr) {var base, basenumindex; var left = []; var right = []; if (arr.Length <= 1) {Return Arrrrrr;} // The position baseenumindex = math. (Arr.Length// 2); Basenum = Arrr.splice (Basenumindex, 1) [0]; for (i = 0; I <arr.Length; I ++) {if (Arr [i] <basenum) {left.push (ARR [i] );} else {right.push (arr [i]);} // recursively call Return Quicksort (left) .concat ([Basenum], Quicksort (RIGHT)); Function isnum (num) {var renum =/^[0-9]+$/; Return (renum.test (num));} // button click event btn.onClick = function () {// Judging the value of the input The type and length of the type and the length of the air if (! Isnum.value) || Inputnum.value == "" || Inputnum.value.length> 10 || Inputnum.value.length <10) {Resultlbl [0] .innerHtml = "Your Format is ing! [Must be 10 number]" "; resultlbl [0] .Style.color =" red ";} Else {resultlbl [0] .innerhtml =" after sorted: " lbl [0] .style.color = "Black"; VAR inputStream = Inputnum.value.tostring (); // Convert the input content to string var data = inputStream.split (""); // Divide the converted string, It is equivalent to converting into an array // result output resultlbl [1] .innerhtml = "bubblesort:" + "<br/>" + bubble (data); resultlbl [2] .snerhtml = "Insertsort:" + "<br/> " + Insert (data); resultlbl [3] .innerHtml =" Quicksort: " +" <br/> " + Quicksort (data);The final effect is this:
Without input, a quiet text box, a quiet button and a label:
The input is not the number, not input ten or more than ten, or it is empty. After clicking the button, the error will be prompted:
For empty:
Not the number and less than ten digits:
Over ten digits:
In the case of the correct input:
Tip: There is no need to add an empty grid between the input numbers, and there is no need to add an empty grid between the input numbers. There is no need to add an air between the input numbers.
It should be noted that the numbers entered in the text box can only be one digit (0-9). Please continue to track this website for sorting methods for two-digit number or even more digits. I hope these contents will be helpful to everyone.