JS to implement bubble sort, insert sort and quick sort and sort output _java

Was asked this question in an interview, but really Meng, failed to answer up, and later through JS sorted out, in the combination of HTML code to do a text box, the input content from the text box sort output, again do not do the narration, the following through a piece of code to show you:

Here's the code:

Index.html

 <! DOCTYPE html>
  
 

To write some style to the page, otherwise it would be too bad to see.

Style.css

 *{
   margin:0;
   padding:0;
   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;
 }

Then the main function is realized.

Script.js window.onload = function () {var btn = document.getElementById ("resultbtn");    Result Output button var Inputnum = document.getElementById ("number");  Digital input box var resultlbl =document.getelementsbytagname ("label");

  The result shows the label Var I,j,temp; Bubble sort 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;
      //Insert sort 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;
    //Quick Sort var quicksort = function (arr) {var basenum,basenumindex;
    var left = [];

    var right = [];
    if (arr.length <= 1) {return arr;
    The position of the//datum number = 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]);
   }///Recursive call return Quicksort (left). Concat ([Basenum],quicksort (right));
    //Determine if the value type entered is a numeric function isnum (num) {var renum =/^[0-9]+$/; 
Return (Renum.test (num));  //Button click event Btn.onclick = function () {//Determine the type and length of the input value and whether it is an empty if (!isnum (inputnum.value) | | inputnum.value = = "" || Inputnum.value.length > 10 | | Inputnum.value.length <) {resultlbl[0].innerhtml = "Your format is wrong![
       Must be numbers] ";
     Resultlbl[0].style.color = "Red";
       } else{resultlbl[0].innerhtml = "after Sorted:";
       Resultlbl[0].style.color = "BLACK";  var inputstream = inputnum.value.toString ();        Converts the input to a string var data = Inputstream.split (""); Splits the converted string, equivalent to converting an array//result output resultlbl[1].innerhtml = "Bubblesort: +" <Br/> "+ bubble (data);
       resultlbl[2].innerhtml = "Insertsort:" + "<br/>" + insersort (data);
     resultlbl[3].innerhtml = "QuickSort:" + "<br/>" + QuickSort (data);

 }
   }
 }

The final effect is this:

Without entering the case, a quiet text box, a quiet button and a label:

Input is not a number, not entered 10 bits or more than 10 bits, or empty, click the button, will be prompted error:

is empty:

Not a number and less than 10 digits:

exceeds 10 digits:

Enter the correct case:

Hint: Enter the number between no space, the number of input without space, the number of input without space, the important thing to say three times

Note that the number entered in the text box can only be one digit (0-9), and the sorting method for two-bit digits or more digits will continue to follow this web site. I hope these contents are helpful to everyone.