今天做一个普通的网站,然后用户发过来的UI里面,有用户登录的功能。

另外用户登录的帐号密码框内,有NAME,PASSWORD的字样。

要做的就是:
当用户正在输入时,NAME和PASSWORD的提示消失。
当用户没有输入而离开时,NAME和PASSWORD重现。

(唉,需求分析不知道怎么写,上面算是描述吧)

===============================================开始咯

JS如下

<script type="text/javascript" language="javascript">
function cleantxt(val)
{
        if (val.value!="") return;
        else
        {                
                if(val.id=="txtName")
                {
                        val.style.cssText="";
                }
                if(val.id=="txtPass")
                {
                        val.style.cssText="";
                }
        }
        
}

function addValue(val)
{
        if (val.value!="")
        {
        return;
        }
        else
        {
                if(val.id=="txtName")
                {
                 val.style.cssText="background-p_w_picpath:url(p_w_picpaths/name.jpg);background-repeat:no-repeat;";
                 }
                if(val.id=="txtPass")
                {
                 val.style.cssText="background-p_w_picpath:url(p_w_picpaths/password.jpg);background-repeat:no-repeat;";
                 }
        }
}
</script>

HTML如下
<div class="top">
<div class="logo"><img src="p_w_picpaths/logo.png" /></div>
    <div class="sign">
        <ul>
            <li>
                <form action="" method="get">
                    <input type="text" id="txtName" class="signtext" onblur="addValue(this);" onfocus="cleantxt(this);" style="background-p_w_picpath:url(p_w_picpaths/name.jpg);background-repeat:no-repeat;" />
                    <input type="text" id="txtPass" class="signtext" onblur="addValue(this);" onfocus="cleantxt(this);" style="background-p_w_picpath:url(p_w_picpaths/password.jpg);background-repeat:no-repeat;"/>
                    <span class="png"> </span>
                </form>
            </li>
            <li style=" margin-top:5px;"><img src="p_w_picpaths/loginpng.png" width="128" height="15" /><img src="p_w_picpaths/loginpng02.png" width="91" height="15" /></li>
        </ul>
    </div>
</div>

====简单的分析做法===

其实并没有用框内文字来做到这个效果,重点就在CSS中的
background-p_w_picpath属性。
没错,把name,和password这些提示,切成一张图片,当作是text框的背景。
然后通过JS控制是否显示这个背景就行了……

当然其中还有一个小逻辑。
就是要判断用户是否有输入。

其实挺简单的,但是效果挺好的!

觉得Javascript很强大,好像很好玩的样子。当初本来想狠狠的学一趟JS,但是觉得很麻烦放弃了,现在搞起来,觉得还可以嘛……

于是,重燃了我学JS的决心!!!