Home > Developer > JavaScript
Copy codeThe Code is as follows:
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN"
Http://www.w3.org/TR/html4/loose.dtd>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Title> 20060427 simulate 163 </title>
<Script language = "JavaScript" type = "text/JavaScript">
<! --
Function MM_reloadPage (init) {// reloads the window if Nav4 resized
If (init = true) with (navigator) {if (appName = "Netscape") & (parseInt (appVersion) = 4 )){
Document. MM_pgW = innerWidth; document. MM_pgH = innerHeight; onresize = MM_reloadPage ;}}
Else if (innerWidth! = Document. MM_pgW | innerHeight! = Document. MM_pgH) location. reload ();
}
MM_reloadPage (true );
// -->
</Script>
<Style type = "text/css">
<! --
Body {
Margin-left: 0px;
Margin-top: 0px;
Margin-right: 0px;
Margin-bottom: 0px;
}
Body {
Font-family: Arial, Helvetica, sans-serif;
Font-size: 12px;
Line-height: 150%;
Color: #003399;
Text-decoration: none;
}
A: link {
Font-family: Arial, Helvetica, sans-serif;
Font-size: 12px;
Line-height: 150%;
Font-weight: normal;
Color: #003399;
Text-decoration: none;
}
A: visited {
Font-family: Arial, Helvetica, sans-serif;
Font-size: 12px;
Line-height: 150%;
Font-weight: normal;
Color: #003399;
Text-decoration: none;
}
A: hover {
Font-family: Arial, Helvetica, sans-serif;
Font-size: 12px;
Line-height: 150%;
Color: # 0099FF;
Text-decoration: underline;
}
A: active {
Font-family: Arial, Helvetica, sans-serif;
Font-size: 12px;
Line-height: 150%;
Color: # 0099FF;
Text-decoration: underline;
}
-->
</Style>
</Head>
<Script language = "javascript">
/*
Author: moonboy
In this example, the onKeyUp event can be used to retrieve the input data. When onKeyDown and onKeyPress events are used, the first data (I don't konw why) can be obtained only when the second data is input ).
*/
// Var ns = String. fromCharCode (event. keyCode );
Function droplist (){
Var np = event. keyCode;
If (np = 38 | np = 40 ){
}
Var textv = document. getElementById ("drop"). value; // obtain the value in the text box.
Textv = textv. toLowerCase (); // convert all to lowercase
Var user = new Array (); // initialization Array used to store the set of page list values
Var sortUser = new Array (); // sorted Array
Var resultuser = new Array (); // Array output to the foreground
Var vv = document. getElementsByName ("hv"); // page Value
Var vvl = vv. length; // The array length of the page Value
// Add the collection obtained from the page to the user array.
For (var I = 0; I <vvl; I ++ ){
User [I] = vv [I]. value;
}
SortUser = user. sort (); // sorts the Array
Var rs = new Array (); // Initialize an Array that meets the query Conditions
Var temp;
Var c = 0; // array count that meets the criteria
For (var j = 0; j <vvl; j ++ ){
Temp = queryWord (textv, sortUser [j]); // call the queryWord function to calculate the value that meets the condition.
If (temp = ""){
Continue;
} Else {
// Temp = getSelect (textv, temp );
Rs [c] = "<tr id = 'TV' name = 'TV' bgcolor = '# eeeeee'> <td id = 'al" + c + "'onclick =' onV ("+ c + ") 'style = 'cursor: pointer 'onmouseover = 'alterbg ("+ c +", 0) 'onmouseout = 'alterbg ("+ c +", 1) '> "+ getSelect (textv, temp) +" </td> </tr> ";
C ++;
}
}
Resultuser = rs. join (""); // set the grouping Data Separator to a line break
If (textv. length = 0 ){
Resultuser = "";
}
Document. getElementById ("p "). innerHTML = "<table width = '150px 'cellpadding = '0' bgcolor =' # FFFFFF 'cellspacing = '0'>" + resultuser + "</table> "; // print data to the specified region
}
Function getSelect (obj, objtext ){
Var ol = obj. length;
Var res;
Obj = objtext. substring (0, ol );
Res = "<B>" + obj + "</B>" + objtext. substring (ol, objtext. length );
Return res;
}
Function alterBg (j, I) {// change the mouse event color in the drop-down list
Var o = document. getElementById ('al' + j );
If (I = 0)
O. style. backgroundColor = "# FFFFEE ";
Else if (I = 1)
O. style. backgroundColor = "# eeeeee ";
}
Function onV (j) {// get the drop-down list click Value
Var o = document. getElementById ('al' + j). innerHTML;
O = o. replace ("<B> ","");
O = o. replace ("</B> ","");
Document. getElementById ('drop'). value = o;
}
Function queryWord (para, str) {// This function is the result of a conditional query.
Var r;
R = str. search (para );
If (r = 0 ){
Return str;
} Else {
Return "";
}
}
Function Search (textv, str) {// function used for testing is not used in this example.
// Var textv = document. getElementById ("drop"). value;
Var r, result; // declare the variable.
R = str. search (textv); // search for strings.
Str = str. slice (r,-1 );
Document. getElementById ("p"). innerHTML = str. substring (0, str. indexOf (""));
Result = str. substring (0, str. indexOf (""));
Return result;
// Return the Boolean result.
}
Var I = 0;
Var k;
Function changeTable (){
Var selectLength;
SelectLength = document. getElementsByName ("TV"). length;
Document. getElementById ("opp"). innerHTML = selectLength;
Var keyvalue = event. keyCode;
If (selectLength> 0 ){
If (keyvalue = 40 ){
K = I;
I ++;
}
Else if (keyvalue = 38 ){
K = I;
I --
};
If (I <0 ){
I = selectLength-1;
} Else if (I> selectLength-1 ){
I = 0;
}
Var m = "al" + I;
Var n = "al" + k;
If (selectLength = 1 ){
Var p = document. getElementById (m );
P. style. backgroundColor = "# ffffee ";
} Else {
If (I> = 0 & I <selectLength ){
Var p = document. getElementById (m );
P. style. backgroundColor = "# ffffee ";
}
If (k> = 0 & k <selectLength ){
Var h = document. getElementById (n );
H. style. backgroundColor = "# eeeeee ";
}
If (keyvalue = 13 ){
OnV (I );
}
}
}
}
Function loadDiv (){
Div1.style. visibility = "show ";
Div2.style. visibility = "show ";
}
Function showBody (){
Var div1 = document. getElementById ('layer1 ');
Var div2 = document. getElementById ('layer2 ');
Div1.style. visibility = "hidden ";
Div2.style. visibility = "hidden ";
}
</Script>
<Body>
<Div id = "opp"> </div>
<Div id = "Layer1" style = "position: absolute; background-color: #000000; left: 0px; top: 0px; width: 100%; height: pixel PX; filter: alpha (opacity = 20); z-index: 1; visibility: hidden; "> </div>
<Div id = "Layer2" style = "position: absolute; left: 0px; top: 150px; width: 100%; height: 200px; z-index: 2; visibility: hidden; ">
<Table align = "center" width = "50%" height = "70" cellpadding = "0" bgcolor = "# FFFFFF" cellspacing = "0">
<Tr>
<Td align = "center"> <a href = "javascript: void (0)" onclick = "showBody () "> click here for my dear Gee_gee </a> (Moontoucher's UI manager) </td>
</Tr>
</Table> </div> <br>
<Br>
<Br>
<Br>
<Br>
<Input name = "drop" type = "text" id = "drop" onKeyup = "droplist (); changeTable ()">
The drop-down list is automatically displayed after entering the email address in imitation 163 (to the dearest gee_gee)
<Div id = "p" style = "height: 100px; width: 170px; overflow: auto; border-width: 1px; border-color: #000000"> </div>
<Input type = "hidden" id = "hv" name = "hv" value = "123">
<Input type = "hidden" id = "hv" name = "hv" value = "uio">
<Input type = "hidden" id = "hv" name = "hv" value = "lkjl">
<Input type = "hidden" id = "hv" name = "hv" value = "9876">
<Input type = "hidden" id = "hv" name = "hv" value = "123467">
<Input type = "hidden" id = "hv" name = "hv" value = "fghj">
<Input type = "hidden" id = "hv" name = "hv" value = "yutf78">
<Input type = "hidden" id = "hv" name = "hv" value = "Wang">
<Input type = "hidden" id = "hv" name = "hv" value = "cuiliyi">
<Input type = "hidden" id = "hv" name = "hv" value = "Haha">
<Input type = "hidden" id = "hv" name = "hv" value = "Prince Avengers">
<Input type = "hidden" id = "hv" name = "hv" value = "certerly">
<Input type = "hidden" id = "hv" name = "hv" value = "123">
<Input type = "hidden" id = "hv" name = "hv" value = "uio">
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
