數(shù)據(jù)結(jié)構(gòu)基于html排序算法程序設(shè)計(jì)898625853

課程設(shè)計(jì)說明書課程名稱：數(shù)據(jù)結(jié)構(gòu)與算法設(shè)計(jì)題目：排序的綜合院系：計(jì)算機(jī)科學(xué)與信息工程學(xué)院學(xué)生姓名：學(xué)號(hào)：專業(yè)班級(jí)：指導(dǎo)教師：課程設(shè)計(jì)任務(wù)書設(shè)計(jì)題目排序的綜合學(xué)生姓名所在院系專業(yè)、年級(jí)、班設(shè)計(jì)要求：利用隨機(jī)函數(shù)產(chǎn)生N個(gè)隨機(jī)整數(shù)〔20000以上〕，對(duì)這些數(shù)進(jìn)行多種方法進(jìn)行排序。學(xué)生應(yīng)完成的工作：1)至少采用三種方法實(shí)現(xiàn)上述問題求解〔提示，可采用的方法有插入排序、希爾排序、起泡排序、快速排序、選擇排序、堆排序、歸并排序〕。并把排序后的結(jié)果保存在不同的文件中。2)統(tǒng)計(jì)每一種排序方法的性能〔以上機(jī)運(yùn)行程序所花費(fèi)的時(shí)間為準(zhǔn)進(jìn)行比照〕，找出其中兩種較快的方法。3)如果采用4種或4種以上的方法者，可適當(dāng)加分。參考文獻(xiàn)閱讀：C語言程序設(shè)計(jì)〔潭浩強(qiáng)第二版，清華大學(xué)出版社〕；HeadfirstHTML5Programming(EricFreeman&ElisabethRobson，中國電力出版社)JavaScript_DOM編程藝術(shù)第二版(JeremyKeith&JeffreySambells，人民郵電出版社)(3)數(shù)據(jù)結(jié)構(gòu)〔吳偉民等C語言版，清華大學(xué)出版社〕；(4)數(shù)據(jù)結(jié)構(gòu)實(shí)驗(yàn)教程〔高曉兵等，清華大學(xué)出版社〕；(5)算法分析與設(shè)計(jì)〔鄭宗漢、鄭曉明，清華大學(xué)出版社〕。工作方案：(1)第一周的第一天：小組布置設(shè)計(jì)題目；說明進(jìn)度安排。(2)第一周的第二天：小組審題，查閱資料，進(jìn)行設(shè)計(jì)前的必要資料準(zhǔn)備。(3)第一周的第三天、第四天、第五天：程序編寫、上機(jī)調(diào)試(4)第二周的第一天至第三天：上機(jī)調(diào)試程序、結(jié)果分析。(5)第二周的第四天：撰寫設(shè)計(jì)報(bào)告。(6)第二周的第五天：設(shè)計(jì)辯論。任務(wù)下達(dá)日期：2021年6月日任務(wù)完成日期：2021年6月日指導(dǎo)教師〔簽名〕：學(xué)生〔簽名〕：TOC\o"1-3"\h\u排序的綜合 2摘要： 2一.設(shè)計(jì)方案 2 2二.方案實(shí)施 3 32.2選擇排序算法 3 3 3三.結(jié)果與結(jié)論 3 4 8 11四.收獲與致謝 11五.參考文獻(xiàn) 11排序的綜合摘要：經(jīng)過一個(gè)學(xué)期的算法學(xué)習(xí)，我對(duì)算法產(chǎn)生了濃厚的興趣，于是就在網(wǎng)上看了下幾種經(jīng)典的算法，對(duì)其中的排序算法產(chǎn)生了濃厚的興趣，下面我就給大家分析一下這些經(jīng)典的排序算法。關(guān)鍵詞：算法，排序，循環(huán)，一.設(shè)計(jì)方案1.1總體設(shè)計(jì)流程1.編寫HTML、CSS代碼〔1〕將界面進(jìn)行良好的排版；2.編寫JS代碼〔1〕運(yùn)行算法，并把結(jié)果顯示到頁面上。二.方案實(shí)施2.1冒泡排序算法這是最原始，也是眾所周知的最慢的算法了。他的名字的由來因?yàn)樗墓ぷ骺磥硐笫敲芭荩褪前岩{(diào)換的數(shù)字逐漸像冒泡一樣浮上來。2.2選擇排序算法選擇排序〔Selectionsort〕是一種簡(jiǎn)單直觀的排序算法。它的工作原理是每一次從待排序的數(shù)據(jù)元素中選出最小〔或最大〕的一個(gè)元素，存放在序列的起始位置，直到全部待排序的數(shù)據(jù)元素排完。選擇排序是不穩(wěn)定的排序方法快速排序由C.A.R.Hoare在1962年提出。它的根本思想是：通過一趟排序?qū)⒁判虻臄?shù)據(jù)分割成獨(dú)立的兩局部，其中一局部的所有數(shù)據(jù)都比另外一局部的所有數(shù)據(jù)都要小，然后再按此方法對(duì)這兩局部數(shù)據(jù)分別進(jìn)行快速排序，整個(gè)排序過程可以遞歸進(jìn)行，以此到達(dá)整個(gè)數(shù)據(jù)變成有序序列。插入排序的根本思想是：每步將一個(gè)待排序的紀(jì)錄，按其關(guān)鍵碼值的大小插入前面已經(jīng)排序的文件中適當(dāng)位置上，直到全部插入完為止。三.結(jié)果與結(jié)論3.1源程序代碼*{padding:0;margin:0;}body,html{height:100%;width:100%;}a{text-decoration:none;}/*以上是初始化*//*歡送界面的樣式設(shè)置*/.bac{height:100%;width:100%;position:fixed;background:url(images/s02.jpg)no-repeat;background-size:cover;color:#fff;}.baca{font-size:20px;margin-left:44%;}.baca:link{color:#fff;}.baca:hover{color:greenyellow;}.baca:visited{color:#fff;}.bach1{margin:auto;margin-top:10%;font-size:40px;margin-bottom:200px;cursor:pointer;width:200px;}.bach1:hover{color:red;}.bacp{text-align:center;font-size:20px;margin-top:30px;}/*全局樣式初始化*/body{font-family:"microsoftyahei",sans-serif;background:url(images/599887.jpg!photo.middle.jpg)no-repeat100%100%;}/*控制臺(tái)間距*/.controldiv{margin:5px10px;}/*展示框局部樣式*/#ranResult,#sortRes,#funShow,#effect{width:200px;height:400px;overflow:scroll;margin:5pxauto;}#effect{overflow:visible;}#funShow,#effect{width:400px;}#ranResult,#sortRes{text-align:center;font-size:20px;}#funShow{font-size:15px;line-height:30px;}.result,.funShow{float:left;margin:20px10px;}/*控制臺(tái)樣式設(shè)置*/.control{text-align:center;margin:auto;width:900px;+width:1200px;/*+號(hào)代表ie兼容*/}input[type="button"]{+height:30px;}/*展示局部樣式*/.show{overflow:hidden;width:1350px;margin:auto;}legend{margin-left:30px;}/*按鈕的樣式*/input[type="button"]{background-color:dodgerblue;color:#fff;padding:10px5px;outline:none;border:none;border-radius:10px;transition:all0.5s;cursor:pointer;}input[type="button"]:hover{background-color:deepskyblue;}/*文本框樣式*/input[type="number"]{width:50px;height:30px;border-radius:5px;border:1pxsolidgray;transition:width0.5s;}input[type="number"]:focus{width:100px;outline:none;}/*算法時(shí)間樣式*/#time{width:190px;margin:30pxauto;}/*代碼局部兼容*/pre{white-space:pre-wrap;/*css-3*/white-space:-moz-pre-wrap;/*Mozilla,since1999*/white-space:-pre-wrap;/*Opera4-6*/white-space:-o-pre-wrap;/*Opera7*/word-wrap:break-word;/*InternetExplorer5.5+*/}/*響應(yīng)式*/@mediascreenand(max-width:1280px){ body { width:1280px;background-position:630px100%; }}3.2程序運(yùn)行結(jié)果〔1〕初始化界面如圖3.1所示。圖3.1初始化界面〔2〕冒泡排序如圖3.2所示。圖3.2冒泡排序界面〔3〕選擇排序3.3所示。圖3.3選擇排序界面快速排序界面如圖3.4所示。圖3.4快速排序界面〔5〕插入排序如圖3.5所示。圖3.5插入排序3.3課程設(shè)計(jì)總結(jié)通過本次設(shè)計(jì)，明白了排序算法的根本思想，并且通過程序展現(xiàn)出來，知道了如何巧妙地設(shè)計(jì)算法四.收獲與致謝通過這次課程設(shè)計(jì)，我的收獲是再一次熟悉了這幾種排序算法的思想以及它們的實(shí)現(xiàn)。同時(shí)也發(fā)現(xiàn)了一些自己的缺乏之處，通過這些暴露出來的缺點(diǎn)，我才能更好地完善自我使自己進(jìn)步。同時(shí)發(fā)現(xiàn)算法的理論知識(shí)就算再熟悉也應(yīng)該結(jié)合實(shí)踐來熟練掌握理論知識(shí)，結(jié)合實(shí)際實(shí)踐才能更好地應(yīng)用理論知識(shí)不然只能是紙上談兵，另外感謝兩位隊(duì)員的幫助和指點(diǎn)。從他們身上我看到了許多我需要學(xué)習(xí)的地方。也感謝老師的不遺余力的教導(dǎo)。五.參考文獻(xiàn)[1]C語言程序設(shè)計(jì)〔潭浩強(qiáng)第二版，清華大學(xué)出版社〕；[2]數(shù)據(jù)結(jié)構(gòu)〔吳偉民等c語言版，清華大學(xué)出版社〕；[3]數(shù)據(jù)結(jié)構(gòu)實(shí)驗(yàn)教程〔高曉兵等，清華大學(xué)出版社〕；[4]算法分析與設(shè)計(jì)〔鄭宗漢、鄭曉明，清華大學(xué)出版社〕。[5]HeadfirstHTML5Programming(EricFreeman&ElisabethRobson，中國電力出版社)[6]JavaScript_DOM編程藝術(shù)第二版(JeremyKeith&JeffreySambells，人民郵電出版社)指導(dǎo)教師評(píng)語：1、課程設(shè)計(jì)報(bào)告：a、內(nèi)容：不完整□完整□詳細(xì)□b、方案設(shè)計(jì)：較差□合理□非常合理□c、實(shí)現(xiàn)：未實(shí)現(xiàn)□局部實(shí)現(xiàn)□全部實(shí)現(xiàn)□d、文檔格式：不標(biāo)準(zhǔn)□根本標(biāo)準(zhǔn)□標(biāo)準(zhǔn)□2、出勤：全勤□缺勤次3、辯論：a、未能完全理解題目，辯論情況較差□b、局部理解題目，局部問題答復(fù)正確□c、理解題目較清楚，問題答復(fù)根本正確□d、理解題目透徹，問題答復(fù)流利□課程設(shè)計(jì)報(bào)告成績(jī)：，占總成績(jī)比例：50%課程設(shè)計(jì)其它環(huán)節(jié)成績(jī)：環(huán)節(jié)名稱：出勤，成績(jī)：，占總成績(jī)比例：20%環(huán)節(jié)名稱：辯論，成績(jī)：，占總成績(jī)比例：30%總成績(jī)：指導(dǎo)教師簽字：年月日源代碼Js局部1：vardivNode=document.getElementsByTagName("div")[0];varh1=divNode.getElementsByTagName("h1")[0];divNode.style.opacity=1;varop=divNode.style.opacity;functionopac(){if(op<0){divNode.style.opacity=0;divNode.style.display="none";return;}elseif(op>0){op=op-0.1;divNode.style.opacity=op;setTimeout(opac,"50");}}h1.onclick=opac;Css局部：*{padding:0;margin:0;}body,html{height:100%;width:100%;}a{text-decoration:none;}/*以上是初始化*//*歡送界面的樣式設(shè)置*/.bac{height:100%;width:100%;position:fixed;background:url(images/s02.jpg)no-repeat;background-size:cover;color:#fff;}.baca{font-size:20px;margin-left:44%;}.baca:link{color:#fff;}.baca:hover{color:greenyellow;}.baca:visited{color:#fff;}.bach1{margin:auto;margin-top:10%;font-size:40px;margin-bottom:200px;cursor:pointer;width:200px;}.bach1:hover{color:red;}.bacp{text-align:center;font-size:20px;margin-top:30px;}/*全局樣式初始化*/body{font-family:"microsoftyahei",sans-serif;background:url(images/599887.jpg!photo.middle.jpg)no-repeat100%100%;}/*控制臺(tái)間距*/.controldiv{margin:5px10px;}/*展示框局部樣式*/#ranResult,#sortRes,#funShow,#effect{width:200px;height:400px;overflow:scroll;margin:5pxauto;}#effect{overflow:visible;}#funShow,#effect{width:400px;}#ranResult,#sortRes{text-align:center;font-size:20px;}#funShow{font-size:15px;line-height:30px;}.result,.funShow{float:left;margin:20px10px;}/*控制臺(tái)樣式設(shè)置*/.control{text-align:center;margin:auto;width:900px;+width:1200px;/*+號(hào)代表ie兼容*/}input[type="button"]{+height:30px;}/*展示局部樣式*/.show{overflow:hidden;width:1350px;margin:auto;}legend{margin-left:30px;}/*按鈕的樣式*/input[type="button"]{background-color:dodgerblue;color:#fff;padding:10px5px;outline:none;border:none;border-radius:10px;transition:all0.5s;cursor:pointer;}input[type="button"]:hover{background-color:deepskyblue;}/*文本框樣式*/input[type="number"]{width:50px;height:30px;border-radius:5px;border:1pxsolidgray;transition:width0.5s;}input[type="number"]:focus{width:100px;outline:none;}/*算法時(shí)間樣式*/#time{width:190px;margin:30pxauto;}/*代碼局部兼容*/pre{white-space:pre-wrap;/*css-3*/white-space:-moz-pre-wrap;/*Mozilla,since1999*/white-space:-pre-wrap;/*Opera4-6*/white-space:-o-pre-wrap;/*Opera7*/word-wrap:break-word;/*InternetExplorer5.5+*/}/*響應(yīng)式*/@mediascreenand(max-width:1280px){ body { width:1280px;background-position:630px100%; }}Js局部2：varrandomBtn=document.getElementById("random");//產(chǎn)生隨機(jī)數(shù)的按鈕varref=document.getElementById("refresh");//取得刷新按鈕varres=document.getElementById("resort");//取得改變排序順序的按鈕varbubbleBtn=document.getElementById("bubbleSort")//取得冒泡排序的按鈕varselectBtn=document.getElementById("selectSort");//取得選擇排序的按鈕varqSortBtn=document.getElementById("qSort");//取得快速排序的按鈕varinsSortBtn=document.getElementById("insSort");//取得插入排序的按鈕varnum=document.getElementById("num");//用戶輸入隨機(jī)數(shù)個(gè)數(shù)的文本框varresult=document.getElementById("ranResult");//隨機(jī)數(shù)的結(jié)果varsortResult=document.getElementById("sortRes");//取得顯示隨機(jī)數(shù)結(jié)果的框varfnShow=document.getElementById("funShow");//取得顯示算法的方框vareffect=document.getElementById("effect");//取得效果展示的框框varreduceBtn=document.getElementById("reduce");//取得減少個(gè)數(shù)的按鈕varshowTime=document.getElementById("time").getElementsByTagName("input")[0];//取得顯示時(shí)間的文本框varnumbers=newArray();//創(chuàng)立一個(gè)數(shù)組存放隨機(jī)數(shù)functiongetRandom(){varn=num.value;//取得文本框里的數(shù)字if(n!=""){for(vari=0;i<n;i++){varr=Math.ceil(Math.random()*20000+20000);//產(chǎn)生20000~40000的隨機(jī)整數(shù)numbers[numbers.length]=r;//將隨機(jī)數(shù)保存到數(shù)值里result.innerHTML+=r+"<br>";//將隨機(jī)數(shù)輸出到頁面}}else{alert("請(qǐng)輸入隨機(jī)數(shù)個(gè)數(shù)");}}/*減少數(shù)組長度*/functionreduce(){varn=num.value-0;varl=numbers.length;if(n!=""&&n<=l){l=l-n;//減少數(shù)組長度result.innerHTML="";for(vari=0;i<l;i++){result.innerHTML+=numbers[i]+"<br>";}numbers.length=l;}elseif(n==""||n>l){alert("請(qǐng)輸入隨機(jī)數(shù)個(gè)數(shù)或者輸入的數(shù)大于數(shù)組長度");}}/*刷新頁面*/functionrefresh(){numbers.length=0;result.innerHTML="";sortResult.innerHTML="";fnShow.innerHTML="";showTime.value="";varimgNode=effect.getElementsByTagName("img")[0];imgNode.src="";}/*冒泡排序*/functionstarBubble(){vars=newDate().getTime();bubbleSort();vare=newDate().getTime();showTime.value=e-s+"ms";writeResult(bubbleSort,"bubble");}functionbubbleSort(){vart;for(vari=0;i<numbers.length;i++){for(varj=i;j<numbers.length;j++){if(numbers[i]>numbers[j]){t=numbers[i];numbers[i]=numbers[j];numbers[j]=t;}}}}/*選擇排序*/functionstarSelect(){vars=newDate().getTime();selectSort();vare=newDate().getTime();showTime.value=e-s+"ms";writeResult(selectSort,"select");}functionselectSort(){for(vari=0;i<numbers.length-1;i++){vart=0;varmin=i;for(varj=i+1;j<numbers.length;j++){if(numbers[min]>numbers[j]){min=j;}}t=numbers[min];numbers[min]=numbers[i];numbers[i]=t;}}/*快速排序*/functionstarQS(){vars=newDate().getTime();sort(numbers);vare=newDate().getTime();showTime.value=e-s+"ms";writeResult(sort,"quick");}functionsort(arr){quickSort(arr,0,arr.length-1);functionquickSort(arr,l,r){if(l<r){varmid=arr[parseInt((l+r)/2)],i=l-1,j=r+1;while(true){while(arr[++i]<mid);while(arr[--j]>mid);if(i>=j)break;vartemp=arr[i];arr[i]=arr[j];arr[j]=temp;}quickSort(arr,l,i-1);quickSort(arr,j+1,r);}returnarr;}}/*插入排序*/functionstarInsSort(){vars=newDate().getTime();insSort(numbers,numbers.length-1);vare=newDate().getTime();showTime.value=e-s+"ms";writeResult(insSort,"ins");}functioninsSort(a,n){for(vari=1;i<=n;i++){varkey=a[i];varj=i-1;while(j>=0&&key<a[j]){a[j+1]=a[j];j--;}a[j+1]=key;}}/*將結(jié)果顯示出來*/functionwriteResult(fn,info){sortResult.innerHTML="";for(varindex=0;index<numbers.length;index++){sortResult.innerHTML+=numbers[index]+"<br>";}fnShow.innerHTML="";fnShow.innerHTML=fn;varimgNode=effect.getElementsByTagName("img")[0];imgNode.src="images/"+info+".gif";}randomBtn.onclick=getRandom;bubbleBtn.onclick=starBubble;selectBtn.onclick=starSelect;qSortBtn.onclick=starQS;insSortBtn.onclick=starInsSort;reduceBtn.onclick=reduce;/*改變排序升序降序*/res.onclick=function(){if(res.value=="降序"){if(numbers.length!=0){numbers.reverse();sortResult.innerHTML="";for(vari=0;i<numbers.length;i++){sortResult.innerHTML+=numbers[i]+"<br>";}}res.value="升序";}else{if(numbers.length!=0){numbers.reverse();//將數(shù)組順序倒過來}sortResult.innerHTML="";for(vari=0;i<numbers.length;i++){sortResult.innerHTML+=numbers[i]+"<br>";}}res.value="降序";}ref.onclick=refresh;//當(dāng)用戶點(diǎn)刷新時(shí)清空所有數(shù)據(jù)HTML局部：<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><meta-equiv="X-UA-Compatible"content="IE=edge"><title>排序的綜合</title><linkrel="stylesheet"href="sort.css"></head><body><!--歡送頁面--><divclass="bac">