recherche

Maison  >  Article  >  interface Web  >  JS implémente le tri à bulles, le tri par insertion et le tri rapide et trie la sortie

JS implémente le tri à bulles, le tri par insertion et le tri rapide et trie la sortie

高洛峰
高洛峰original
2016-12-29 15:54:451530parcourir

On m'a posé cette question lors d'une interview, mais j'étais vraiment confus et je n'ai pas pu y répondre. Plus tard, je l'ai triée via JS, je l'ai combinée avec le code html pour créer une zone de texte et j'ai trié l'entrée. contenu de la zone de texte et affichez-le. Encore une fois, je ne le décrirai pas. Montrons-le à travers un morceau de code :

Voici le code : 

index.html
 
 <!DOCTYPE html>
 <html>
 <head>
   <title>Sorting</title>
   <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
  
   <!--主要页面结构-->
   <div class="container">
     <input type="text" name="number" id="number" placeholder="Please enter 10 numbers(don&#39;t leave space)" />
     <a href="javascript:void()" class="sortbtn" id="resultBtn">Sort</a>
     <label class="title">After Sorted:</label>
  
     <!--以下三个label分别显示冒泡，插入，快速排序的结果-->
     <label class="result" for="bubblesort"></label>
     <label class="result" for="insertsort"></label>
     <label class="result" for="quicksort"></label>
   </div>
   <!--end-->
    
   <script type="text/javascript" src="script.js"></script>
 </body>
 </html>
Écrivons du style à cette page, sinon elle aura l'air trop moche. 

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;
 }
Ensuite, les principales fonctions sont mises en œuvre. 

script.js
 
window.onload = function(){
  var btn = document.getElementById("resultBtn");      //结果输出按钮
  var inputnum = document.getElementById("number");    //数字输入框
  var resultlbl =document.getElementsByTagName("label");  //结果显示的label 
  var i,j,temp;
 
  //冒泡排序
  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;
  }
 
  //插入排序
  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;
  }
 
  //快速排序
  var quicksort = function(arr){
    var basenum,basenumIndex;
    var left = [];
    var right = [];
 
    if(arr.length <= 1){
      return arr;
    }
    //基准数的位置
    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]);
      }
     }
     //递归调用
     return quicksort(left).concat([basenum],quicksort(right));
   }
  
   //判断输入的值类型是否为数字
   function isNum(num){
    var reNum =/^[0-9]+$/;
    return (reNum.test(num)); 
}
  
   //按钮点击事件
   btn.onclick = function(){
     //判断输入的值的类型和长度以及是否为空
     if(!isNum(inputnum.value) || inputnum.value == "" || inputnum.value.length > 10 || inputnum.value.length < 10){
       resultlbl[0].innerHTML = "Your format is wrong![Must Be 10 numbers]";
       resultlbl[0].style.color = "red";
     }
     else{
       resultlbl[0].innerHTML = "After Sorted:";
       resultlbl[0].style.color = "black";
       var inputstream = inputnum.value.toString();  //将输入的内容转换为字符串
       var data = inputstream.split("");        //将转换的字符串分割，相当于转化为数组
        
       //结果输出
       resultlbl[1].innerHTML = "BubbleSort:" + "<br/>" + bubble(data);
       resultlbl[2].innerHTML = "InsertSort:" + "<br/>" + insersort(data);
       resultlbl[3].innerHTML = "QuickSort:" + "<br/>" + quicksort(data);
     }
   }
 }
L'effet final est le suivant :

Sans saisie, une zone de texte silencieuse, un bouton silencieux et une étiquette :

JS implémente le tri à bulles, le tri par insertion et le tri rapide et trie la sortie

La saisie n'est pas un nombre, le chiffre des dizaines n'est pas saisi ou dépasse le chiffre des dizaines, ou est vide. Après avoir cliqué sur le bouton, une erreur s'affichera :

est vide :

JS implémente le tri à bulles, le tri par insertion et le tri rapide et trie la sortie n'est pas un nombre et comporte moins de dix chiffres :

JS implémente le tri à bulles, le tri par insertion et le tri rapide et trie la sortie dépasse dix chiffres :

JS implémente le tri à bulles, le tri par insertion et le tri rapide et trie la sortieEntrez Dans la casse correcte :

JS implémente le tri à bulles, le tri par insertion et le tri rapide et trie la sortie Conseils : N'ajoutez pas d'espaces entre les chiffres que vous saisissez. N'ajoutez pas d'espaces entre les chiffres que vous saisissez. ajoutez des espaces entre les nombres que vous saisissez. Important. Dites les choses trois fois

Il convient de noter que le nombre saisi dans la zone de texte ne peut être qu'un nombre à un chiffre (0-9). de nombres à deux chiffres ou même à plus de chiffres, veuillez continuer à suivre ce site Web. J'espère que ce contenu sera utile à tout le monde.


Pour plus d'implémentations JS du tri à bulles, du tri par insertion et du tri rapide et des articles liés aux sorties triées, veuillez faire attention au site Web PHP chinois !

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：JavaScript implémente le tri par insertion de liste chaînée et le tri par fusion de liste chaînéeArticle suivant：JavaScript implémente le tri par insertion de liste chaînée et le tri par fusion de liste chaînée

Articles Liés

Voir plus