天天看點

JavaScript簡單的升序降序

<body>

<body><!—使用者界面,一個DIV層和兩個按鈕-->

<div id="divNames" style="width: 422px; height: 100px; border-right: blue 1px solid; border-top: blue 1px solid; border-left: blue 1px solid; border-bottom: blue 1px solid;">

</div>

<input id="Button1" type="button" value="升序" οnclick="return Button_onclick(this.id)" />

<input id="Button2" type="button" value="降序" οnclick="return Button_onclick(this.id)"/>

<mce:script language="javascript" type="text/javascript"><!--

// <!CDATA[

function Student( name, number ) // 學生對象構造函數

{

this.name = name; // 學生名字屬性

this.number = number; // 學生名字屬性

}

var students = new Array( new Student("John",4), new Student("Wendy",2), new Student("Vicky",5),

new Student("Kevin",1), new Student("Richard",3) ); // 5個學生

var g_orderRule; // 規則開關

var names = ""; // 名字序列

for( x in students ) // 組合排序前的學生名字

{

names += students[x].name + " ";

}

tn = document.createTextNode( names ); // 建立文節點,用于顯示結果

var div = document.getElementById("divNames"); // 擷取DIV層

div.appendChild(tn) // 将文本節點添加為層的子節點

tn.nodeValue = names; // 設定文本節點的文字屬性

function Order( obj, funcRule) // 排序函數

{

if( (typeof(funcRule)!="function") || ( funcRule.length<2) ) // 檢查參數的正确性

{

var e = new Error(); // 不正确則抛出異常

e.message = "參數不符合要求";

throw e;

}

for( n in obj ) // 周遊資料組,按回調函數的規則排序

{

for( m in obj )

{

// funcRule為外部回調函數,使用者可在回調函數中實作自已的排序規則

if( funcRule( obj[n].number, obj[m].number ) )

{

var tmp = obj[n];

obj[n] = obj[m];

obj[m] = tmp;

}

}

}

names = "";

for( x in obj )

{

names += obj[x].name + " "; // 組合排序後的名字

}

tn.nodeValue = names;

}

function funcRule( arg1, arg2 ) // 排序規則回調函數

{

if( (typeof(arg1) != "number")||(typeof(arg2) != "number") ) // 參數檢查

{

var e1 = new Error();

e1.message = "學生的序号屬性為非數字";

throw e1;

}

if( g_orderRule ) // 根據使用者的選擇設定排升規則

{

return arg1<arg2; // 升序

}

else

{

return arg1>arg2; // 降序

}

}

function Button_onclick( objID ) // 按鈕單擊事件處理程式

{

if( objID=="Button1" )

{

g_orderRule = true;

}

else

{

g_orderRule = false;

}

try

{

Order( students, funcRule ); // 排序并輸出

}

catch( e )

{

alert(e.message);

}

}

// --></mce:script>

</body>

</html>

繼續閱讀