Web前端-网站首页和注册界面的实现

最新推荐文章于 2024-04-23 18:23:10 发布

weixin_30551963

最新推荐文章于 2024-04-23 18:23:10 发布

阅读量1.3k

点赞数 1

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/nlw-blog/p/10724567.html

版权

首页用到的知识如下：

1.bootstrap框架

2.jQuerry实现页面定时弹出广告

注册界面用到的知识：

1.bootstrap框架

2.jQuerry实现省市联动操作

3.jQuerry实现表单的校验

首页代码

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>首页bootstrap实现</title>
  6     <link rel="stylesheet" href="bootstrap.css" />
  7     <script type="text/javascript" src="jquery-3.3.1.js"></script>
  8     <script type="text/javascript"  src="bootstrap.min.js" ></script>
  9     <meta name="viewport" content="width=device-width, initial-scale=1">
 10     <style>
 11         .adpart{
 12             position: fixed;
 13             right: 0;
 14             bottom: 0;
 15         }
 16     </style>
 17     <script>
 18         function showAd(){
 19             $("#ad").fadeIn(2000);
 20         }
 21         $(function () {
 22             $("#ad").hide();
 23             setTimeout("showAd()",2000);
 24             $("#shutad").click(function () {
 25                 $("#ad").fadeOut(1500)
 26             })
 27         })
 28     </script>
 29 </head>
 30 <body>
 31 <div class="container">
 32         <div class="row" style="background-color: transparent;">
 33             <div class="col-md-4 col-sm-6 col-xs-6" style="height: 50px;">
 34                 <img src="firstP_img/logo.jpg" width="80%" height="100%"/>
 35             </div>
 36             <div class="col-md-4 hidden-sm hidden-xs">
 37                 <img src="firstP_img/header.jpg" />
 38             </div>
 39             <div class="col-md-4 col-sm-6 col-xs-6 " style="line-height: 50px;height: 50px;position: absolute;right:0px">
 40                 <a href="#" class="btn">登录</a>
 41                 <a href="#" class="btn">注册</a>
 42                 <a href="#" class="btn">购物车</a>
 43             </div>
 44         </div>
 45 
 46         <div>
 47             <nav class="navbar navbar-inverse">
 48                 <div class="container-fluid">
 49                     <!-- Brand and toggle get grouped for better mobile display -->
 50                     <div class="navbar-header">
 51                         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
 52                             <span class="sr-only">Toggle navigation</span>
 53                             <span class="icon-bar"></span>
 54                             <span class="icon-bar"></span>
 55                             <span class="icon-bar"></span>
 56                         </button>
 57                         <a class="navbar-brand" href="#">首页</a>
 58                     </div>
 59 
 60                     <!-- Collect the nav links, forms, and other content for toggling -->
 61                     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 62                         <ul class="nav navbar-nav">
 63                             <li class="active"><a href="#">手机数码 <span class="sr-only">(current)</span></a></li>
 64                             <li><a href="#">电脑办公</a></li>
 65                             <li><a href="#">鞋靴箱包</a></li>
 66                             <li><a href="#">香烟酒水</a></li>
 67                             <li class="dropdown">
 68                                 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">全部分类<span class="caret"></span></a>
 69                                 <ul class="dropdown-menu">
 70                                     <li><a href="#">手机数码</a></li>
 71                                     <li><a href="#">电脑办公</a></li>
 72                                     <li><a href="#">香烟酒水</a></li>
 73                                 </ul>
 74                             </li>
 75                         </ul>
 76                         <form class="navbar-form navbar-right">
 77                             <div class="form-group">
 78                                 <input type="text" class="form-control" placeholder="搜索">
 79                             </div>
 80                             <button type="submit" class="btn btn-default">提交</button>
 81                         </form>
 82 
 83                     </div><!-- /.navbar-collapse -->
 84                 </div><!-- /.container-fluid -->
 85             </nav>
 86 
 87             <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">
 88                 <!-- Indicators -->
 89                 <ol class="carousel-indicators">
 90                     <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
 91                     <li data-target="#carousel-example-generic" data-slide-to="1"></li>
 92                     <li data-target="#carousel-example-generic" data-slide-to="2"></li>
 93                 </ol>
 94 
 95                 <!-- Wrapper for slides -->
 96                 <div class="carousel-inner" role="listbox">
 97                     <div class="item active">
 98                         <img src="firstP_img/0.jpg" alt="...">
 99                         <div class="carousel-caption">
100                             ...
101                         </div>
102                     </div>
103                     <div class="item">
104                         <img src="firstP_img/1.jpg" alt="...">
105                         <div class="carousel-caption">
106                             ...
107                         </div>
108                     </div>
109                     <div class="item">
110                         <img src="firstP_img/2.jpg" alt="...">
111                         <div class="carousel-caption">
112                             ...
113                         </div>
114                     </div>
115                     ...
116                 </div>
117 
118                 <!-- Controls -->
119                 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
120                     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
121                     <span class="sr-only">Previous</span>
122                 </a>
123                 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
124                     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
125                     <span class="sr-only">Next</span>
126                 </a>
127             </div>
128 
129             <div class="row">
130                 <div class="col-md-12">
131                     <h3>最新商品<img src="firstP_img/smtitle.jpg"></h3>
132                 </div>
133             </div>
134             <div class="row" style="background: transparent">
135                 <div class="col-md-2" style="height:480px;">
136                     <img src="firstP_img/left01.jpg" height="100%" width="100%">
137                 </div>
138                 <div class="col-md-10">
139                     <div class="col-md-6" style="height: 240px;">
140                         <img src="firstP_img/middle01.jpg" width="100%" height="80%">
141                     </div>
142                     <div class="col-md-2" style="height: 240px;">
143                         <img src="firstP_img/small01.jpg" width="100%" height="80%">
144                         <p style="text-align: center">微波炉</p>
145                         <em style="color: red">$999</em>
146                     </div>
147                     <div class="col-md-2" style="height: 240px;">
148                         <img src="firstP_img/small01.jpg" width="100%" height="80%">
149                         <p style="text-align: center">微波炉</p>
150                         <em style="color: red">$999</em>
151                     </div>
152                     <div class="col-md-2" style="height: 240px;">
153                         <img src="firstP_img/small01.jpg" width="100%" height="80%">
154                         <p style="text-align: center">微波炉</p>
155                         <em style="color: red">$999</em>
156                     </div>
157                     <div class="col-md-2" style="height: 240px;">
158                         <img src="firstP_img/small01.jpg" width="100%" height="80%">
159                         <p style="text-align: center">微波炉</p>
160                         <em style="color: red">$999</em>
161                     </div>
162                     <div class="col-md-2" style="height: 240px;">
163                         <img src="firstP_img/small01.jpg" width="100%" height="80%">
164                         <p style="text-align: center">微波炉</p>
165                         <em style="color: red">$999</em>
166                     </div>
167                     <div class="col-md-2" style="height: 240px;">
168                         <img src="firstP_img/small01.jpg" width="100%" height="80%">
169                         <p style="text-align: center">微波炉</p>
170                         <em style="color: red">$999</em>
171                     </div>
172                     <div class="col-md-2" style="height: 240px;">
173                         <img src="firstP_img/small01.jpg" width="100%" height="80%">
174                         <p style="text-align: center">微波炉</p>
175                         <em style="color: red">$999</em>
176                     </div>
177                     <div class="col-md-2" style="height: 240px;">
178                         <img src="firstP_img/small01.jpg" width="100%" height="80%">
179                         <p style="text-align: center">微波炉</p>
180                         <em style="color: red">$999</em>
181                     </div>
182                     <div class="col-md-2" style="height: 240px;">
183                         <img src="firstP_img/small01.jpg" width="100%" height="80%">
184                         <p style="text-align: center">微波炉</p>
185                         <em style="color: red">$999</em>
186                     </div>
187                 </div>
188             </div>
189             <div class="row">
190                 <div class="col-md-12">
191                     <img src="firstP_img/index.jpg" width="100%">
192                 </div>
193             </div>
194 
195             <div class="row">
196                 <div class="col-md-12">
197                     <img src="firstP_img/footer.jpg" width="100%">
198                 </div>
199             </div>
200 
201 
202             <div style="text-align: center">
203                 <a href="#" class="btn">关于我们</a>
204                 <a href="#" class="btn">联系我们</a>
205                 <a href="#" class="btn">招贤纳士</a>
206                 <a href="#" class="btn">法律声明</a>
207                 <a href="#" class="btn">友情链接</a>
208                 <a href="# class="btn">支付方式</a>
209                 <a href="#" class="btn">配送方式</a>
210                 <a href="#" class="btn">服务声明</a>
211                 <a href="#" class="btn">广告声明</a>
212             </div>
213 
214 <!--            广告部分-->
215             <div class="adpart">
216                 <div>
217                     <a id="shutad" style="position: absolute;right: 10px;color: red">关闭</a>
218                 </div>
219                 <div id="ad" style="height: 250px;width: 350px">
220                 <img src="firstP_img/ad1.jpg" width="100%" height="100%"></img>
221                 </div>
222             </div>
223         </div>
224 
225 </div>
226 </body>
227 </html>

View Code

注册界面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>注册界面</title>
    <link rel="stylesheet" href="bootstrap.css" />
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript"  src="bootstrap.min.js" ></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    .header{
    float:left;
    height:60px;
    width:33%;
    line-height:60px;
    }
    .menu{
    color:white;
    text-decoration:none;
    line-height:50px;
    }
    </style>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>

    <script>
        var allcities=[
        ["济南市","青岛市","滨州市"],
        ["贵林","六盘水","毕节"],
        ["石家庄","秦皇岛","保定"],
        ]

        $(function(){
            <!--1 绑定事件-->
            <!--2 获取选择的省份的值-->
            <!--3 遍历对应的城市然后添加至div中-->
            $("#provinces").change(function(){
                var cities=allcities[this.value];
                $("#cities").empty();
                $(cities).each(function(i,n){
                    $("#cities").append("<option>"+n+"</option>");
                })
            })

            $(".required").focus(function () {
                if($(this).is("#username")){
                    var span=$("#span_username");
                    if(this.value.length < 6 ){
                        $(span).html("<font   style='color: red;font-size: small; c'>用户名长度小于6</font>");
                        return false;
                    }
                    else{
                        $(span).html("<font class='right' style='color: grey;font-size: small'>用户名合适</font>");
                        return true;
                    }
                }
                else{
                    var span=$("#span_password");
                    if(this.value.length < 6 ){
                        $(span).html("<font style='color: red;font-size: small'>密码长度小于6</font>");
                    }
                    else{
                        $(span).html("<font class='right'  style='color: grey;font-size: small'>密码合适</font>");
                    }
                }
            }).blur(function () {
                $(this).triggerHandler("focus");

            }).keyup(function () {
                $(this).triggerHandler("focus");
            })

            $("#repassword").focus(function () {
                var span=$("#span_repassword");
                // if($(this).val() != $("#password").val() ){
                //     $(span).html("<font style='font-size:small;color: red;'>两次密码输入不一致</font>")
                // }
                if(this.value != $("#password").val() || $("#repassword").val().length == 0){
                    $(span).html("<font style='font-size:small;color: red;'>两次密码输入不一致</font>");
                    return false;
                }
                else{
                    $(span).html("<font  class='right' style='font-size:small;color: grey;'>两次密码输入一致</font>");
                    return true;
                }

            }).blur(function () {
                $(this).triggerHandler("focus");
            }).keyup(function () {
                $(this).triggerHandler("focus");
            })

            $("#email").focus(function () {
                var re=/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
                var value=this.value;
                var span=$("#span_email")
                if(re.test(value)){
                    $(span).html("<font class='right' style='font-size:small;color: grey;'>邮箱输入合法</font>");
                    return true;
                }
                else{
                    $(span).html("<font style='font-size:small;color: red;'>邮箱输入不合法</font>");
                    return  false;
                }
            }).blur(function () {
                $(this).triggerHandler("focus");
            }).keyup(function () {
                $(this).triggerHandler("focus");
            })

            $("#submit").click(function () {
                if($(".right").length == 3)
                    return true;
                return  false;
            })
            
        })
        // function showCities(){
        //     var value=document.getElementById("provinces").value;
        //     var cities=allcities[value];
        //     var select=document.getElementById("cities")
        //     select.options.length=0;
        //     for(var i=0;i < cities.length;i++){
        //         var city_ele=document.createElement("option");
        //         var city_text=document.createTextNode(cities[i]);
        //         city_ele.appendChild(city_text);
        //         select.appendChild(city_ele);
        //     }
        //
        // }
        //
        //
        // function showTips(id,tips){
        // var sp=document.getElementById(id);
        // tips="<font size='2' color='blue'>" + tips +"</font>";
        // sp.innerHTML=tips;
        // }
        //
        //
        // function checkUsername(){
        // var un=document.getElementById("username").value;
        // var span=document.getElementById("span_username");
        // if(un.length < 6){
        // span.innerHTML="<font size='2' color='red'>用户名长度不足六位</font>";
        // return false;
        // }
        // else{
        //     span.innerHTML="<font size='2' color='gray'>用户名可用</font>";
        //     return true;
        // }
        // }
        //
        //
        // function checkPassword(){
        // var pw=document.getElementById("password").value;
        // var span=document.getElementById("span_password");
        // if(pw.length < 6){
        // span.innerHTML="<font size='2' color='red'>密码长度不足六位</font>";
        // }
        //   else{
        //     span.innerHTML="<font size='2' color='gray'>密码可用</font>";
        //     return true;
        // }
        // }
        // function checkRepassword(){
        // var pw=document.getElementById("password").value;
        // var rp=document.getElementById("repassword").value;
        // var span=document.getElementById("span_repassword");
        // if(pw != rp){
        // span.innerHTML="<font size='2' color='red'>两次密码输入不一致</font>";
        // }
        //   else{
        //     span.innerHTML="<font size='2' color='gray'>两次输入密码一致</font>";
        //     return true;
        // }
        // }
        //
        // function checkEmail(){
        // var re=/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
        // var email=document.getElementById("email").value;
        // var span=document.getElementById("span_email");
        // if(!re.test(email)){
        //  span.innerHTML="<font size='2' color='red'>邮箱格式不正确</font>";
        //  return false;
        // }
        // else{
        // span.innerHTML="<font size='2' color='gray'>邮箱格式正确</font>";
        // return true;
        // }
        // }
        //
        // function checkAll(){
        // return checkUsername() && checkPassword && checkRepassword() && checkEmail();
        // }
    </script>
</head>
<body>
<!--第一部分-->
<div class="container">
    <div class="row" style="background-color: transparent;">
        <div class="col-md-4 col-sm-6 col-xs-6" style="height: 50px;">
            <img src="firstP_img/logo.jpg" width="80%" height="100%"/>
        </div>
        <div class="col-md-4 hidden-sm hidden-xs">
            <img src="firstP_img/header.jpg" />
        </div>
        <div class="col-md-4 col-sm-6 col-xs-6 " style="line-height: 50px;height: 50px;position: absolute;right:0px">
            <a href="#" class="btn">登录</a>
            <a href="#" class="btn">注册</a>
            <a href="#" class="btn">购物车</a>
        </div>
    </div>

    <div>
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">首页</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">手机数码 <span class="sr-only">(current)</span></a></li>
                        <li><a href="#">电脑办公</a></li>
                        <li><a href="#">鞋靴箱包</a></li>
                        <li><a href="#">香烟酒水</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">全部分类<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">手机数码</a></li>
                                <li><a href="#">电脑办公</a></li>
                                <li><a href="#">香烟酒水</a></li>
                            </ul>
                        </li>
                    </ul>
                    <form class="navbar-form navbar-right">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="搜索">
                        </div>
                        <button type="submit" class="btn btn-default">提交</button>
                    </form>

                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>

        <div  style="background:url(./registP_img/regist_bg.jpg);height:480px;width:100%">
            <div  style="position:absolute;top:25%;left:35%;width:40%;height:360px;" >
                <form class="form-horizontal" action="firstPage.html" οnsubmit="return checkAll()">
                    <div class="form-group">
                        <label class="col-md-2">姓名</label>
                        <input type="text" id="username" class="required col-md-6">
                        <span id="span_username" class="col-md-4"></span>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2">密码</label>
                        <input type="password" id="password" class="required col-md-6">
                        <span id="span_password" class="col-md-4"></span>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2">确认密码</label>
                        <input type="password" id="repassword" class="col-md-6">
                        <span id="span_repassword" class="col-md-4"></span>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2">性别</label>
                        <input type="radio" name="sex" >男
                        <input type="radio" name="sex">女
                    </div>
                    <div class="form-group">
                        <label class="col-md-2">省份</label>
                        <select  id="provinces" >
                        <option value="-1">--请选择</option>
                        <option value="0">山东省</option>
                        <option value="1">贵州省</option>
                        <option value="2">辽宁省</option>
                    </select>
                        <select id="cities">

                        </select>
                    </div>
                    <div class="form-group col-md-12" >
                        <input style="position: absolute;left:40%" type="submit" value="注册"  id="submit" >
                    </div>
                </form>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <img src="firstP_img/footer.jpg" width="100%">
            </div>
        </div>


        <div style="text-align: center">
            <a href="#" class="btn">关于我们</a>
            <a href="#" class="btn">联系我们</a>
            <a href="#" class="btn">招贤纳士</a>
            <a href="#" class="btn">法律声明</a>
            <a href="#" class="btn">友情链接</a>
            <a href="# class="btn">支付方式</a>
            <a href="#" class="btn">配送方式</a>
            <a href="#" class="btn">服务声明</a>
            <a href="#" class="btn">广告声明</a>
        </div>
</div>
</body>
</html>

View Code

转载于:https://www.cnblogs.com/nlw-blog/p/10724567.html

weixin_30551963

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Web前端-网站首页和注册界面的实现

首页用到的知识如下：1.bootstrap框架2.jQuerry实现页面定时弹出广告注册界面用到的知识：1.bootstrap框架2.jQuerry实现省市联动操作3.jQuerry实现表单的校验首页代码 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head>...
复制链接

扫一扫