[无忧经典旧帖] == 众多高手的心血集合
表格排序 [如果运行后看不到效果，请把内容保存为html文件再浏览]<LINK
href="http://www.brainjar.com/common/default.css" type=text/css rel=stylesheet>
<STYLE type=text/css>TABLE {
BORDER-RIGHT: #000000 2px solid; BORDER-TOP: #000000 2px solid; BORDER-LEFT: #000000 2px solid; BORDER-BOTTOM: #000000 2px solid; border-spacing: 0px; cell-spacing: 0px
}
TD {
PADDING-RIGHT: 0.5em; PADDING-LEFT: 0.5em; FONT-SIZE: 10pt; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; FONT-FAMILY: Arial, Helvetica, sans-serif; WHITE-SPACE: nowrap
}
TH {
PADDING-RIGHT: 0.5em; PADDING-LEFT: 0.5em; FONT-SIZE: 10pt; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; FONT-FAMILY: Arial, Helvetica, sans-serif; WHITE-SPACE: nowrap
}
TD.numeric {
TEXT-ALIGN: right
}
TH {
BACKGROUND-COLOR: #c0c0c0
}
TH.mainHeader {
COLOR: #ffffff; BACKGROUND-COLOR: #808080; TEXT-ALIGN: left
}
TH A {
COLOR: #000080; TEXT-DECORATION: none
}
TH A:visited {
COLOR: #000080
}
TH A:active {
COLOR: #800000; TEXT-DECORATION: underline
}
TH A:hover {
COLOR: #800000; TEXT-DECORATION: underline
}
TR.alternateRow {
BACKGROUND-COLOR: #e0e0e0
}
TD.sortedColumn {
BACKGROUND-COLOR: #f0f0f0
}
TH.sortedColumn {
BACKGROUND-COLOR: #b0b0b0
}
TR.alternateRow TD.sortedColumn {
BACKGROUND-COLOR: #d0d0d0
}
</STYLE>
<SCRIPT type=text/javascript>
//-----------------------------------------------------------------------------
// sortTable(id, col, rev)
//
// id - ID of the TABLE, TBODY, THEAD or TFOOT element to be sorted.
// col - Index of the column to sort, 0 = first column, 1 = second column,
// etc.
// rev - If true, the column is sorted in reverse (descending) order
// initially.
//
// Note: the team name column (index 1) is used as a secondary sort column and
// always sorted in ascending order.
//-----------------------------------------------------------------------------
function sortTable(id, col, rev) {
// Get the table or table section to sort.
var tblEl = document.getElementById(id);
// The first time this function is called for a given table, set up an
// array of reverse sort flags.
if (tblEl.reverseSort == null) {
tblEl.reverseSort = new Array();
// Also, assume the team name column is initially sorted.
tblEl.lastColumn = 1;
}
// If this column has not been sorted before, set the initial sort direction.
if (tblEl.reverseSort == null)
tblEl.reverseSort = rev;
// If this column was the last one sorted, reverse its sort direction.
if (col == tblEl.lastColumn)
tblEl.reverseSort = !tblEl.reverseSort;
// Remember this column as the last one sorted.
tblEl.lastColumn = col;
// Set the table display style to "none" - necessary for Netscape 6
// browsers.
var oldDsply = tblEl.style.display;
tblEl.style.display = "none";
// Sort the rows based on the content of the specified column using a
// selection sort.
var tmpEl;
var i, j;
var minVal, minIdx;
var testVal;
var cmp;
for (i = 0; i < tblEl.rows.length - 1; i++) {
// Assume the current row has the minimum value.
minIdx = i;
minVal = getTextValue(tblEl.rows.cells);
// Search the rows that follow the current one for a smaller value.
for (j = i + 1; j < tblEl.rows.length; j++) {
testVal = getTextValue(tblEl.rows.cells);
cmp = compareValues(minVal, testVal);
// Negate the comparison result if the reverse sort flag is set.
if (tblEl.reverseSort)
cmp = -cmp;
// Sort by the second column (team name) if those values are equal.
if (cmp == 0 && col != 1)
cmp = compareValues(getTextValue(tblEl.rows.cells),
getTextValue(tblEl.rows.cells));
// If this row has a smaller value than the current minimum, remember its
// position and update the current minimum value.
if (cmp > 0) {
minIdx = j;
minVal = testVal;
}
}
// By now, we have the row with the smallest value. Remove it from the
// table and insert it before the current row.
if (minIdx > i) {
tmpEl = tblEl.removeChild(tblEl.rows);
tblEl.insertBefore(tmpEl, tblEl.rows);
}
}
// Make it look pretty.
makePretty(tblEl, col);
// Set team rankings.
setRanks(tblEl, col, rev);
// Restore the table's display style.
tblEl.style.display = oldDsply;
return false;
}
//-----------------------------------------------------------------------------
// Functions to get and compare values during a sort.
//-----------------------------------------------------------------------------
// This code is necessary for browsers that don't reflect the DOM constants
// (like IE).
if (document.ELEMENT_NODE == null) {
document.ELEMENT_NODE = 1;
document.TEXT_NODE = 3;
}
function getTextValue(el) {
var i;
var s;
// Find and concatenate the values of all text nodes contained within the
// element.
s = "";
for (i = 0; i < el.childNodes.length; i++)
if (el.childNodes.nodeType == document.TEXT_NODE)
s += el.childNodes.nodeValue;
else if (el.childNodes.nodeType == document.ELEMENT_NODE &&
el.childNodes.tagName == "BR")
s += " ";
else
// Use recursion to get text within sub-elements.
s += getTextValue(el.childNodes);
return normalizeString(s);
}
function compareValues(v1, v2) {
var f1, f2;
// If the values are numeric, convert them to floats.
f1 = parseFloat(v1);
f2 = parseFloat(v2);
if (!isNaN(f1) && !isNaN(f2)) {
v1 = f1;
v2 = f2;
}
// Compare the two values.
if (v1 == v2)
return 0;
if (v1 > v2)
return 1
return -1;
}
// Regular expressions for normalizing white space.
var whtSpEnds = new RegExp("^\\s*|\\s*$", "g");
var whtSpMult = new RegExp("\\s\\s+", "g");
function normalizeString(s) {
s = s.replace(whtSpMult, " "); // Collapse any multiple whites space.
s = s.replace(whtSpEnds, ""); // Remove leading or trailing white space.
return s;
}
//-----------------------------------------------------------------------------
// Functions to update the table appearance after a sort.
//-----------------------------------------------------------------------------
// Style class names.
var rowClsNm = "alternateRow";
var colClsNm = "sortedColumn";
// Regular expressions for setting class names.
var rowTest = new RegExp(rowClsNm, "gi");
var colTest = new RegExp(colClsNm, "gi");
function makePretty(tblEl, col) {
var i, j;
var rowEl, cellEl;
// Set style classes on each row to alternate their appearance.
for (i = 0; i < tblEl.rows.length; i++) {
rowEl = tblEl.rows;
rowEl.className = rowEl.className.replace(rowTest, "");
if (i % 2 != 0)
rowEl.className += " " + rowClsNm;
rowEl.className = normalizeString(rowEl.className);
// Set style classes on each column (other than the name column) to
// highlight the one that was sorted.
for (j = 2; j < tblEl.rows.cells.length; j++) {
cellEl = rowEl.cells;
cellEl.className = cellEl.className.replace(colTest, "");
if (j == col)
cellEl.className += " " + colClsNm;
cellEl.className = normalizeString(cellEl.className);
}
}
// Find the table header and highlight the column that was sorted.
var el = tblEl.parentNode.tHead;
rowEl = el.rows;
// Set style classes for each column as above.
for (i = 2; i < rowEl.cells.length; i++) {
cellEl = rowEl.cells;
cellEl.className = cellEl.className.replace(colTest, "");
// Highlight the header of the sorted column.
if (i == col)
cellEl.className += " " + colClsNm;
cellEl.className = normalizeString(cellEl.className);
}
}
function setRanks(tblEl, col, rev) {
// Determine whether to start at the top row of the table and go down or
// at the bottom row and work up. This is based on the current sort
// direction of the column and its reversed flag.
var i = 0;
var incr = 1;
if (tblEl.reverseSort)
rev = !rev;
if (rev) {
incr = -1;
i = tblEl.rows.length - 1;
}
// Now go through each row in that direction and assign it a rank by
// counting 1, 2, 3...
var count = 1;
var rank = count;
var curVal;
var lastVal = null;
// Note that this loop is skipped if the table was sorted on the name
// column.
while (col > 1 && i >= 0 && i < tblEl.rows.length) {
// Get the value of the sort column in this row.
curVal = getTextValue(tblEl.rows.cells);
// On rows after the first, compare the sort value of this row to the
// previous one. If they differ, update the rank to match the current row
// count. (If they are the same, this row will get the same rank as the
// previous one.)
if (lastVal != null && compareValues(curVal, lastVal) != 0)
rank = count;
// Set the rank for this row.
tblEl.rows.rank = rank;
// Save the sort value of the current row for the next time around and bump
// the row counter and index.
lastVal = curVal;
count++;
i += incr;
}
// Now go through each row (from top to bottom) and display its rank. Note
// that when two or more rows are tied, the rank is shown on the first of
// those rows only.
var rowEl, cellEl;
var lastRank = 0;
// Go through the rows from top to bottom.
for (i = 0; i < tblEl.rows.length; i++) {
rowEl = tblEl.rows;
cellEl = rowEl.cells;
// Delete anything currently in the rank column.
while (cellEl.lastChild != null)
cellEl.removeChild(cellEl.lastChild);
// If this row's rank is different from the previous one, Insert a new text
// node with that rank.
if (col > 1 && rowEl.rank != lastRank) {
cellEl.appendChild(document.createTextNode(rowEl.rank));
lastRank = rowEl.rank;
}
}
}
</SCRIPT>
<META content="MSHTML 6.00.2600.0" name=GENERATOR></HEAD>
<BODY>
<P><!-- Offensive statistics table. -->
<TABLE cellSpacing=0 cellPadding=0 border=0>
<THEAD>
<TR>
<TH class=mainHeader colSpan=11>NFL 2001 Offensive Stats</TH></TR>
<TR>
<TH style="TEXT-ALIGN: left">Rank</TH>
<TH style="TEXT-ALIGN: left"><A title="Team Name"
onclick="this.blur(); return sortTable('offTblBdy', 1, false);"
href="http://www.brainjar.com/dhtml/tablesort/">Team</A></TH>
<TH><SPAN title="Games Played">Gms</SPAN></TH>
<TH><A title="Total Yards"
onclick="this.blur(); return sortTable('offTblBdy', 3, true);"
href="http://www.brainjar.com/dhtml/tablesort/">Yds</A></TH>
<TH><A title="Yards Per Game"
onclick="this.blur(); return sortTable('offTblBdy', 4, true);"
href="http://www.brainjar.com/dhtml/tablesort/">Yds/G</A></TH>
<TH><A title="Total Rushing Yards"
onclick="this.blur(); return sortTable('offTblBdy', 5, true);"
href="http://www.brainjar.com/dhtml/tablesort/">RuYds</A></TH>
<TH><A title="Rushing Yards Per Game"
onclick="this.blur(); return sortTable('offTblBdy', 6, true);"
href="http://www.brainjar.com/dhtml/tablesort/">RuYds/G</A></TH>
<TH><A title="Total Passing Yards"
onclick="this.blur(); return sortTable('offTblBdy', 7, true);"
href="http://www.brainjar.com/dhtml/tablesort/">PaYds</A></TH>
<TH><A title="Passing Yards Per Game"
onclick="this.blur(); return sortTable('offTblBdy', 8, true);"
href="http://www.brainjar.com/dhtml/tablesort/">PaYds/G</A></TH>
<TH><A title="Total Points Scored"
onclick="this.blur(); return sortTable('offTblBdy', 9, true);"
href="http://www.brainjar.com/dhtml/tablesort/">Pts</A></TH>
<TH><A title="Points Per Game"
onclick="this.blur(); return sortTable('offTblBdy', 10, true);"
href="http://www.brainjar.com/dhtml/tablesort/">Pts/G</A></TH></TR></THEAD>
<TBODY id=offTblBdy>
<TR>
<TD class=numeric></TD>
<TD>Arizona</TD>
<TD class=numeric>16</TD>
<TD class=numeric>4898</TD>
<TD class=numeric>306.1</TD>
<TD class=numeric>1449</TD>
<TD class=numeric>90.6</TD>
<TD class=numeric>3449</TD>
<TD class=numeric>215.6</TD>
<TD class=numeric>295</TD>
<TD class=numeric>18.4</TD></TR>
<TR class=alternateRow>
<TD class=numeric></TD>
<TD>Atlanta</TD>
<TD class=numeric>16</TD>
<TD class=numeric>5070</TD>
<TD class=numeric>316.9</TD>
<TD class=numeric>1773</TD>
<TD class=numeric>110.8</TD>
<TD class=numeric>3297</TD>
<TD class=numeric>206.1</TD>
<TD class=numeric>291</TD>
<TD class=numeric>18.2</TD></TR>
<TR>
<TD class=numeric></TD>
<TD>Baltimore</TD>
<TD class=numeric>16</TD>
<TD class=numeric>4773</TD>
<TD class=numeric>318.2</TD>
<TD class=numeric>1598</TD>
<TD class=numeric>106.5</TD>
<TD class=numeric>3175</TD>
<TD class=numeric>211.7</TD>
<TD class=numeric>284</TD>
<TD class=numeric>18.9</TD></TR>
<TR class=alternateRow>
<TD class=numeric></TD>
<TD>Buffalo</TD>
<TD class=numeric>16</TD>
<TD class=numeric>5137</TD>
<TD class=numeric>321.1</TD>
<TD class=numeric>1686</TD>
<TD class=numeric>105.4</TD>
<TD class=numeric>3451</TD>
<TD class=numeric>215.7</TD>
<TD class=numeric>265</TD>
<TD class=numeric>16.6</TD></TR>
<TR>
<TD class=numeric></TD>
<TD>Carolina</TD>
<TD class=numeric>16</TD>
<TD class=numeric>4254</TD>
<TD class=numeric>265.9</TD>
<TD class=numeric>1372</TD>
<TD class=numeric>85.8</TD>
<TD class=numeric>2882</TD>
<TD class=numeric>180.1</TD>
<TD class=numeric>253</TD>
<TD class=numeric>15.8</TD></TR>
<TR class=alternateRow>
<TD class=numeric></TD>
<TD>Chicago</TD>
<TD class=numeric>16</TD>
<TD class=numeric>4694</TD>
<TD class=numeric>293.4</TD>
<TD class=numeric>1742</TD>
<TD class=numeric>108.9</TD>
<TD class=numeric>2952</TD>
<TD class=numeric>184.5</TD>
<TD class=numeric>338</TD>
<TD class=numeric>21.1</TD></TR>
<TR>
<TD class=numeric></TD>
<TD>Cincinnati</TD>
<TD class=numeric>16</TD>
<TD class=numeric>4800</TD>
<TD class=numeric>300.0</TD>
<TD class=numeric>1712</TD>
<TD class=numeric>107.0</TD>
<TD class=numeric>3088</TD>
<TD class=numeric>193.0</TD>
<TD class=numeric>226</TD>
<TD class=numeric>14.1</TD></TR>
<TR class=alternateRow>
<TD class=numeric></TD>
<TD>Cleveland</TD>
<TD class=numeric>16</TD>
<TD class=numeric>4152</TD>
<TD class=numeric>259.5</TD>
<TD class=numeric>1351</TD>
<TD class=numeric>84.4</TD>
<TD class=numeric>2801</TD>
<TD class=numeric>175.1</TD>
<TD class=numeric>285</TD>
<TD class=numeric>17.8</TD></TR>
<TR>
<TD class=numeric></TD>
<TD>Dallas</TD>
<TD class=numeric>16</TD>
<TD class=numeric>4402</TD>
<TD class=numeric>275.1</TD>
<TD class=numeric>2184</TD>
<TD class=numeric>136.5</TD>
<TD class=numeric>2218</TD>
<TD class=numeric>138.6</TD>
<TD class=numeric>246</TD>
<TD class=numeric>15.4</TD></TR>
<TR class=alternateRow>
<TD class=numeric></TD>
<TD>Denver</TD>
<TD class=numeric>16</TD>
<TD class=numeric>4817</TD>
<TD class=numeric>301.1</TD>
<TD class=numeric>1877</TD>
<TD class=numeric>117.3</TD>
<TD class=numeric>2940</TD>
<TD class=numeric>183.8</TD>
<TD class=numeric>340</TD>
<TD class=numeric>21.2</TD></TR>
<TR>
<TD class=numeric></TD>
<TD>Detroit</TD>
<TD class=numeric>16</TD>
<TD class=numeric>4994</TD>
<TD class=numeric>312.1</TD>
<TD class=numeric>1398</TD>
<TD class=numeric>87.4</TD>
<TD class=numeric>3596</TD>
<TD class=numeric>224.8</TD>
<TD class=numeric>270</TD>
<TD class=numeric>16.9</TD></TR>
<TR class=alternateRow>
<TD class=numeric></TD>
<TD>Green Bay</TD>
<TD class=numeric>16</TD>
<TD class=numeric>5463</TD>
<TD class=numeric>341.4</TD>
<TD class=numeric>1693</TD>
<TD class=numeric>105.8</TD>
<TD class=numeric>3770</TD>
<TD class=numeric>235.6</TD>
<TD class=numeric>390</TD>
<TD class=numeric>24.4</TD></TR>
<TR>
<TD class=numeric></TD>
<TD>Indianapolis</TD>
<TD class=numeric>16</TD>
<TD class=numeric>5955</TD>
<TD class=numeric>372.2</TD>
<TD class=numeric>1966</TD>
<TD class=numeric>122.9</TD>
<TD class=numeric>3989</TD>
<TD class=numeric>249.3</TD>
<TD class=numeric>413</TD>
<TD class=numeric>25.8</TD></TR>
<TR class=alternateRow>
<TD class=numeric></TD>
<TD>Jacksonville</TD>
<TD class=numeric>16</TD>
<TD class=numeric>4840</TD>
<TD class=numeric>302.5</TD>
<TD class=numeric>1600</TD>
<TD class=numeric>100.0</TD>
<TD class=numeric>3240</TD>
<TD class=numeric>202.5</TD>
<TD class=numeric>294</TD>
<TD class=numeric>18.4</TD></TR>
<TR>
<TD class=numeric></TD>
<TD>Kansas City</TD>
<TD class=numeric>16</TD>
<TD class=numeric>5673</TD>
<TD class=numeric>354.6</TD>
<TD class=numeric>2008</TD>
<TD class=numeric>125.5</TD>
<TD class=numeric>3665</TD>
<TD class=numeric>229.1</TD>
<TD class=numeric>320</TD>
<TD class=numeric>20.0</TD></TR>
<TR class=alternateRow>
<TD class=numeric></TD>
<TD>Miami</TD>
<TD class=numeric>16</TD>
<TD class=numeric>4821</TD>
<TD class=numeric>301.3</TD>
<TD class=numeric>1664</TD>
<TD class=numeric>104.0</TD>
<TD class=numeric>3157</TD>
<TD class=numeric>197.3</TD>
<TD class=numeric>344</TD>
<TD class=numeric>21.5</TD></TR>
<TR>
<TD class=numeric></TD>
<TD>Minnesota</TD>
<TD class=numeric>16</TD>
<TD class=numeric>5006</TD>
<TD class=numeric>333.7</TD>
<TD class=numeric>1523</TD>
<TD class=numeric>101.5</TD>
<TD class=numeric>3483</TD>
<TD class=numeric>232.2</TD>
<TD class=numeric>287</TD>
<TD class=numeric>19.1</TD></TR>
<TR class=alternateRow>
<TD class=numeric></TD>
<TD>New England</TD>
<TD class=numeric>16</TD>
<TD class=numeric>4882</TD>
<TD class=numeric>305.1</TD>
<TD class=numeric>1793</TD>
<TD class=numeric>112.1</TD>
<TD class=numeric>3089</TD>
<TD class=numeric>193.1</TD>
<TD class=numeric>371</TD>
<TD class=numeric>23.2</TD></TR>
<TR>
<TD class=numeric></TD>
<TD>New Orleans</TD>
<TD class=numeric>16</TD>
<TD class=numeric>5226</TD>
<TD class=numeric>326.6</TD>
<TD class=numeric>1712</TD>
<TD class=numeric>107.0</TD>
<TD class=numeric>3514</TD>
<TD class=numeric>219.6</TD>
<TD class=numeric>333</TD>
<TD class=numeric>20.8</TD></TR>
<TR class=alternateRow>
<TD class=numeric></TD>
<TD>New York Giants</TD>
<TD class=numeric>16</TD>
<TD class=numeric>5335</TD>
<TD class=numeric>333.4</TD>
<TD class=numeric>1777</TD>
<TD class=numeric>111.1</TD>
<TD class=numeric>3558</TD>
<TD class=numeric>222.4</TD>
<TD class=numeric>294</TD>
<TD class=numeric>18.4</TD></TR>
</TBODY></TABLE>
</BODY></HTML>
[ 本贴由 卫星星 于 2003-3-18 11:37 最后编辑 ] 表格排序 2 [如果运行后看不到效果，请把内容保存为html文件再浏览]
<LINK
href="http://www.brainjar.com/common/default.css" type=text/css rel=stylesheet>
<STYLE type=text/css>TABLE {
BORDER-RIGHT: #000000 2px solid; BORDER-TOP: #000000 2px solid; BORDER-LEFT: #000000 2px solid; BORDER-BOTTOM: #000000 2px solid; border-spacing: 0px; cell-spacing: 0px
}
TD {
PADDING-RIGHT: 0.5em; PADDING-LEFT: 0.5em; FONT-SIZE: 10pt; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; FONT-FAMILY: Arial, Helvetica, sans-serif; WHITE-SPACE: nowrap
}
TH {
PADDING-RIGHT: 0.5em; PADDING-LEFT: 0.5em; FONT-SIZE: 10pt; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; FONT-FAMILY: Arial, Helvetica, sans-serif; WHITE-SPACE: nowrap
}
TD.numeric {
TEXT-ALIGN: right
}
TH {
BACKGROUND-COLOR: #c0c0c0
}
TH.mainHeader {
COLOR: #ffffff; BACKGROUND-COLOR: #808080; TEXT-ALIGN: left
}
TH A {
COLOR: #000080; TEXT-DECORATION: none
}
TH A:visited {
COLOR: #000080
}
TH A:active {
COLOR: #800000; TEXT-DECORATION: underline
}
TH A:hover {
COLOR: #800000; TEXT-DECORATION: underline
}
TR.alternateRow {
BACKGROUND-COLOR: #e0e0e0
}
TD.sortedColumn {
BACKGROUND-COLOR: #f0f0f0
}
TH.sortedColumn {
BACKGROUND-COLOR: #b0b0b0
}
TR.alternateRow TD.sortedColumn {
BACKGROUND-COLOR: #d0d0d0
}
</STYLE>
<SCRIPT type=text/javascript>
//-----------------------------------------------------------------------------
// sortTable(id, col, rev)
//
// id - ID of the TABLE, TBODY, THEAD or TFOOT element to be sorted.
// col - Index of the column to sort, 0 = first column, 1 = second column,
// etc.
// rev - If true, the column is sorted in reverse (descending) order
// initially.
//
// Note: the team name column (index 1) is used as a secondary sort column and
// always sorted in ascending order.
//-----------------------------------------------------------------------------
function sortTable(id, col, rev) {
// Get the table or table section to sort.
var tblEl = document.getElementById(id);
// The first time this function is called for a given table, set up an
// array of reverse sort flags.
if (tblEl.reverseSort == null) {
tblEl.reverseSort = new Array();
// Also, assume the team name column is initially sorted.
tblEl.lastColumn = 1;
}
// If this column has not been sorted before, set the initial sort direction.
if (tblEl.reverseSort == null)
tblEl.reverseSort = rev;
// If this column was the last one sorted, reverse its sort direction.
if (col == tblEl.lastColumn)
tblEl.reverseSort = !tblEl.reverseSort;
// Remember this column as the last one sorted.
tblEl.lastColumn = col;
// Set the table display style to "none" - necessary for Netscape 6
// browsers.
var oldDsply = tblEl.style.display;
tblEl.style.display = "none";
// Sort the rows based on the content of the specified column using a
// selection sort.
var tmpEl;
var i, j;
var minVal, minIdx;
var testVal;
var cmp;
for (i = 0; i < tblEl.rows.length - 1; i++) {
// Assume the current row has the minimum value.
minIdx = i;
minVal = getTextValue(tblEl.rows.cells);
// Search the rows that follow the current one for a smaller value.
for (j = i + 1; j < tblEl.rows.length; j++) {
testVal = getTextValue(tblEl.rows.cells);
cmp = compareValues(minVal, testVal);
// Negate the comparison result if the reverse sort flag is set.
if (tblEl.reverseSort)
cmp = -cmp;
// Sort by the second column (team name) if those values are equal.
if (cmp == 0 && col != 1)
cmp = compareValues(getTextValue(tblEl.rows.cells),
getTextValue(tblEl.rows.cells));
// If this row has a smaller value than the current minimum, remember its
// position and update the current minimum value.
if (cmp > 0) {
minIdx = j;
minVal = testVal;
}
}
// By now, we have the row with the smallest value. Remove it from the
// table and insert it before the current row.
if (minIdx > i) {
tmpEl = tblEl.removeChild(tblEl.rows);
tblEl.insertBefore(tmpEl, tblEl.rows);
}
}
// Make it look pretty.
makePretty(tblEl, col);
// Set team rankings.
setRanks(tblEl, col, rev);
// Restore the table's display style.
tblEl.style.display = oldDsply;
return false;
}
//-----------------------------------------------------------------------------
// Functions to get and compare values during a sort.
//-----------------------------------------------------------------------------
// This code is necessary for browsers that don't reflect the DOM constants
// (like IE).
if (document.ELEMENT_NODE == null) {
document.ELEMENT_NODE = 1;
document.TEXT_NODE = 3;
}
function getTextValue(el) {
var i;
var s;
// Find and concatenate the values of all text nodes contained within the
// element.
s = "";
for (i = 0; i < el.childNodes.length; i++)
if (el.childNodes.nodeType == document.TEXT_NODE)
s += el.childNodes.nodeValue;
else if (el.childNodes.nodeType == document.ELEMENT_NODE &&
el.childNodes.tagName == "BR")
s += " ";
else
// Use recursion to get text within sub-elements.
s += getTextValue(el.childNodes);
return normalizeString(s);
}
function compareValues(v1, v2) {
var f1, f2;
// If the values are numeric, convert them to floats.
f1 = parseFloat(v1);
f2 = parseFloat(v2);
if (!isNaN(f1) && !isNaN(f2)) {
v1 = f1;
v2 = f2;
}
// Compare the two values.
if (v1 == v2)
return 0;
if (v1 > v2)
return 1
return -1;
}
// Regular expressions for normalizing white space.
var whtSpEnds = new RegExp("^\\s*|\\s*$", "g");
var whtSpMult = new RegExp("\\s\\s+", "g");
function normalizeString(s) {
s = s.replace(whtSpMult, " "); // Collapse any multiple whites space.
s = s.replace(whtSpEnds, ""); // Remove leading or trailing white space.
return s;
}
//-----------------------------------------------------------------------------
// Functions to update the table appearance after a sort.
//-----------------------------------------------------------------------------
// Style class names.
var rowClsNm = "alternateRow";
var colClsNm = "sortedColumn";
// Regular expressions for setting class names.
var rowTest = new RegExp(rowClsNm, "gi");
var colTest = new RegExp(colClsNm, "gi");
function makePretty(tblEl, col) {
var i, j;
var rowEl, cellEl;
// Set style classes on each row to alternate their appearance.
for (i = 0; i < tblEl.rows.length; i++) {
rowEl = tblEl.rows;
rowEl.className = rowEl.className.replace(rowTest, "");
if (i % 2 != 0)
rowEl.className += " " + rowClsNm;
rowEl.className = normalizeString(rowEl.className);
// Set style classes on each column (other than the name column) to
// highlight the one that was sorted.
for (j = 2; j < tblEl.rows.cells.length; j++) {
cellEl = rowEl.cells;
cellEl.className = cellEl.className.replace(colTest, "");
if (j == col)
cellEl.className += " " + colClsNm;
cellEl.className = normalizeString(cellEl.className);
}
}
// Find the table header and highlight the column that was sorted.
var el = tblEl.parentNode.tHead;
rowEl = el.rows;
// Set style classes for each column as above.
for (i = 2; i < rowEl.cells.length; i++) {
cellEl = rowEl.cells;
cellEl.className = cellEl.className.replace(colTest, "");
// Highlight the header of the sorted column.
if (i == col)
cellEl.className += " " + colClsNm;
cellEl.className = normalizeString(cellEl.className);
}
}
function setRanks(tblEl, col, rev) {
// Determine whether to start at the top row of the table and go down or
// at the bottom row and work up. This is based on the current sort
// direction of the column and its reversed flag.
var i = 0;
var incr = 1;
if (tblEl.reverseSort)
rev = !rev;
if (rev) {
incr = -1;
i = tblEl.rows.length - 1;
}
// Now go through each row in that direction and assign it a rank by
// counting 1, 2, 3...
var count = 1;
var rank = count;
var curVal;
var lastVal = null;
// Note that this loop is skipped if the table was sorted on the name
// column.
while (col > 1 && i >= 0 && i < tblEl.rows.length) {
// Get the value of the sort column in this row.
curVal = getTextValue(tblEl.rows.cells);
// On rows after the first, compare the sort value of this row to the
// previous one. If they differ, update the rank to match the current row
// count. (If they are the same, this row will get the same rank as the
// previous one.)
if (lastVal != null && compareValues(curVal, lastVal) != 0)
rank = count;
// Set the rank for this row.
tblEl.rows.rank = rank;
// Save the sort value of the current row for the next time around and bump
// the row counter and index.
lastVal = curVal;
count++;
i += incr;
}
// Now go through each row (from top to bottom) and display its rank. Note
// that when two or more rows are tied, the rank is shown on the first of
// those rows only.
var rowEl, cellEl;
var lastRank = 0;
// Go through the rows from top to bottom.
for (i = 0; i < tblEl.rows.length; i++) {
rowEl = tblEl.rows;
cellEl = rowEl.cells;
// Delete anything currently in the rank column.
while (cellEl.lastChild != null)
cellEl.removeChild(cellEl.lastChild);
// If this row's rank is different from the previous one, Insert a new text
// node with that rank.
if (col > 1 && rowEl.rank != lastRank) {
cellEl.appendChild(document.createTextNode(rowEl.rank));
lastRank = rowEl.rank;
}
}
}
</SCRIPT>
<META content="MSHTML 6.00.2600.0" name=GENERATOR></HEAD>
<BODY>
<P><!-- Defensive statistics table. -->
<TABLE cellSpacing=0 cellPadding=0 border=0>
<THEAD>
<TR>
<TH class=mainHeader colSpan=11>NFL 2001 Defensive Stats</TH></TR>
<TR>
<TH style="TEXT-ALIGN: left">Rank</TH>
<TH style="TEXT-ALIGN: left"><A title="Team Name"
onclick="this.blur(); return sortTable('defTblBdy', 1, false);"
href="http://www.brainjar.com/dhtml/tablesort/">Team</A></TH>
<TH><SPAN title="Games Played">Gms</SPAN></TH>
<TH><A title="Total Yards Allowed"
onclick="this.blur(); return sortTable('defTblBdy', 3, false);"
href="http://www.brainjar.com/dhtml/tablesort/">Yds</A></TH>
<TH><A title="Yards Allowed Per Game"
onclick="this.blur(); return sortTable('defTblBdy', 4, false);"
href="http://www.brainjar.com/dhtml/tablesort/">Yds/G</A></TH>
<TH><A title="Total Rushing Yards Allowed"
onclick="this.blur(); return sortTable('defTblBdy', 5, false);"
href="http://www.brainjar.com/dhtml/tablesort/">RuYds</A></TH>
<TH><A title="Rushing Yards Allowed Per Game"
onclick="this.blur(); return sortTable('defTblBdy', 6, false);"
href="http://www.brainjar.com/dhtml/tablesort/">RuYds/G</A></TH>
<TH><A title="Total Passing Yards Allowed"
onclick="this.blur(); return sortTable('defTblBdy', 7, false);"
href="http://www.brainjar.com/dhtml/tablesort/">PaYds</A></TH>
<TH><A title="Passing Yards Allowed Per Game"
onclick="this.blur(); return sortTable('defTblBdy', 8, false);"
href="http://www.brainjar.com/dhtml/tablesort/">PaYds/G</A></TH>
<TH><A title="Total Points Allowed"
onclick="this.blur(); return sortTable('defTblBdy', 9, false);"
href="http://www.brainjar.com/dhtml/tablesort/">Pts</A></TH>
<TH><A title="Points Allowed Per Game"
onclick="this.blur(); return sortTable('defTblBdy', 10, false);"
href="http://www.brainjar.com/dhtml/tablesort/">Pts/G</A></TH></TR></THEAD>
<TBODY id=defTblBdy>
<TR class="">
<TD class=numeric></TD>
<TD class="">Arizona</TD>
<TD class=numeric>16</TD>
<TD class=numeric>5685</TD>
<TD class=numeric>355.3</TD>
<TD class=numeric>2087</TD>
<TD class=numeric>130.4</TD>
<TD class=numeric>3598</TD>
<TD class=numeric>224.9</TD>
<TD class=numeric>343</TD>
<TD class=numeric>21.4</TD></TR>
<TR class=alternateRow>
<TD class=numeric></TD>
<TD class="">Atlanta</TD>
<TD class=numeric>16</TD>
<TD class=numeric>5845</TD>
<TD class=numeric>365.3</TD>
<TD class=numeric>1943</TD>
<TD class=numeric>121.4</TD>
<TD class=numeric>3902</TD>
<TD class=numeric>243.9</TD>
<TD class=numeric>377</TD>
<TD class=numeric>23.6</TD></TR>
<TR class="">
<TD class=numeric></TD>
<TD class="">Baltimore</TD>
<TD class=numeric>16</TD>
<TD class=numeric>4267</TD>
<TD class=numeric>284.5</TD>
<TD class=numeric>1325</TD>
<TD class=numeric>88.3</TD>
<TD class=numeric>2942</TD>
<TD class=numeric>196.1</TD>
<TD class=numeric>262</TD>
<TD class=numeric>17.5</TD></TR>
<TR class=alternateRow>
<TD class=numeric></TD>
<TD class="">Buffalo</TD>
<TD class=numeric>16</TD>
<TD class=numeric>5292</TD>
<TD class=numeric>330.8</TD>
<TD class=numeric>2133</TD>
<TD class=numeric>133.3</TD>
<TD class=numeric>3159</TD>
<TD class=numeric>197.4</TD>
<TD class=numeric>420</TD>
<TD class=numeric>26.2</TD></TR>
<TR>
<TD class=numeric></TD>
<TD class="">Carolina</TD>
<TD class=numeric>16</TD>
<TD class=numeric>5943</TD>
<TD class=numeric>371.4</TD>
<TD class=numeric>2301</TD>
<TD class=numeric>143.8</TD>
<TD class=numeric>3642</TD>
<TD class=numeric>227.6</TD>
<TD class=numeric>410</TD>
<TD class=numeric>25.6</TD></TR>
<TR class=alternateRow>
<TD class=numeric></TD>
<TD class="">Chicago</TD>
<TD class=numeric>16</TD>
<TD class=numeric>4978</TD>
<TD class=numeric>311.1</TD>
<TD class=numeric>1313</TD>
<TD class=numeric>82.1</TD>
<TD class=numeric>3665</TD>
<TD class=numeric>229.1</TD>
<TD class=numeric>203</TD>
<TD class=numeric>12.7</TD></TR>
<TR>
<TD class=numeric></TD>
<TD class="">Cincinnati</TD>
<TD class=numeric>16</TD>
<TD class=numeric>4832</TD>
<TD class=numeric>302.0</TD>
<TD class=numeric>1675</TD>
<TD class=numeric>104.7</TD>
<TD class=numeric>3157</TD>
<TD class=numeric>197.3</TD>
<TD class=numeric>309</TD>
<TD class=numeric>19.3</TD></TR>
<TR class=alternateRow>
<TD class=numeric></TD>
<TD class="">Cleveland</TD>
<TD class=numeric>16</TD>
<TD class=numeric>5297</TD>
<TD class=numeric>331.1</TD>
<TD class=numeric>2208</TD>
<TD class=numeric>138.0</TD>
<TD class=numeric>3089</TD>
<TD class=numeric>193.1</TD>
<TD class=numeric>319</TD>
<TD class=numeric>19.9</TD></TR>
<TR>
<TD class=numeric></TD>
<TD class="">Dallas</TD>
<TD class=numeric>16</TD>
<TD class=numeric>4599</TD>
<TD class=numeric>287.4</TD>
<TD class=numeric>1710</TD>
<TD class=numeric>106.9</TD>
<TD class=numeric>2889</TD>
<TD class=numeric>180.6</TD>
<TD class=numeric>338</TD>
<TD class=numeric>21.1</TD></TR>
<TR class=alternateRow>
<TD class=numeric></TD>
<TD class="">Denver</TD>
<TD class=numeric>16</TD>
<TD class=numeric>4774</TD>
<TD class=numeric>298.4</TD>
<TD class=numeric>1492</TD>
<TD class=numeric>93.2</TD>
<TD class=numeric>3282</TD>
<TD class=numeric>205.1</TD>
<TD class=numeric>339</TD>
<TD class=numeric>21.2</TD></TR>
<TR>
<TD class=numeric></TD>
<TD class="">Detroit</TD>
<TD class=numeric>16</TD>
<TD class=numeric>5521</TD>
<TD class=numeric>345.1</TD>
<TD class=numeric>1993</TD>
<TD class=numeric>124.6</TD>
<TD class=numeric>3528</TD>
<TD class=numeric>220.5</TD>
<TD class=numeric>424</TD>
<TD class=numeric>26.5</TD></TR>
<TR class=alternateRow>
<TD class=numeric></TD>
<TD class="">Green Bay</TD>
<TD class=numeric>16</TD>
<TD class=numeric>4937</TD>
<TD class=numeric>308.6</TD>
<TD class=numeric>1769</TD>
<TD class=numeric>110.6</TD>
<TD class=numeric>3168</TD>
<TD class=numeric>198.0</TD>
<TD class=numeric>266</TD>
<TD class=numeric>16.6</TD></TR>
<TR>
<TD class=numeric></TD>
<TD class="">Indianapolis</TD>
<TD class=numeric>16</TD>
<TD class=numeric>5715</TD>
<TD class=numeric>357.2</TD>
<TD class=numeric>2115</TD>
<TD class=numeric>132.2</TD>
<TD class=numeric>3600</TD>
<TD class=numeric>225.0</TD>
<TD class=numeric>486</TD>
<TD class=numeric>30.4</TD></TR>
<TR class=alternateRow>
<TD class=numeric></TD>
<TD class="">Jacksonville</TD>
<TD class=numeric>16</TD>
<TD class=numeric>5070</TD>
<TD class=numeric>316.9</TD>
<TD class=numeric>1611</TD>
<TD class=numeric>100.7</TD>
<TD class=numeric>3459</TD>
<TD class=numeric>216.2</TD>
<TD class=numeric>286</TD>
<TD class=numeric>17.9</TD></TR>
<TR>
<TD class=numeric></TD>
<TD class="">Kansas City</TD>
<TD class=numeric>16</TD>
<TD class=numeric>5304</TD>
<TD class=numeric>331.5</TD>
<TD class=numeric>2140</TD>
<TD class=numeric>133.8</TD>
<TD class=numeric>3164</TD>
<TD class=numeric>197.8</TD>
<TD class=numeric>344</TD>
<TD class=numeric>21.5</TD></TR>
<TR class=alternateRow>
<TD class=numeric></TD>
<TD class="">Miami</TD>
<TD class=numeric>16</TD>
<TD class=numeric>4608</TD>
<TD class=numeric>288.0</TD>
<TD class=numeric>1779</TD>
<TD class=numeric>111.2</TD>
<TD class=numeric>2829</TD>
<TD class=numeric>176.8</TD>
<TD class=numeric>290</TD>
<TD class=numeric>18.1</TD></TR>
<TR>
<TD class=numeric></TD>
<TD class="">Minnesota</TD>
<TD class=numeric>16</TD>
<TD class=numeric>5315</TD>
<TD class=numeric>354.3</TD>
<TD class=numeric>2087</TD>
<TD class=numeric>139.1</TD>
<TD class=numeric>3228</TD>
<TD class=numeric>215.2</TD>
<TD class=numeric>371</TD>
<TD class=numeric>24.7</TD></TR>
<TR class=alternateRow>
<TD class=numeric></TD>
<TD class="">New England</TD>
<TD class=numeric>16</TD>
<TD class=numeric>5352</TD>
<TD class=numeric>334.5</TD>
<TD class=numeric>1855</TD>
<TD class=numeric>115.9</TD>
<TD class=numeric>3497</TD>
<TD class=numeric>218.6</TD>
<TD class=numeric>272</TD>
<TD class=numeric>17.0</TD></TR>
<TR>
<TD class=numeric></TD>
<TD class="">New Orleans</TD>
<TD class=numeric>16</TD>
<TD class=numeric>5070</TD>
<TD class=numeric>316.9</TD>
<TD class=numeric>1715</TD>
<TD class=numeric>107.2</TD>
<TD class=numeric>3355</TD>
<TD class=numeric>209.7</TD>
<TD class=numeric>409</TD>
<TD class=numeric>25.6</TD></TR>
</TBODY></TABLE>
</P></BODY></HTML>
[ 本贴由 卫星星 于 2003-3-18 11:37 最后编辑 ] 光标定位等等……TextRange的操作
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>光标位置</title>
<style>
INPUT{border: 1 solid #000000}
BODY,TABLE{font-size: 10pt}
</style>
</head>
<body>
<table border="0" width="700" cellspacing="0" cellpadding="0">
<tr>
<td width="479" rowspan="7">
点击 TextArea 实现光标定位
<p>
<textarea rows="7" cols="49" id="box" onclick=tellPoint()>我怕来不及我要抱着你，直到感觉你的绉纹有了岁月的痕迹，直到视线变得模糊直到不能呼吸
为了你我愿意
动也不能动也要看着你，直到感觉你的发线有了白雪的痕迹，直到肯定你是真的直到失去力气让我们形影不离
如果全世界我也可以放弃，至少还有你值得我去珍惜而你在这里就是生命的奇迹
也许全世界我也可以忘记，就是不愿意失去你的消息你掌心的痣我总记得在哪里
我们好不容易我们身不由已，我怕时间太快不够将你看仔细，我怕时间太慢日夜担心失去你恨不得一夜之间白头永不分离
</textarea>
<script>
function movePoint()
{
var pn = parseInt(pnum.value);
if(isNaN(pn))
return;
var rng = box.createTextRange();
rng.moveStart("character",pn);
rng.collapse(true);
rng.select();
returnCase(rng)
}
function tellPoint()
{
var rng = event.srcElement.createTextRange();
rng.moveToPoint(event.x,event.y);
rng.moveStart("character",-event.srcElement.value.length)
pnum.value = rng.text.length
returnCase(rng)
}
function returnCase(rng)
{
bh.innerText = rng.boundingHeight;
bl.innerText = rng.boundingLeft;
bt.innerText = rng.boundingTop;
bw.innerText = rng.boundingWidth;
ot.innerText = rng.offsetTop;
ol.innerText = rng.offsetLeft;
t.innerText = rng.text;
}
function selectText(sp,ep)
{
sp = parseInt(sp)
ep = parseInt(ep)
if(isNaN(sp)||isNaN(ep))
return;
var rng = box.createTextRange();
rng.moveEnd("character",-box.value.length)
rng.moveStart("character",-box.value.length)
rng.collapse(true);
rng.moveEnd("character",ep)
rng.moveStart("character",sp)
rng.select();
returnCase(rng);
}
var rg = box.createTextRange();
function findText(tw)
{
if(tw=="")
return;
var sw = 0;
if(document.selection)
{
sw = document.selection.createRange().text.length;
}
rg.moveEnd("character",box.value.length);
rg.moveStart("character",sw);
if(rg.findText(tw))
{
rg.select();
returnCase(rg);
}
if(rg.text!=tw)
{
alert("已经搜索完了")
rg = box.createTextRange()
}
}
</script>
</p>
<p></p>
光标位置：<input type="text" value="0" id="pnum" size="8"> <input type="button" onclick="movePoint()" value="移动光标到指定位置">
<p></p>
选择指定范围：<input type="text" size="9" id="sbox"> -- <input type="text" size="9" id="ebox"> <input type="button" onclick="selectText(sbox.value,ebox.value)" value="选择">
<p></p>
选择查找字符 ：<input type="text" value="" id="cbox" size="8"> <input type="button" onclick="findText(cbox.value)" value="查找下一个并选择">
</td>
<td width="217">boundingHeight: <span id="bh"></span></td>
</tr>
<tr>
<td width="217">boundingWidth: <span id="bw"></span></td>
</tr>
<tr>
<td width="217">boundingTop: <span id="bt"></span></td>
</tr>
<tr>
<td width="217">boundingLeft: <span id="bl"></span></td>
</tr>
<tr>
<td width="217">offsetLeft: <span id="ol"></span> </td>
</tr>
<tr>
<td width="217">offsetTop: <span id="ot"></span> </td>
</tr>
<tr>
<td width="217">text: <span style="position: absolute; z-index: 10" id="t"></span> </td>
</tr>
</table>
</body>
</html>
用按纽让层移动
<html>
<head>
<title>无标题文档</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body topmargin="0" leftmargin="0" bgcolor="#FFFFFF" onclick="menuHide();">
<script>
document.onmousewheel=function()
{
status=event.wheelDelta;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
<!--
.menuover { background-color: #FFeeee; border: 1px solid #FF0000; cursor: hand; }
.menuout { cursor: hand; }
td,a { color: #ff0000; font-size: 12px; font-family: 宋体; text-decoration: none }
-->
</style>
<script language=javascript>
var run=0;
var show=0;
function menuRow()
{
show=1;
run=1;
menu.style.pixelTop-=5;
if(menu.style.pixelTop>0)
setTimeout('menuRow();','5');
else
run=0;
}
function menuShow()
{
if(!run&&!show)
{
menu.style.visibility='visible';
menup.style.visibility='visible';
menu.style.pixelTop=200;
menuRow();
}
}
function menuHide()
{
if(!run&&show)
{
menu.style.visibility='hidden';
menup.style.visibility='hidden';
show=0;
}
}
</script>
<div style="overflow: hidden; left=404px; top:30px; height:200px; visibility:show;
width:97px; z-index:1; position:absolute; visibility:hidden; border-left: 0px; border-right: 0px;
border-top: 0px solid; border-bottom: 1px solid #FF0000; " id=menup>
<div bgcolor="#FFFFFF" id=menu align=center style="position: absolute; width: 97px; height:
200px; z-index: 1; left: 0px; top: 200px; overflow: hidden; visibility: hidden; background-image:
url('images/menu_bg.gif'); border: 1 solid #FF0000">
<table width=93 cellpadding="0" cellspacing="4" style="position: relative; top: 1">
<tr>
<td valign="middle" align="center" height="20" class=menuout
onmouseover=this.className='menuover'; onmouseout=this.className='menuout';
onclick="location='aboutus'">关 于 我 们</td>
</tr>
<tr>
<td valign="middle" align="center" height="20" class=menuout
onmouseover=this.className='menuover'; onmouseout=this.className='menuout';
onclick="location='joinus'">加 入 我 们</td>
</tr>
<tr>
<td valign="middle" align="center" height="20" class=menuout
onmouseover=this.className='menuover'; onmouseout=this.className='menuout';
onclick="location='market'">交 易 市 场</td>
</tr>
<tr>
<td valign="middle" align="center" height="20" class=menuout
onmouseover=this.className='menuover'; onmouseout=this.className='menuout';
onclick="location='super'">网 页 超 市</td>
</tr>
<tr>
<td valign="middle" align="center" height="20" class=menuout
onmouseover=this.className='menuover'; onmouseout=this.className='menuout';
onclick="location='domain'">域 名 注 册</td>
</tr>
<tr>
<td valign="middle" align="center" height="20" class=menuout
onmouseover=this.className='menuover'; onmouseout=this.className='menuout';
onclick="location='host'">虚 拟 主 机</td>
</tr>
<tr>
<td valign="middle" align="center" height="20" class=menuout
onmouseover=this.className='menuover'; onmouseout=this.className='menuout';
onclick="location='service'">服 务 中 心</td>
</tr>
<tr>
<td valign="middle" align="center" height="20" class=menuout
onmouseover=this.className='menuover'; onmouseout=this.className='menuout';
onclick="location='cooperator'">合 作 伙 伴</td>
</tr>
</table>
</div>
</div>
<a onclick="menuShow();" style="position: absolute; width: 97px; height: 200px; z-index: 1; left:
410px; top: 230px;cursor:hand; " alt=Menu>123</a>
</body>
</html>
24点（多个结果）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>24</title>
<style>
INPUT,TEXTAREA{border: 1 solid #0099CC;}
</style>
</head>
<body link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">
<script>
/*-------------------------------------
原理阐述：
四个数字，判断怎样得到 24 可能而且没有重复的组合方式如下：
可能的组合方式
a+b+c+d
a+(b+c)+d
(a+b)+c+d
a+b+(c+d)
a+(b+c+d)
(a+b+c)+d
(a+b)+(c+d)
(a+(b+c))+d
((a+b)+c)+d
a+(b+(c+d))
a+((b+c)+d)
依据这个规律，我们可以得出…… 下面这段代码~~ 哈哈……
---------------------------------------*/
var num = null;
var sign = new Array("+","-","*","/");
function returnSZ()
{
var allstr = "";
for(s1=0; s1<4; s1++)
{
for(s2=0; s2<4; s2++)
{
for(s3=0; s3<4; s3++)
{
for(n1=0; n1<4; n1++)
{
for(n2=0; n2<4; n2++)
{
if(n2==n1)
continue;
for(n3=0; n3<4; n3++)
{
if(n3==n1||n3==n2)
continue;
for(n4=0; n4<4; n4++)
{
if(n4==n1||n4==n2||n4==n3)
continue;
var str = "";
/*--------------------- 可能的组合方式
a+b+c+d
a+(b+c)+d
(a+b)+c+d
a+b+(c+d)
a+(b+c+d)
(a+b+c)+d
(a+b)+(c+d)
(a+(b+c))+d
((a+b)+c)+d
a+(b+(c+d))
a+((b+c)+d)
----------------------*/
str = num+ sign +num+ sign +num+ sign +num;
if(judgeNum(str))
{
allstr +=(str)+"\n";
}
str = num+ sign +"("+num+ sign +num+")"+ sign +num;
if(judgeNum(str))
{
allstr +=(str)+"\n";
}
str = "("+num+ sign +num+")"+ sign +num+ sign +num;
if(judgeNum(str))
{
allstr +=(str)+"\n";
}
str = num+ sign +num+ sign +"("+num+ sign +num+")";
if(judgeNum(str))
{
allstr +=(str)+"\n";
}
str = num+ sign +"("+num+ sign +num+ sign +num+")";
if(judgeNum(str))
{
allstr +=(str)+"\n";
}
str = "("+num+ sign +num+ sign +num+")"+ sign +num;
if(judgeNum(str))
{
allstr +=(str)+"\n";
}
str = "("+num+ sign +num+")"+ sign +"("+num+ sign +num+")";
if(judgeNum(str))
{
allstr +=(str)+"\n";
}
str = "("+num+ sign +"("+num+ sign +num+"))"+ sign +num;
if(judgeNum(str))
{
allstr +=(str)+"\n";
}
str = "(("+num+ sign +num+")"+ sign +num+")"+ sign +num;
if(judgeNum(str))
{
allstr +=(str)+"\n";
}
str = num+ sign +"("+num+ sign +"("+num+ sign +num+"))";
if(judgeNum(str))
{
allstr +=(str)+"\n";
}
str = num+ sign +"(("+num+ sign +num+")"+ sign +num+")";
if(judgeNum(str))
{
allstr +=(str)+"\n";
}
}
}
}
}
}
}
}
if(allstr!="")
result.value = allstr;
else
result.value=("这个好像不行吧~~~~");
}
function judgeNum(theline)
{
if(eval(theline)==24)
return true;
else
return false;
}
function RunSZ()
{
var ArrayBox = document.getElementsByName("box");
num = null;
num = new Array();
for(i=0;i<4;i++)
{
var str = ArrayBox.value;
if(str=="")
{
alert("第"+(i+1)+"个数字没有填");
ArrayBox.focus();
return;
}
else
{
if(!str.match(/\D/g))
num = ArrayBox.value;
else
{
alert("第"+(i+1)+"个数字有不为数字的字符");
ArrayBox.focus();
return;
}
}
}
returnSZ();
}
</script>
<div align="center">
<table border="0" width="324" style="font-family: 宋体; font-size: 9pt; border: 1 solid #0099CC" height="200" cellspacing="0" cellpadding="0">
<tr>
<td width="308" height="28" align="center" bgcolor="#0099CC" style="color: #FFFFFF" colspan="2">
<p align="left">|| 24 点 游戏</td>
</tr>
<center>
<tr>
<td width="82" height="40" align="center" bgcolor="#0099CC" style="color: #FFFFFF; border-top: 1 solid #DDFFEF">第一个数字</td>
<td width="226" height="40" align="center" bgcolor="#DDFFEF"><input type="text" name="box" size="20" ></td>
</tr>
<tr>
<td width="82" height="40" align="center" bgcolor="#0099CC" style="color: #FFFFFF">第一个数字</td>
<td width="226" height="40" align="center" bgcolor="#DDFFEF"><input type="text" name="box" size="20"></td>
</tr>
<tr>
<td width="82" height="40" align="center" bgcolor="#0099CC" style="color: #FFFFFF">第三个数字</td>
<td width="226" height="40" align="center" bgcolor="#DDFFEF"><input type="text" name="box" size="20"></td>
</tr>
<tr>
<td width="82" height="40" align="center" bgcolor="#0099CC" style="color: #FFFFFF; border-bottom: 1 solid #DDFFEF">第四个数字</td>
<td width="226" height="40" align="center" bgcolor="#DDFFEF"><input type="text" name="box" size="20"></td>
</tr>
<tr>
<td width="82" height="68" align="center" bgcolor="#0099CC" style="color: #FFFFFF"><a href="javascript:;" onclick=RunSZ()>计算结果</a></td>
<td width="226" height="68" align="center" bgcolor="#0099CC"><br>
<textarea id="result" rows="4" cols="29"></textarea><br>
<br>
</td>
</tr>
</table>
</center>
</div>
</body>
</html>
24点（单个结果）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>24</title>
<style>
INPUT{border: 1 solid #0099CC;}
</style>
</head>
<body link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">
<script>
/*-------------------------------------
原理阐述：
四个数字，判断怎样得到 24 可能而且没有重复的组合方式如下：
可能的组合方式
a+b+c+d
a+(b+c)+d
(a+b)+c+d
a+b+(c+d)
a+(b+c+d)
(a+b+c)+d
(a+b)+(c+d)
(a+(b+c))+d
((a+b)+c)+d
a+(b+(c+d))
a+((b+c)+d)
依据这个规律，我们可以得出…… 下面这段代码~~ 哈哈……
---------------------------------------*/
var num = null;
var sign = new Array("+","-","*","/");
function returnSZ()
{
var allstr = "";
for(s1=0; s1<4; s1++)
{
for(s2=0; s2<4; s2++)
{
for(s3=0; s3<4; s3++)
{
for(n1=0; n1<4; n1++)
{
for(n2=0; n2<4; n2++)
{
if(n2==n1)
continue;
for(n3=0; n3<4; n3++)
{
if(n3==n1||n3==n2)
continue;
for(n4=0; n4<4; n4++)
{
if(n4==n1||n4==n2||n4==n3)
continue;
var str = "";
/*--------------------- 可能的组合方式
a+b+c+d
a+(b+c)+d
(a+b)+c+d
a+b+(c+d)
a+(b+c+d)
(a+b+c)+d
(a+b)+(c+d)
(a+(b+c))+d
((a+b)+c)+d
a+(b+(c+d))
a+((b+c)+d)
----------------------*/
str = num+ sign +num+ sign +num+ sign +num;
if(judgeNum(str))
{
result.value=(str);
return;
}
str = num+ sign +"("+num+ sign +num+")"+ sign +num;
if(judgeNum(str))
{
result.value=(str);
return;
}
str = "("+num+ sign +num+")"+ sign +num+ sign +num;
if(judgeNum(str))
{
result.value=(str);
return;
}
str = num+ sign +num+ sign +"("+num+ sign +num+")";
if(judgeNum(str))
{
result.value=(str);
return;
}
str = num+ sign +"("+num+ sign +num+ sign +num+")";
if(judgeNum(str))
{
result.value=(str);
return;
}
str = "("+num+ sign +num+ sign +num+")"+ sign +num;
if(judgeNum(str))
{
result.value=(str);
return;
}
str = "("+num+ sign +num+")"+ sign +"("+num+ sign +num+")";
if(judgeNum(str))
{
result.value=(str);
return;
}
str = "("+num+ sign +"("+num+ sign +num+"))"+ sign +num;
if(judgeNum(str))
{
result.value=(str);
return;
}
str = "(("+num+ sign +num+")"+ sign +num+")"+ sign +num;
if(judgeNum(str))
{
result.value=(str);
return;
}
str = num+ sign +"("+num+ sign +"("+num+ sign +num+"))";
if(judgeNum(str))
{
result.value=(str);
return;
}
str = num+ sign +"(("+num+ sign +num+")"+ sign +num+")";
if(judgeNum(str))
{
result.value=(str);
return;
}
}
}
}
}
}
}
}
result.value=("这个好像不行吧~~~~");
}
function judgeNum(theline)
{
if(eval(theline)==24)
return true;
else
return false;
}
function RunSZ()
{
var ArrayBox = document.getElementsByName("box");
num = null;
num = new Array();
for(i=0;i<4;i++)
{
var str = ArrayBox.value;
if(str=="")
{
alert("第"+(i+1)+"个数字没有填");
ArrayBox.focus();
return;
}
else
{
if(!str.match(/\D/g))
num = ArrayBox.value;
else
{
alert("第"+(i+1)+"个数字有不为数字的字符");
ArrayBox.focus();
return;
}
}
}
returnSZ();
}
</script>
<div align="center">
<table border="0" width="324" style="font-family: 宋体; font-size: 9pt; border: 1 solid #0099CC" height="200" cellspacing="0" cellpadding="0">
<tr>
<td width="308" height="28" align="center" bgcolor="#0099CC" style="color: #FFFFFF" colspan="2">
<p align="left">|| 24 点 游戏</td>
</tr>
<center>
<tr>
<td width="82" height="40" align="center" bgcolor="#0099CC" style="color: #FFFFFF; border-top: 1 solid #DDFFEF">第一个数字</td>
<td width="226" height="40" align="center" bgcolor="#DDFFEF"><input type="text" name="box" size="20" ></td>
</tr>
<tr>
<td width="82" height="40" align="center" bgcolor="#0099CC" style="color: #FFFFFF">第一个数字</td>
<td width="226" height="40" align="center" bgcolor="#DDFFEF"><input type="text" name="box" size="20"></td>
</tr>
<tr>
<td width="82" height="40" align="center" bgcolor="#0099CC" style="color: #FFFFFF">第三个数字</td>
<td width="226" height="40" align="center" bgcolor="#DDFFEF"><input type="text" name="box" size="20"></td>
</tr>
<tr>
<td width="82" height="40" align="center" bgcolor="#0099CC" style="color: #FFFFFF; border-bottom: 1 solid #DDFFEF">第四个数字</td>
<td width="226" height="40" align="center" bgcolor="#DDFFEF"><input type="text" name="box" size="20"></td>
</tr>
<tr>
<td width="82" height="68" align="center" bgcolor="#0099CC" style="color: #FFFFFF"><a href="javascript:;" onclick=RunSZ()>计算结果</a></td>
<td width="226" height="68" align="center" bgcolor="#0099CC"><br>
<input type="text" id="result" value="">
</td>
</tr>
</table>
</center>
</div>
</body>
</html>
包含另外一个页面
<object height=400 width=600 type="text/x-scriptlet" data="http://www.dulishi.net/dulishi2001/main/default.asp">
弹出式帮助
<!--
/************************************************************************************
*** ***
*** 作者：wingfancy ***
*** 邮箱：wingfancy@webtsp.net ***
*** 网址：http://www.5meng.com ☆{吾梦→网络编程技术站}☆ ***
*** OICQ：54810177 （欢迎共同探讨网络编程技术） ***
*** ***
*** 代码说明：弹出式帮助。 ***
*** ***
*************************************************************************************/
-->
<OBJECT
id=pophelp
type="application/x-oleobject"
classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"
>
<PARAM name="Command" value="HH Version">
</OBJECT>
<script language=javascript>
popstyle= "Verdana,10,,";//弹出式帮助字体设定
function showPophelp(helpstr,w,h,Foreground,Background){
if (body.style.cursor=='help')
pophelp.TextPopup(helpstr,popstyle,w,h,Foreground,Background);
}
document.onclick=resetCursor
function resetCursor(){
if (!(event.srcElement.innerText=="?"))
body.style.cursor='default';
}
</script>
<body id=body style="cursor:default;">
<span onclick="javascript:body.style.cursor='help';" style="cursor:help;"><big><b>?</b></big></span>（说明：先点击前面"？"符号，当鼠标样式变为"求助"时，点击下面文字。）<br>
<br>
<span onclick="showPophelp('这是弹出式帮助',20,20,0,255)">弹出式帮助</span><br><br>
<span onclick="showPophelp('我是wingfancy，欢迎大家一起讨论网络编程技术。',20,120,0,0)">wingfancy</span><br><br>
<span onclick="showPophelp('wingfancy@webtsp.net',20,20,0,0)">电子信箱</span><br><br>
<span onclick="showPophelp('http://www.5meng.com',20,20,0,0)">网址</span><br><br>
</body>
XP 风格的右键菜单
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>mouse-menu</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<META content="MSHTML 5.00.2614.3500" name=GENERATOR>
<META content=FrontPage.Editor.Document name=ProgId>
<STYLE>.menutable {
BACKGROUND-COLOR: #ffffff; BORDER-BOTTOM: #307ce8 1px solid; BORDER-LEFT: #307ce8 5px solid; BORDER-RIGHT: #307ce8 1px solid; BORDER-TOP: #94bcf3 1px solid; FONT-SIZE: 12px; POSITION: absolute; Z-INDEX: 100
}
.menutrin {
BACKGROUND-COLOR: #1a71e6; COLOR: #ffffff; CURSOR: hand
}
.menutrout {
COLOR: #000000; CURSOR: hand
}
.menutd0 {
HEIGHT: 25px; TEXT-ALIGN: center; WIDTH: 28px; 改变这个修改菜单高度--->:
}
.menutd1 {
FONT-FAMILY: Webdings; TEXT-ALIGN: right; WIDTH: 46px
}
.linktd1 {
WIDTH: 46px
}
.menutd2 {
WIDTH: 4px
}
.menuhr {
BORDER-BOTTOM: #307ce8 1px inset; BORDER-LEFT: #307ce8 1px inset; BORDER-RIGHT: #307ce8 1px inset; BORDER-TOP: #307ce8 1px inset
}
</STYLE>
<BGSOUND id=theBS loop=0 src=""></HEAD>
<BODY bgColor=#eaf5fd style="FONT-SIZE: 10pt">
<SCRIPT><!----
/*-----------------------------------------------------------
鼠标右键菜单 1.0 Designed By Stroll e-mail: csy-163@163.com
--------------------------------------------------------------*/
//--------------- 有关数据 -----------------//
var IconList = new Array(); // icon图片 集合， 下标从 1 开始
IconList = new Image();
IconList.src = "icon/edit.gif";
IconList = new Image();
IconList.src = "icon/sub.gif";
IconList = new Image();
IconList.src = "icon/com.gif";
IconList = new Image();
IconList.src = "icon/hel.gif";
//---------------- 检测变量 菜单的显示隐藏就靠它了！！！ ------------------//
var JustMenuID = "";
var SubMenuList = new Array();
var NowSubMenu = "";
var mouseCanSound = true; //--------------------------- 声音开关 ------ 声音开关 ------------------//
var menuSpeed = 50; //---------- 菜单显示速度 ------------//
var alphaStep = 30; //---------- Alpaha 变化 度 -----------//
//------------- 构建 主菜单 对象 -------------//
function MouseMenu(objName)
{
this.id = "Menu_"+objName;
this.obj = objName;
this.length = 0;
this.addMenu = addMenu;
this.addLink = addLink;
this.addHR = addHR;
JustMenuID = this.id;
document.body.insertAdjacentHTML('beforeEnd','<table id="'+this.id+'" border="0" cellspacing="0" cellpadding="0" style="top: 0; left: 0; visibility: hidden; filter:Alpha(Opacity=0);" class="menutable" onmousedown=event.cancelBubble=true; onmouseup=event.cancelBubble=true></table>');
}
//----------- 构建 子菜单 对象 -------------//
function SubMenu(objName,objID)
{
this.obj = objName;
this.id = objID;
this.addMenu = addMenu;
this.addLink = addLink;
this.addHR = addHR;
this.length = 0;
}
//-------------- 生成 菜单 makeMenu 方法 -----------//
function makeMenu(subID,oldID,word,icon,url,target,thetitle)
{
var thelink = '';
if(icon&&icon!="")
{
icon = '<img border="0" src="'+IconList.src+'">';
}
else
{
icon = '';
}
if(!thetitle||thetitle=="")
{
thetitle = '';
}
if(url&&url!="")
{
thelink += '<a href="'+url+'" ';
if(target&&target!="")
{
thelink += ' ';
thelink += 'target="'+target+'" '
}
thelink += '></a>';
}
var Oobj = document.getElementById(oldID);
/*--------------------------------------------- 菜单html样式
<tr class="menutrout" id="trMenu_one_0" title="I am title">
<td class="menutd0"><img src="icon/sub.gif" border="0" width="16" height="16"></td>
<td><a href="javascript:alert('I am menu');" target="_self"></a><nobr>菜单一</nobr></td>
<td class="menutd1">4</td>
<td class="menutd2"> </td>
</tr>
--------------------------------------------------*/
Oobj.insertRow();
with(Oobj.rows(Oobj.rows.length-1))
{
id = "tr"+subID;
className = "menutrout";
title = thetitle;
}
eventObj = "tr"+subID;
eval(eventObj+'.attachEvent("onmouseover",MtrOver('+eventObj+'))');
eval(eventObj+'.attachEvent("onclick",MtrClick('+eventObj+'))');
var trObj = eval(eventObj);
for(i=0;i<4;i++)
{
trObj.insertCell();
}
with(Oobj.rows(Oobj.rows.length-1))
{
cells(0).className = "menutd0";
cells(0).innerHTML = icon;
cells(1).innerHTML = thelink+'<nobr class=indentWord>'+word+'</nobr>';
cells(1).calssName = "indentWord"
cells(2).className = "menutd1";
cells(2).innerHTML = "4";
cells(3).className = "menutd2";
cells(3).innerText = " ";
}
document.body.insertAdjacentHTML('beforeEnd','<table id="'+subID+'" border="0" cellspacing="0" cellpadding="0" style="top: 0; left: 0; visibility: hidden; filter:Alpha(Opacity=0);" class="menutable" onmousedown=event.cancelBubble=true; onmouseup=event.cancelBubble=true></table>');
}
//---------------- 生成连接 makeLink 方法 ------------//
function makeLink(subID,oldID,word,icon,url,target,thetitle)
{
var thelink = '';
if(icon&&icon!="")
{
icon = '<img border="0" src="'+IconList.src+'">';
}
else
{
icon = '';
}
if(!thetitle||thetitle=="")
{
thetitle = '';
}
if(url&&url!="")
{
thelink += '<a href="'+url+'" ';
if(target&&target!="")
{
thelink += ' ';
thelink += 'target="'+target+'" '
}
thelink += '></a>';
}
var Oobj = document.getElementById(oldID);
/*--------------------------------------------- 连接html样式
<tr class="menutrout" id="trMenu_one_0" title="I am title">
<td class="menutd0"><img src="icon/sub.gif" border="0" width="16" height="16"></td>
<td><a href="javascript:alert('I am link');" target="_self"></a><nobr>连接一</nobr></td>
<td class="linktd1"></td>
<td class="menutd2"> </td>
</tr>
--------------------------------------------------*/
Oobj.insertRow();
with(Oobj.rows(Oobj.rows.length-1))
{
id = "tr"+subID;
className = "menutrout";
title = thetitle;
}
eventObj = "tr"+subID;
eval(eventObj+'.attachEvent("onmouseover",LtrOver('+eventObj+'))');
eval(eventObj+'.attachEvent("onmouseout",LtrOut('+eventObj+'))');
eval(eventObj+'.attachEvent("onclick",MtrClick('+eventObj+'))');
var trObj = eval(eventObj);
for(i=0;i<4;i++)
{
trObj.insertCell();
}
with(Oobj.rows(Oobj.rows.length-1))
{
cells(0).className = "menutd0";
cells(0).innerHTML = icon;
cells(1).innerHTML = thelink+'<nobr class=indentWord>'+word+'</nobr>';
cells(2).className = "linktd1";
cells(2).innerText = " ";
cells(3).className = "menutd2";
cells(3).innerText = " ";
}
}
//-------------- 菜单对象 addMenu 方法 ------------//
function addMenu(word,icon,url,target,title)
{
var subID = this.id + "_" + this.length;
var subObj = this.obj+"["+this.length+"]";
var oldID = this.id;
eval(subObj+"= new SubMenu('"+subObj+"','"+subID+"')");
makeMenu(subID,oldID,word,icon,url,target,title);
this.length++;
}
//------------- 菜单对象 addLink 方法 -------------//
function addLink(word,icon,url,target,title)
{
var subID = this.id + "_" + this.length;
var oldID = this.id;
makeLink(subID,oldID,word,icon,url,target,title);
this.length++;
}
//------------ 菜单对象 addHR 方法 -----------------//
function addHR()
{
var oldID = this.id;
var Oobj = document.getElementById(oldID);
Oobj.insertRow();
/*------------------------------------------
<tr>
<td colspan="4">
<hr class="menuhr" size="1" width="95%">
</td>
</tr>
--------------------------------------------*/
Oobj.rows(Oobj.rows.length-1).insertCell();
with(Oobj.rows(Oobj.rows.length-1))
{
cells(0).colSpan= 4;
cells(0).insertAdjacentHTML('beforeEnd','<hr class="menuhr" size="1" width="95%">');
}
}
//--------- MtrOver(obj)-------------------//
function MtrOver(obj)
{
return sub_over;
function sub_over()
{
var sonid = obj.id.substring(2,obj.id.length);
var topobj = obj.parentElement.parentElement;
NowSubMenu = topobj.id;
if(obj.className=="menutrout")
{
mouseWave();
}
HideMenu(1);
SubMenuList = NowSubMenu;
ShowTheMenu(sonid,MPreturn(sonid))
SubMenuList = sonid;
if(topobj.oldTR)
{
eval(topobj.oldTR+'.className = "menutrout"');
}
obj.className = "menutrin";
topobj.oldTR = obj.id;
}
}
//--------- LtrOver(obj)-------------------//
function LtrOver(obj)
{
return sub_over;
function sub_over()
{
var topobj = obj.parentElement.parentElement;
NowSubMenu = topobj.id;
HideMenu(1);
SubMenuList = NowSubMenu;
if(topobj.oldTR)
{
eval(topobj.oldTR+'.className = "menutrout"');
}
obj.className = "menutrin";
topobj.oldTR = obj.id;
}
}
//--------- LtrOut(obj)-------------------//
function LtrOut(obj)
{
return sub_out;
function sub_out()
{
var topobj = obj.parentElement.parentElement;
obj.className = "menutrout";
topobj.oldTR = false;
}
}
//----------MtrClick(obj)-----------------//
function MtrClick(obj)
{
return sub_click;
function sub_click()
{
if(obj.cells(1).all.tags("A").length>0)
{
obj.cells(1).all.tags("A")(0).click();
}
}
}
//---------- returnIndex(str)--------------//
function returnIndex(str)
{
return (str.split("_").length-3)
}
//---------ShowTheMenu(obj,num)-----------------//
function ShowTheMenu(obj,num)
{
var topobj = eval(obj.substring(0,obj.length-2));
var trobj = eval("tr"+obj);
var obj = eval(obj);
if(num==0)
{
with(obj.style)
{
pixelLeft = topobj.style.pixelLeft +topobj.offsetWidth;
pixelTop = topobj.style.pixelTop + trobj.offsetTop;
}
}
if(num==1)
{
with(obj.style)
{
pixelLeft = topobj.style.pixelLeft + topobj.offsetWidth;
pixelTop = topobj.style.pixelTop + trobj.offsetTop + trobj.offsetHeight - obj.offsetHeight;
}
}
if(num==2)
{
with(obj.style)
{
pixelLeft = topobj.style.pixelLeft - obj.offsetWidth;
pixelTop = topobj.style.pixelTop + trobj.offsetTop;
}
}
if(num==3)
{
with(obj.style)
{
pixelLeft = topobj.style.pixelLeft - obj.offsetWidth;
pixelTop = topobj.style.pixelTop + trobj.offsetTop + trobj.offsetHeight - obj.offsetHeight;
}
}
obj.style.visibility = "visible";
if(obj.alphaing)
{
clearInterval(obj.alphaing);
}
obj.alphaing = setInterval("menu_alpha_up("+obj.id+","+alphaStep+")",menuSpeed);
}
//----------HideMenu(num)-------------------//
/*----------------------
var SubMenuList = new Array();
var NowSubMenu = "";
---------------------*/
function HideMenu(num)
{
var thenowMenu = "";
var obj = null;
if(num==1)
{
thenowMenu = NowSubMenu
}
for(i=SubMenuList.length-1;i>=0;i--)
{
if(SubMenuList&&SubMenuList!=thenowMenu)
{
obj = eval(SubMenuList);
if(obj.alphaing)
{
clearInterval(obj.alphaing);
}
obj.alphaing = setInterval("menu_alpha_down("+obj.id+","+alphaStep+")",menuSpeed);
obj.style.visibility = "hidden";
eval("tr"+SubMenuList).className = "menutrout";
SubMenuList = null;
}
else
{
if(SubMenuList==thenowMenu)
{
return;
}
}
}
NowSubMenu = "";
}
//-----------MainMenuPosition return()------------//
function MMPreturn()
{
var obj = eval(JustMenuID);
var x = event.clientX;
var y = event.clientY;
var judgerX = x + obj.offsetWidth;
var judgerY = y + obj.offsetHeight;
var px = 0;
var py = 0;
if(judgerX>document.body.clientWidth)
{
px = 2;
}
if(judgerY>document.body.clientHeight)
{
py = 1;
}
return (px+py);
}
//-----------MenuPosition return(obj)--------------//
function MPreturn(obj)
{
var topobj = eval(obj.substring(0,obj.length-2));
var trobj = eval("tr"+obj);
var x = topobj.style.pixelLeft + topobj.offsetWidth;
var y = topobj.style.pixelTop + trobj.offsetTop;
obj = eval(obj);
var judgerY = obj.offsetHeight + y;
var judgerX = obj.offsetWidth + x;
var py = 0;
var px = 0;
if(judgerY>=document.body.clientHeight)
{
py = 1;
}
if(judgerX>= document.body.clientWidth)
{
px = 2;
}
return (px+py);
}
//-----------mouseWave()-------------//
function mouseWave()
{
if(mouseCanSound)
{
theBS.src= "sound/sound.wav";
}
}
//----------- menu_alpha_down -------//
function menu_alpha_down(obj,num)
{
var obj = eval(obj);
if(obj.filters.Alpha.Opacity > 0 )
{
obj.filters.Alpha.Opacity += -num;
}
else
{
clearInterval(obj.alphaing);
obj.filters.Alpha.Opacity = 0;
obj.alphaing = false;
obj.style.visibility = "hidden";
}
}
//------------ menu_alpha_up --------//
function menu_alpha_up(obj,num)
{
var obj = eval(obj);
if(obj.filters.Alpha.Opacity<100)
obj.filters.Alpha.Opacity += num;
else
{
clearInterval(obj.alphaing);
obj.filters.Alpha.Opacity = 100;
obj.alphaing = false;
}
}
//----------- IE ContextMenu -----------------//
function document.oncontextmenu()
{
return false;
}
//----------- IE Mouseup ----------------//
function document.onmouseup()
{
if(event.button==2)
{
HideMenu(0);
var obj = eval(JustMenuID)
obj.style.visibility = "hidden";
if(obj.alphaing)
{
clearInterval(obj.alphaing);
}
obj.filters.Alpha.Opacity = 0;
var judger = MMPreturn()
if(judger==0)
{
with(obj.style)
{
pixelLeft = event.clientX + document.body.scrollLeft;
pixelTop = event.clientY + document.body.scrollTop;
}
}
if(judger==1)
{
with(obj.style)
{
pixelLeft = event.clientX + document.body.scrollLeft;
pixelTop = event.clientY - obj.offsetHeight + document.body.scrollTop;
}
}
if(judger==2)
{
with(obj.style)
{
pixelLeft = event.clientX - obj.offsetWidth + document.body.scrollLeft;
pixelTop = event.clientY + document.body.scrollTop;
}
}
if(judger==3)
{
with(obj.style)
{
pixelLeft = event.clientX - obj.offsetWidth + document.body.scrollLeft;
pixelTop = event.clientY - obj.offsetHeight + document.body.scrollTop;
}
}
mouseWave();
obj.style.visibility = "visible";
obj.alphaing = setInterval("menu_alpha_up("+obj.id+","+alphaStep+")",menuSpeed);
}
}
//---------- IE MouseDown --------------//
function document.onmousedown()
{
if(event.button==1)
{
HideMenu();
var obj = eval(JustMenuID)
if(obj.alphaing)
{
clearInterval(obj.alphaing);
}
obj.alphaing = setInterval("menu_alpha_down("+obj.id+","+alphaStep+")",menuSpeed);
}
}
//----->
</SCRIPT>
<SCRIPT>
var one = new MouseMenu("one");
one.addMenu("菜单一",1,"javascript:alert('I am menu');","_self","I am title");
one.addLink("连接一",2,"javascript:alert('I am link')")
one.addHR()
one.addLink("连接二","","javascript:alert('I am link')")
one.addMenu("菜单三");
one.length-1].addLink("连接一",1,"javascript:;")
one.addLink("连接三","","javascript:alert('I am link')")
one.addLink("连接四","","javascript:alert('I am link')")
one.addLink("连接二","","javascript:alert('I am link')")
one.addMenu("菜单二",3);
one.addLink("连接一","","javascript:alert('I am link')")
one.addHR();
one.addLink("连接三，多长都可以",4,"javascript:alert('I am link')")
</SCRIPT>
<P><FONT color=#1a71e6>有声音的哦…… 可以关闭！设置 mouseCanSound = false;
就可以了</FONT></P></BODY></HTML>
XP 风格的右键菜单 - 使用说明
在使用前，先建立菜单对象
var obj = new MouseMenu("obj");
注意，obj 要和 MouseMenu("obj") 的obj 相同
如建立了 obj 那么 obj 将会有以下方法，开始 obj.length = 0
方法：
1. addMenu(express[,icon][,url][,target][,title]);
功能： 插入一个菜单，并且 返回一个功能和上面说 提起的 obj 一样的菜单对象
obj 然后 obj.length 将会 +1
说明：
express 必须，字符串，显示在插入的菜单上的文本
icon 可选，整数(>0)，如果后面有选项，你不需要ICON的话，填写 ""
url 可选，字符串，路径
target 可选，字符串 就是 target
title 可选，字符串 就是 title
2. addLink(express,[,icon][,url][,target][,title])
功能： 插入一个连接 然后 obj.length 将会 +1
说明
express 必须，字符串，显示在插入的菜单上的文本
icon 可选，整数(>0)，如果后面有选项，你不需要ICON的话，填写 ""
url 必须，字符串，路径
target 可选，字符串 就是 target
title 可选，字符串 就是 title
3. addHR()
功能： 插入分割线
说明：
他不属于 link 和 menu 对象 所以使用时，obj.length 不变
比如：
var MM = new MouseMenu("MM")
MM.addLink("连接","","http://hello.com")
MM.addHR()
MM.addMenu("菜单")
//下面 是 MM 而不是 MM 因为 MM.addHR() MM.length 不会增加
MM.addLink("连接","","http://hello.com")
好了，说了这么多，应该会用了吧？
突然有人问：“在哪插入连接……”
…… 嗯~ 这个 ^_^! 看上面吧~~~~
附加：在代码中的其他的数据
//--------------- 有关数据 -----------------//
var IconList = new Array(); // icon图片 集合， 下标从 1 开始
IconList = new Image();
IconList.src = "icon/sub.gif";
//--------------------------- 声音开关 ------ 声音开关 ------------------//
var mouseCanSound = true;
var menuSpeed = 50; //---------- 菜单显示速度 ------------//
var alphaStep = 30; //---------- Alpaha 变化 度 -----------//
---------------------------------
浏览器全屏切换
<SCRIPT language=Javascript1.2 type=text/javascript><!--
function addbookmark(){
alert("IE only")}
var mode=0
var old=new Array();
function fullme(e){
if(mode==0){
if(typeof document.all!='undefined'){
if(top.document.body.offsetWidth==screen.availWidth){
alert("信息提示：你的浏览器已被锁定视窗最大化，无法启用全屏模式！");
e.returnValue=false;
return false;
}
top.moveBy(e.clientX-e.screenX,e.clientY-e.screenY);
top.resizeBy(screen.availWidth-top.document.body.offsetWidth,
screen.availHeight-top.document.body.offsetHeight);
}else{
window.top.moveTo(0,0);
window.top.resizeTo(screen.availWidth,screen.availHeight);
old=window.toolbar.visible;
old=window.statusbar.visible;
old=window.menubar.visible;
window.toolbar.visible=false;
window.statusbar.visible=false;
window.menubar.visible=false;
}
mode=1;
}else{
if(typeof document.all!='undefined'){
top.moveTo(0,0);
top.resizeTo(screen.availWidth,screen.availHeight);
}else{
window.toolbar.visible=old;
window.statusbar.visible=old;
window.menubar.visible=old;
}
mode=0;
}
return true;
}
--></SCRIPT>
<body scroll=no onload=fullme(event)>
<A onclick=fullme(event)>全屏切换(点击)</A>
读取CPU
<script>
Set theShell = WScript.CreateObject("WScript.Shell")
WScript.Echo TheShell.RegRead("HKLM\Hardware\Description\System\CentralProcessor\0\Identifier")
</script>
[ 本贴由 卫星星 于 2003-3-15 21:12 最后编辑 ] 控件实现的个性浏览器窗口
<OBJECT ID='x2ClientCtrl1' WIDTH=0 HEIGHT=0 CLASSID='CLSID:2787712C-2CE4-4C02-9F09-C89F29E7C5CB' CODEBASE='http://www.x2web.com/component/x2client.cab#VERSION=1,5,1,30'>
<PARAM NAME='BROWSERNAME' VALUE='X2web1'>
<PARAM NAME='FILENAME' VALUE='http://www.xagxdc.com/bbs/MicroWeb/MicroWeb.xdf'>
<PARAM NAME='STARTURL' VALUE='http://202.194.73.1/homepage/homepage/newnet'>
<PARAM NAME='AUTOSTART' VALUE=1>
</OBJECT>
从外部读入内容
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0032)http://www.ie-zone.com/index.php -->
<HTML><!-- #BeginTemplate "/Templates/JsExample.dwt" --><HEAD>
<!-- #BeginEditable "doctitle" -->
<TITLE>从外部读入内容</TITLE>
<!-- #EndEditable -->
<META http-equiv=Content-Type content="text/html; charset=gb2312"><LINK href="fav.ico" rel="shortcut icon">
<STYLE type=text/css>BODY {
MARGIN: 25px 25px 25px
}
#all TD {
FONT-SIZE: 12px; LINE-HEIGHT: 15px; FONT-FAMILY: "Verdana", "Arial","新宋体", "宋体"
}
INPUT {
FONT-SIZE: 12px; LINE-HEIGHT: 15px; FONT-FAMILY: "Verdana", "Arial","新宋体", "宋体"
}
SELECT {
FONT-SIZE: 12px; LINE-HEIGHT: 15px; FONT-FAMILY: "Verdana", "Arial","新宋体", "宋体"
}
P {
FONT-SIZE: 12px; LINE-HEIGHT: 15px; FONT-FAMILY: "Verdana", "Arial","新宋体", "宋体"
}
TEXTAREA {
FONT-SIZE: 12px; LINE-HEIGHT: 15px; FONT-FAMILY: "Verdana", "Arial","新宋体", "宋体"
}
#all A:active {
COLOR: #7d070c
}
#all A:visited {
COLOR: #7d070c
}
#all A:hover {
COLOR: #336699
}
#all A:link {
COLOR: #7d070c
}
</STYLE>
<SCRIPT language=JavaScript>
<!--
function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args+".location='"+args+"'");
}
function JM_cc(ob){
ob.select();js=ob.createTextRange();js.execCommand("Copy");
}
//-->
</SCRIPT>
<META content="MSHTML 5.50.4134.600" name=GENERATOR></HEAD>
<BODY id=all text=#000000 bgColor=#336699>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TR bgColor=#ffffff>
<TD><IMG src="../images/sq_1.gif" width=11 height="14"></TD>
<TD width="100%"></TD>
<TD><IMG src="../images/sq_2.gif" width=11 height="14"></TD>
</TR>
</TABLE>
<!-- #BeginEditable "Example%20and%20Sources" -->
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TR bgColor=#ffffff>
<TD><IMG src="../images/space.gif" width=11 height="1"></TD>
<TD width="100%">
<table width="100%" border="0" cellpadding="8">
<tr>
<td align="center"><!-- #BeginLibraryItem "/Library/js_title.lbi" --><script language="JavaScript">
document.write("<font color=#7d070c style=\"font-size: 14px\">"+document.title+"</font>");
</script><!-- #EndLibraryItem --></td>
</tr>
<tr>
<td bgcolor="#f7f7f7">
<!-->
<IE:Download ID="marqueedata" STYLE="behavior:url(#default#download)" />
<marquee id="externalmarquee" direction=up scrollAmount=4 style="width:200px;height:150px;border:1px solid black;padding:3px" onMouseover="this.scrollAmount=2" onMouseout="this.scrollAmount=4" src="update.htm">
</marquee>
<script language="JavaScript1.2">
/*
External Data Source Marquee Script (Updated 99/11/02)-
?Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of Use, visit dynamicdrive.com
*/
function downloaddata(){
marqueedata.startDownload(externalmarquee.src,displaydata)
}
function displaydata(data){
externalmarquee.innerHTML=data
}
if (document.all)
window.onload=downloaddata
</script>
<!-->
提示:你将看到一个滚动的字幕，但特别的是滚动中的内容是读取外部文件<a href="update.htm">update.htm</a>中的内容的.</td>
</tr>
<tr>
<td>1.将下面的代码复制到<body>内
<input type="button" name="Button" value="复制到我的剪贴板" onClick=JM_cc(js_1)>
<br>
<textarea name="js_1" wrap="VIRTUAL" cols="80" rows="10">
<!-->
<IE:Download ID="marqueedata" STYLE="behavior:url(#default#download)" />
<marquee id="externalmarquee" direction=up scrollAmount=4 style="width:200px;height:150px;border:1px solid black;padding:3px" onMouseover="this.scrollAmount=2" onMouseout="this.scrollAmount=4" src="update.htm">
</marquee>
<script language="JavaScript1.2">
/*
External Data Source Marquee Script (Updated 99/11/02)-
?Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of Use, visit dynamicdrive.com
*/
function downloaddata(){
marqueedata.startDownload(externalmarquee.src,displaydata)
}
function displaydata(data){
externalmarquee.innerHTML=data
}
if (document.all)
window.onload=downloaddata
</script>
<!--></textarea>
<br>
<br>
2.请按Script内的指示按你的需要修改，我已把重点部分翻译了。还有不明白的地方请到论坛发表。<font color="#990000">src="update.htm"</font>
修改路径 </td>
</tr>
</table>
</TD>
<TD><IMG src="../images/space.gif" width=11 height="1"></TD>
</TR>
</TABLE>
<!-- #EndEditable -->
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TR bgColor=#ffffff>
<TD><IMG src="../images/sq_3.gif" width=11 height="14"></TD>
<TD width="100%"></TD>
<TD><IMG src="../images/sq_4.gif" width=11 height="14"></TD>
</TR>
</TABLE></BODY><!-- #EndTemplate --></HTML>
不错的下拉菜单
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<style>
BODY {font-size:9pt;color:white;background-color:yellow}
TABLE{font-size:9pt;color:snow;background-color:darkblue;BORDER-COLLAPSE: collapse;text-align:center}
DIV{font-size:9pt;color:springgreen;background-color:green}
TD{cursor:hand}
FONT {font-size:9pt;color:lime;cursor:hand}
.over {color:gold;background-color:slateblue}
.out{ color:snow;background-color:darkblue}
</style>
<script>
function popmenu(obj1)
{
obj1.className="over";
menu1.style.backgroundColor="slateblue";
menu1.style.borderTopColor="slateblue";
menu1.style.top=obj1.offsetTop+obj1.offsetHeight;
menu2.style.top=obj1.offsetTop+obj1.offsetHeight+10;
menu1.style.left=obj1.offsetLeft+obj1.offsetWidth/2-40;
menu2.style.left=obj1.offsetLeft+obj1.offsetWidth/2-30;
menu1.style.display="";
menu2.style.display="";
}
function menuout(obj1) {
obj1.className="out";
menu1.style.backgroundColor="darkblue";
menu1.style.borderTopColor="darkblue";
}
function menuclear()
{ if (event.toElement.tagName!="FONT")
{
menu1.style.display='none';
menu2.style.display='none';
}
}
function hide()
{menu1.style.display='none';menu2.style.display='none';}
</script>
<title></title>
</head>
<body topmargin="0" leftmargin="0" onresize="location.reload()">
<script>
for(x=0;x<=document.body.offsetWidth;x+=10){
document.write("<div style='position:absolute;left:"+x+";top:0;height:100%;width:1;font-size:1pt;background-color:gray;border:0;z-index:-2'></div>")
}
for(x=0;x<=document.body.offsetHeight;x+=10) {
document.write("<div style='position:absolute;left:0;top:"+x+";height:1;width:100%;font-size:1pt;background-color:gray;border:0;z-index:-2'></div>")
}
</script>
<div id=menu1 onmouseout="menuclear()" style="position:absolute;text-align:center;color:snow;background-color:slateblue;top:100;left:100;height:200;width:80;display:none;border-style:solid;border-width:1;border-color:cyan;border-top-color:slateblue;z-index:1">
<br>
<script>
for(x=0;x<11;x++){document.write("<font onmouseover=this.style.color='red' onmouseout=this.style.color='lime'>子菜单一</font><br>");}
</script>
</div>
<div id=menu2 style="position:absolute;Filter:Alpha(opacity=40);background-color:black;height:200;width:80;z-index:-1;display:none"></div>
<table border="1" cellspacing="1" width="100%" bordercolor="#00FFFF" style="position: absolute; top: 0" >
<tr>
<td width="16%" onmouseover="popmenu(this)" onmouseout="menuout(this)" onclick="menu1.style.display='none';menu2.style.display='none'" >主页</td>
<td width="16%" onmouseover="popmenu(this)" onmouseout="menuout(this)" onclick="menu1.style.display='none';menu2.style.display='none'">菜单一</td>
<td width="17%" onmouseover="popmenu(this)" onmouseout="menuout(this)" onclick="menu1.style.display='none';menu2.style.display='none'">菜单二</td>
<td width="17%" onmouseover="popmenu(this)" onmouseout="menuout(this)" onclick="menu1.style.display='none';menu2.style.display='none'">菜单三</td>
<td width="17%" onmouseover="popmenu(this)" onmouseout="menuout(this)" onclick="menu1.style.display='none';menu2.style.display='none'">菜单四</td>
<td width="17%" onmouseover="popmenu(this)" onmouseout="menuout(this)" onclick="menu1.style.display='none';menu2.style.display='none'">菜单五</td>
</tr>
</table>
</body>
</html>
我现在想提出一个txt的文件，来控制页面中的一张图。比如当txt中的某一语句=1，那么相对的网页中的这张图显示，如果=0则隐藏，而且服务器不支持asp，cgi，最好用js来控制？
解答：
con.txt:
flags=1
your.htm:
<script language=Javascript src=con.txt></script>
if (flags==1)document.write("<img src=??.gif>")
只能输入汉字
<input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))">
只能输入全角
<input onkeyup="value=value.replace(/[^\uFF00-\uFFFF]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\uFF00-\uFFFF]/g,''))">
只能输入数字
<input onkeyup="value=value.replace(/[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
只能输入英文和数字
<input onkeyup="value=value.replace(/[\W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">