用户登录模拟效果（原生js实现）-原创手记-慕课网

需求：

当用户名和密码获得焦点时，文本框背景颜色变黄，失去焦点时背景颜色恢复，
然后判断是否为空，如果为空，则给出提示，同时文本框继续获得焦点。如图所示。
单击登录按钮后，判断用户名（admin）和密码(123)是否正确。
若错误，则提示用户名或密码错误，
若正确，网页跳转到网页www.baidu.com.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script language="javascript" type="text/javascript">
            function p1(){
                document.getElementById("q1").innerHTML="";
                document.getElementById("q2").innerHTML="";
                var name = document.getElementById("name").value;
                var pw = document.getElementById("pw").value;
                if(name==""){
                    document.getElementById("q1").innerHTML="用户名不能为空！";
                    onover();
                    return;
                }
                if(name=="admin"){
                    if(pw=="123"){
                        window.location.href ='http://www.baidu.com';
                    }else{
                        document.getElementById("q2").innerHTML="密码错误！"; 
                    }
                }else{
                    document.getElementById("q1").innerHTML="用户名错误！";
                }
            }
            function onover(){
                document.all.name.style.background="#EEEE00 ";
            }
            function onout(){
                document.all.name.style.background="#fff";
            }
            function onover1(){
                document.all.name.style.background="#fff";
                document.all.pw.style.background="#EEEE00 ";
            }
            function onout1(){
                document.all.pw.style.background="#fff";
            }
        </script>
        <style>
            .jdt{ width:400px; height:300px; border:1px #000 solid;}
            #q1,#q2{color:red;}
        </style> 
    </head>
    <body>
        <div  class="jdt">
            <h2  style="text-align:center;">用户登录</h2>
            用户名：<input type=" text" name="name" value="" id="name" onfocus="onover();"  onblur="onout();"/>
            <span id ="q1"></span><br><br>
            密 码 ：<input type="text" name="password" value="" id="pw" onfocus="onover1();"  onblur="onout1();"/>
            <span id ="q2"></span><br>
            <input type="button" name="an" value="登录" onclick="p1();">
        </div>
    </body>
</html>

用户登录模拟效果（原生js实现）原创