干货，分享！html05_酷炫登录页面模板分享

今天分享一套压箱底的精品拿出来分享，值得大伙收藏。

html05_酷炫登录页面模板分享

本资源整理自互联网，仅供学习交流使用，请勿商用，坚持每日分享一套Java学习资源干货，一起提高，一起进步！！！

 资源截图：

 部分源码：

 1  <script>
 2          //window.setTimeout(showfh,3000); 
 3          var timer;
 4        function showfh(){
 5            fhi = 1;
 6            //关闭提示晃动屏幕，注释掉这句话即可
 7            timer = setInterval(xzfh2, 10); 
 8        };
 9        var current = 0;
10        function xzfh(){
11            current = (current)%360;
12            document.body.style.transform = 'rotate('+current+'deg)';
13            current ++;
14            if(current>360){current = 0;}
15        };
16        var fhi = 1;
17        var current2 = 1;
18        function xzfh2(){
19            if(fhi>50){
20                document.body.style.transform = 'rotate(0deg)';
21                clearInterval(timer);
22                return;
23            }
24            current = (current2)%360;
25            document.body.style.transform = 'rotate('+current+'deg)';
26            current ++;
27            if(current2 == 1){current2 = -1;}else{current2 = 1;}
28            fhi++;
29        };
30    </script>

 1     <!-- 注册 -->
 2        <div id="windows2" style="display: none;">
 3        <div id="loginbox">
 4            <form action="" method="post" name="loginForm" id="loginForm">
 5                <div class="control-group normal_text">
 6                    <h3>
 7                        <img src="static/login/logo.png" alt="Logo" />
 8                    </h3>
 9                </div>
10                <div class="control-group">
11                    <div class="controls">
12                        <div class="main_input_box">
13                            <span class="add-on bg_lg">
14                            <i>用户</i>
15                            </span><input type="text" name="USERNAME" id="USERNAME" value="" placeholder="请输入用户名" />
16                        </div>
17                    </div>
18                </div>
19                <div class="control-group">
20                    <div class="controls">
21                        <div class="main_input_box">
22                            <span class="add-on bg_ly">
23                            <i>密码</i>
24                            </span><input type="password" name="PASSWORD" id="PASSWORD" placeholder="请输入密码" class="keypad" keypadMode="full" allowKeyboard="true" value=""/>
25                        </div>
26                    </div>
27                </div>
28                <div class="control-group">
29                    <div class="controls">
30                        <div class="main_input_box">
31                            <span class="add-on bg_ly">
32                            <i>重输</i>
33                            </span><input type="password" name="chkpwd" id="chkpwd" placeholder="请重新输入密码" class="keypad" keypadMode="full" allowKeyboard="true" value=""/>
34                        </div>
35                    </div>
36                </div>
37                <div class="control-group">
38                    <div class="controls">
39                        <div class="main_input_box">
40                            <span class="add-on bg_lg">
41                            <i>姓名</i>
42                            </span><input type="text" name="NAME" id="name" value="" placeholder="请输入姓名" />
43                        </div>
44                    </div>
45                </div>
46                <div class="control-group">
47                    <div class="controls">
48                        <div class="main_input_box">
49                            <span class="add-on bg_lg">
50                            <i>邮箱</i>
51                            </span><input type="text" name="EMAIL" id="EMAIL" value="" placeholder="请输入邮箱" />
52                        </div>
53                    </div>
54                </div>
55                <div class="form-actions">
56                    <div style="width:86%;padding-left:8%;">
57
58                        <div style="float: left;padding-top:2px;">
59                            <i><img src="static/login/yan.png" /></i>
60                        </div>
61                        <div style="float: left;" class="codediv">
62                            <input type="text" name="rcode" id="rcode" class="login_code"
63                                style="height:16px; padding-top:4px;" />
64                        </div>
65                        <div style="float: left;">
66                            <i><img style="height:22px;" id="zcodeImg" alt="点击更换" title="点击更换" src="" /></i>
67                        </div>
68                        <span class="pull-right" style="padding-right:3%;"><a href="javascript:changepage(2);" class="btn btn-success">取消</a></span>
69                        <span class="pull-right"><a onclick="register();" class="flip-link btn btn-info" id="to-recover">提交</a></span>
70                    </div>
71                </div>
72            </form>
73            <div class="controls">
74                <div class="main_input_box">
75                    <font color="white"><span id="nameerr">Copyright © XX科技 2100</span></font>
76                </div>
77            </div>
78        </div>
79        </div>
80
81    </div>
82    <div id="templatemo_banner_slide" class="container_wapper">
83        <div class="camera_wrap camera_emboss" id="camera_slide">
84            <!-- 背景图片 -->
85            <div data-src="static/login/images/banner_slide_01.jpg"></div>
86            <div data-src="static/login/images/banner_slide_02.jpg"></div>
87            <div data-src="static/login/images/banner_slide_03.jpg"></div>
88            <div data-src="static/login/images/banner_slide_04.jpg"></div>
89            <div data-src="static/login/images/banner_slide_05.jpg"></div>
90        </div>
91        <!-- #camera_wrap_3 -->
92    </div>

 1//提交注册
 2    function register(){
 3        if(rcheck()){
 4            var nowtime = date2str(new Date(),"yyyyMMdd");
 5            $.ajax({
 6                type: "POST",
 7                url: 'appSysUser/registerSysUser.do',
 8                data: {USERNAME:$("#USERNAME").val(),PASSWORD:$("#PASSWORD").val(),NAME:$("#name").val(),EMAIL:$("#EMAIL").val(),rcode:$("#rcode").val(),FKEY:$.md5('USERNAME'+nowtime+',fh,'),tm:new Date().getTime()},
 9                dataType:'json',
10                cache: false,
11                success: function(data){
12                    if("00" == data.result){
13                        $("#windows2").hide();
14                        $("#windows1").show();
15                        $("#loginbox").tips({
16                            side : 1,
17                            msg : '注册成功,请登录',
18                            bg : '#68B500',
19                            time : 3
20                        });
21                        changeCode1();
22                    }else if("04" == data.result){
23                        $("#USERNAME").tips({
24                            side : 1,
25                            msg : "用户名已存在",
26                            bg : '#FF5080',
27                            time : 15
28                        });
29                        showfh();
30                        $("#USERNAME").focus();
31                    }else if("06" == data.result){
32                        $("#rcode").tips({
33                            side : 1,
34                            msg : "验证码输入有误",
35                            bg : '#FF5080',
36                            time : 15
37                        });
38                        showfh();
39                        $("#rcode").focus();
40                    }
41                }
42            });
43        }
44    }
45
46    //邮箱格式校验
47    function ismail(mail){
48        return(new RegExp(/^(?:[a-zA-Z0-9]+[_-+.]?)*[a-zA-Z0-9]+@(?:([a-zA-Z0-9]+[_-]?)*[a-zA-Z0-9]+.)+([a-zA-Z]{2,})+$/).test(mail));
49    }
50    //js  日期格式
51    </script>
52
53    <script src="static/js/jquery-1.7.2.js"></script>
54    <script src="static/login/js/camera.min.js"></script>
55    <script src="static/login/js/templatemo_script.js"></script>
56    <script src="static/login/js/ban.js"></script>
57    <script type="text/javascript" src="static/js/jQuery.md5.js"></script>
58    <script type="text/javascript" src="static/js/jquery.tips.js"></script>
59    <script type="text/javascript" src="static/js/jquery.cookie.js"></script>
60
61    <!-- 软键盘控件start -->
62    <script type="text/javascript" src="static/login/keypad/js/form/keypad.js"></script>
63    <script type="text/javascript" src="static/login/keypad/js/framework.js"></script>
64    <!-- 软键盘控件end -->

因文章有限，完整代码关注微信公众号：Java猫小白  回复 html05  获取

                                                                   【Java猫小白】公众号

                                                                 （回复  html05  获取）

感谢老铁支持！！！

最后

以上就是虚拟奇迹为你收集整理的干货，分享！html05_酷炫登录页面模板分享的全部内容，希望文章能够帮你解决干货，分享！html05_酷炫登录页面模板分享所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。