LoadingPage/loadingpage.html at master · gcddblue/LoadingPage · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">
    <meta http-equiv = "X-UA-Compatible" content = "IE = edge">
    <meta name = "viewport" content = "width = device-width,initial-scale = 1">
    <title>登录页面添加修改</title>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <link rel = "stylesheet" type = "text/css" href = "css/loading.css">
    <script src="js/jquery-2.0.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>

<body id = "Logg">
<div style = ""id = "Log">
    <img class = "log"id = "Log1"src = "imge/ruiwen.png">
</div>
<!--登录模块设计-->
<div style = "width:250px;height:100px; position:fixed;top:2%;left:60px;opacity:0;"id = "logo">
    <div style = "float:left;">
        <img id = "logo11"style = "width:50px; height:50px;margin-top:3px;margin-left:0px;" src = "imge/CY.png">
    </div>
    <div style = "float:left;padding-top:9px;margin-left:6px;">
        <span style= "color:white;font-size:27px;">北京新网数码2018</span>
    </div>
</div>
<div class = "login0" id = "Login">
    <div class = "col-xs-12 login_t">登&nbsp;录</div>
    <form action = "" class = "login" method = "post">
        <div class = "nav ll">
            <div class = "nav login_nav">
                <div class = "col-xs-12 login_1">用户名:</div>
                <div class = "col-xs-10" style = "position:relative;">
                    <span class = "glyphicon glyphicon-user"style = "position:absolute;top:11px;left:116px;font-size:21px;color:gray;"></span>
                    <input style = "margin-left:93px; padding-left:32px;padding-top:3px; font-size:16px;"type = "text" name = "" id = "name"
                           value = "" placeholder = "用户名"onfocus = "this.placeholder = ''"onblur = "this.placeholder = '用户名'"/>
                </div>
                <div class = "col-xs-2"style = "position:relative">
                    <span id = "ok1" class = "glyphicon glyphicon-ok-circle ok" style = "position:absolute;font-size:25px;left:0px;top:8px;color:green;"></span>
                    <span id = "err1" class = "glyphicon glyphicon-remove-circle err"style ="font-size:25px;margin-left:-15px;margin-top:7px;color:red;"></span>
                </div>
            </div>
            <div class = "nav login_psd">
                <div class = "col-xs-12 login3">
                    密&nbsp;&nbsp;码:
                </div>
                <div class = "col-xs-10" style = "position:relative;">
                    <span class = "glyphicon glyphicon-lock"style = "position:absolute;top:11px;left:116px;font-size:21px;color:gray;"></span>
                    <input style = "margin-left:93px; padding-left:32px;padding-top:3px;font-size:16px;" type = "password" name = "" id = "psd"
                           placeholder = "密码" onfocus = "this.placeholder = ''" onblur = "this.placeholder = '密码'"/>
                </div>
                <div class = "col-xs-2"style ="position:relative">
                    <span id = "ok2" class = "glyphicon glyphicon-ok-circle ok"style = "position:absolute;font-size:25px;left:0px;top:8px;color:green;"></span>
                    <span id = "err2" class = "glyphicon glyphicon-remove-circle err"style ="font-size:25px;margin-left:-15px;margin-top:7px;color:red;"></span></div>
            </div>
        </div>
        <div class = "butt">
            <button type = "submit" class = "btn btn-warning butt1" id = "load"><span>登录</span></button>
        </div>
    </form>
</div>
</div>
<script>
    $(function(){
//focus 焦点函数
        $(function(){
            $("input").focus(function(){
                $(this).css({"background-color":"#F2F2F2"});
            }).blur(function(){
                $(this).css({"background-color":"white"});
                var content = $(this).val();
                if(content!="")
                {
                    $(this).parent().next().children().css("display", "none");
                }
            });
        });


        setTimeout(function(){
            $("#Log").css({"background":"url(imge/ruiwen.png) no-repeat","background-size":"cover", "opacity":"0.7","transition":"1s"});
            $("#Log").fadeIn(2000);
        }, 4000);
        setTimeout(function(){
            $("#Login").css({"opacity":"1", "transition":"1.5s"});
            $("#logo").css({"opacity":"1", "transition":"1.5s"});
        },5000);
    });

    $(function(){
        $("#load").click(function(){
            var uname = $("#name");
            var upsd = $("#psd");
            if(uname.val()=="")
            {
                $("#err1").css("display","block");
                return false;
            }
            else if(upsd.val()=="")
            {
                $("#err1").css("display", "none");
                $("#err2").css("display", "block");
                return false;
            }

            else{
                $("#err1").css("display", "none");
                $("#err2").css("display", "none");
                $(".login").submit();
            }
        });
    });


    function ok_err(){

    }
</script>


</body>
</html>