为了账号安全,请及时绑定邮箱和手机立即绑定
手记 \ 用户登录模拟效果(原生js实现)

用户登录模拟效果(原生js实现) 原创

2016-12-30 10:46:07 662浏览 1评论
需求:

当用户名和密码获得焦点时,文本框背景颜色变黄,失去焦点时背景颜色恢复,
然后判断是否为空,如果为空,则给出提示,同时文本框继续获得焦点。如图所示。
单击登录按钮后,判断用户名(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>

本文原创发布于慕课网 ,转载请注明出处,谢谢合作!

相关标签: Html/CSS JavaScript
16 推荐

    菜鸟求虐

    JAVA开发工程师 这位童鞋很懒,什么也没有留下~~!

    作者的热门手记

    意见反馈 常见问题 APP下载
    官方微信