小疑点，你懂的~多谢您啦-JavaSript-爱易网页

小疑点，你懂的~多谢您啦

日期：2014-05-16　浏览次数：20414 次

小问题，你懂的~~~谢谢您啦

JScript code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
    
    <title> New Document </title>
    
    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
        
    <style type="text/css">    
        input{
            font-size:12px;
            border:1px solid #000000;
            width:200px;
            padding:1px;
            margin:0px;
        }
        #popup{
            position:absolute;
            width:202px;
            color:#004a7e;
            font-size:12px;
            font-family:Arial,Helvetica,sans-serif;
            left:104px;
            top:28px;
        }
        #popup.show{
            border:1px solid #004a7e;
        }
        #popup.hide{
            border:none;
        }
        ul{
            list-style:none;
            margin:0px;
            padding:0px;
        }
        li.mouseover{
            background-color:#004a7e;
            color:#ffffff;
        }    
        li.mouseout{
            background-color:#ffffff;
            color:#004a7e;
        }
    </style>
    
    <script language="JavaScript" type="text/JavaScript">
        var oInputField;
        var oPopDiv;
        var oColorsUl;
        var aColors=["red","green","blue","darkgreen","darkblue"];
        aColors.sort();
        
        function initVars(){
            oInputField=document.forms["myForm1"].colors;
            oPopDiv=document.getElementById("popup");
            oColorsUl=document.getElementById("colors_ul");
        }
        
        function findColors(){
            initVars();
            if(oInputField.value.length > 0){
                var aResult=new Array();
                for (var i=0; i<aColors.length ;i++ )
                {
                    if(aColors[i].indexOf(oInputField.value)==0)
                        aResult.push(aColors[i]);
                }
                if(aResult.length>0)
                    setColors(aResult);
                else 
                    clearColors();
            }
            else
                clearColors();
        }

        function clearColors(){
            for(var i=oColorsUl.childNodes.length-1;i>=0;i--)
                oColorsUl.removeChild(oColorsUl.childNodes[i]);
            oPopDiv.className="hide";
        }

        function setColors(the_colors){
            clearColors();
            oPopDiv.className="show";
            var oLi;
            for (var i=0;i< the_colors.length;i++ )
            {
                oLi =document.creatElement("li");
                oColorsUl.appendChild(oLi);
                oLi.appendChild(document.createTextNode(the_colors[i]));
                oLi.onmouseover=function(){
                    this.className="mouseOver"
                }
                oLi.onmouseout=function(){
                    this.className="mouseOut"
                }
                oLi.onclick=function(){
                    oInputField.value=this.firstChild.nodeValue;
                    clearColors();
                }
            }    
        }

    </script>
    
    </head>

    <body>

    <form method="post" name="myForm1">
        请选择颜色：<input type="text" name="colors" id="colors" onkeyup="findColors()" / >
    </form>

    <div id="popup">

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

小疑点，你懂的~多谢您啦

相关资料更多>

推荐阅读更多>