用Html5怎么實(shí)現(xiàn)簡(jiǎn)單選擇排序？
問題描述
用Html5怎么實(shí)現(xiàn)簡(jiǎn)單選擇排序？
問題解答
回答1：用Html5怎么實(shí)現(xiàn)簡(jiǎn)單選擇排序？-PHP中文網(wǎng)問答-用Html5怎么實(shí)現(xiàn)簡(jiǎn)單選擇排序？-PHP中文網(wǎng)問答
圍觀一下哦，學(xué)習(xí)一下。
回答2：基本思想：每趟從待排序的記錄中選出關(guān)鍵字最小的記錄，順序放在已排序的記錄序列末尾，直到全部排序結(jié)束為止。
代碼：
<!DOCTYPE html><html><head> <title>The thirteen html page</title> <style type="text/css">ul li{ list-style-type:georgian; text-align:left; }.mark{ width:280px; height:40px; color:Olive; text-align:center; line-height:40px; margin:5px; float:left; } .redball{ width:40px; height:40px; border-radius:20px; background-color:Red; text-align:center; line-height:40px; margin:5px; float:left;}.ball{ width:40px; height:40px; border-radius:20px; background-color:Aqua; text-align:center; line-height:40px; margin:5px; float:left;}.line{ clear:left; }header{ height:80px; border:1px solid gray;}.left{ border:1px solid gray; float:left; width:30%; height:480px; margin-left:0px; margin-right:0px; }aside{ text-align:center;}section{ width:69.5%; float:left; height:480px; border:1px solid gray; margin-left:0px; margin-right:0px;}footer{ clear:left; height:60px; border:1px solid gray;}input[type="button"]{ width:150px; text-align:center; margin-top:10px; } </style> <script type="text/javascript">function initDiv() { var mainArea = document.getElementById("mainArea"); var childs = mainArea.childNodes; //添加節(jié)點(diǎn)之前先刪除,應(yīng)該從后往前刪除，否則節(jié)點(diǎn)移動(dòng)，只能刪除一半 for (var i = childs.length - 1; i >= 0; i--) {mainArea.removeChild(childs[i]); } for (var i = 0; i < 8; i++) {var newDivLine = document.createElement("p");newDivLine.setAttribute("class", "line");newDivLine.setAttribute("id", i);mainArea.appendChild(newDivLine);for (var j = 0; j < 9; j++) { var newDiv = document.createElement("p"); var id = i.toString() + j.toString(); newDiv.setAttribute("id", id); if (j < 8) {newDiv.setAttribute("class", "ball"); } else {newDiv.setAttribute("class", "mark"); } newDivLine.appendChild(newDiv);} }} //初始元素賦值function setElementsValue() { var arrTmp = [4, 6, 8, 7, 9, 2, 10, 1]; for (var i = 0; i < arrTmp.length; i++) {document.getElementById("0" + i.toString()).innerText = arrTmp[i]; } document.getElementById("08").innerText = "原始數(shù)據(jù)";} //簡(jiǎn)單選擇排序function setSimpleSortValue() { var arrTmp = [4, 6, 8, 7, 9, 2, 10, 1]; var m = 0;//表示要交換的最小坐標(biāo) for (var i = 0; i < arrTmp.length-1; i++) {m = i;for (var j = i + 1; j < arrTmp.length; j++) { if (arrTmp[m] > arrTmp[j]) {m = j; }}if (arrTmp[i] > arrTmp[m]) { var tmp = arrTmp[m]; arrTmp[m] = arrTmp[i]; arrTmp[i] = tmp;}//顯示出來for (var k = 0; k < arrTmp.length; k++) { document.getElementById((i+1).toString() + k.toString()).innerText = arrTmp[k]; if (i == k) {document.getElementById((i + 1).toString() + (k).toString()).setAttribute("class", "redball"); } else {document.getElementById((i + 1).toString() + (k).toString()).attributes["class"].nodeValue="ball";; }}document.getElementById((i+1).toString() + "8").innerText = "第 " + (i+1).toString() + " 趟排序（Min=" + arrTmp[i] + "）"; }} //二元選擇排序function setDoubleSelectSort() { var arrTmp = [4, 6, 8, 7, 9, 2, 10, 1]; selectSortB(arrTmp); var len=arrTmp.length; for (var i = (len / 2)+1; i < len; i++) {for (var j = 0; j < 8; j++) { document.getElementById((i).toString() + (j).toString()).innerText = ""; document.getElementById((i).toString() + (j).toString()).className="ball";}document.getElementById(i.toString() + "8").innerText = ""; }} //二元選擇排序（升序)function selectSortB(a) { var len = a.length; var temp, min, max; for (var i = 0; i < len / 2; i++) {min = i; max = i;for (var j = i + 1; j <= len - 1 - i; j++) { max = (a[j] > a[max]) ? j : max;//每一趟取出當(dāng)前最大和最小的數(shù)組下標(biāo) min = (a[j] < a[min]) ? j : min;};temp = a[i];//先放小的a[i] = a[min];if (i == max) { //最大數(shù)在數(shù)組頭部 if ((len - i - 1) !== min) {//最大數(shù)在頭部,最小數(shù)在尾部a[min] = a[len - i - 1]; } a[len - i - 1] = temp;}else if ((len - i - 1) === min) {//最大數(shù)不在頭部,最小數(shù)在尾部 a[len - i - 1] = a[max]; a[max] = temp}else { //如果最大數(shù)在尾部,也是成立的,不用特殊討論 a[min] = temp; temp = a[len - i - 1]; a[len - i - 1] = a[max]; a[max] = temp;} //顯示出來for (var k = 0; k < a.length; k++) { document.getElementById((i + 1).toString() + k.toString()).innerText = a[k]; if (i == k || len - i - 1 == k) {document.getElementById((i + 1).toString() + (k).toString()).setAttribute("class", "redball"); } else {document.getElementById((i + 1).toString() + (k).toString()).className = "ball"; }}document.getElementById((i + 1).toString() + "8").innerText = "第 " + (i + 1).toString() + " 趟排序（Min=" + a[i] + ",Max=" + a[len-i-1] + "）"; }} </script></head><body><header> <h1>簡(jiǎn)單選擇排序Demo</h1></header><aside class="left"> <input type="button" id="btnInit" value="Init" onclick="initDiv();" /><br /><input type="button" id="btnSetValue" value="SetValue" onclick="setElementsValue();" /><br /><input type="button" id="btnSimpleSort" value="Simple Select Sort" onclick="setSimpleSortValue();" /><br /><input type="button" id="btnDoubleSelect" value="Double Select Sort" onclick="setDoubleSelectSort();" /><br /><h3>簡(jiǎn)單選擇排序</h3><ul> <li>設(shè)所排序序列的記錄個(gè)數(shù)為n。i取1,2,…,n-1,從所有n-i+1個(gè)記錄（Ri,Ri+1,…,Rn）中找出排序碼最小的記錄，與第i個(gè)記錄交換。執(zhí)行n-1趟 后就完成了記錄序列的排序。</li> <li>簡(jiǎn)單選擇排序<mark>非穩(wěn)定</mark>排序算法。</li> <li>在簡(jiǎn)單選擇排序過程中，所需移動(dòng)記錄的次數(shù)比較少。</li> <li>進(jìn)行比較操作的時(shí)間復(fù)雜度為O(n<sup>2</sup>)，進(jìn)行移動(dòng)操作的時(shí)間復(fù)雜度為O(n)</li> <li>簡(jiǎn)單選擇排序的優(yōu)化方案是二元選擇排序法，將其改進(jìn)為每趟循環(huán)確定兩個(gè)元素（當(dāng)前趟最大和最小記錄）的位置,從而減少排序所需的循環(huán)次數(shù)。改進(jìn)后對(duì)n個(gè)數(shù)據(jù)進(jìn)行排序，最多只需進(jìn)行[n/2]趟循環(huán)</li></ul></aside><section id="mainArea"></section><footer> 這是底部信息</footer></body></html>
相關(guān)文章：
1. PHP單例模式2. 能用一臺(tái)nginx服務(wù)器既做反向代理又做web服務(wù)器嗎，還是一臺(tái)做反向代理一臺(tái)做web服務(wù)器3. css3圖標(biāo)4. java - C++ STL迭代器聲明的iterator和reverse_iterator實(shí)質(zhì)區(qū)別？是不同數(shù)值嗎？5. css3 - 圖文響應(yīng)式樣式6. javascript - react input file7. python 讀取csv文件可以讀取但內(nèi)容錯(cuò)誤，但單獨(dú)用excel打開正常，如何解決？8. css - transform-origin 旋轉(zhuǎn)參考點(diǎn)9. css3 - 如何實(shí)現(xiàn)字體顏色漸變？10. javascript - 除了VUE React 這類MVVM還有什么適合做SPA的，特別是里面涉及到Canvas Webgl？
網(wǎng)公網(wǎng)安備