• 大学生期末大作业之购物网站

    作业 要求：

    建立一个购物网站

    1、至少8个网页（页面之间相互链接）

    2、要求有表格布局的页面

    3、要求有DIV+CSS的页面（左中右浮动布局、上中下布局）

    4、要求有图片轮播图效果（改变属性行为）和其它javascript行为

    5、要求有导航菜单的设置

    6、要求有图片热点的设置

    7、要求公告有文字滚动效果

    8、要求有用户注册界面，同时检查表单的有效性

    好了，话不多说，上效果图

     

     

     部分代码展示：

    首页代码index.html

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="utf-8">
    5. <title>服装购物网站</title>
    6. <link href="css/bootstrap.css" rel="stylesheet">
    7. <link href="css/bootstrap-responsive.css" rel="stylesheet">
    8. <link href="css/style.css" rel="stylesheet">
    9.     <link rel="stylesheet" href="css/swiper.min.css">
    10.     <style>
    11.  
    12.     .swiper-container {
    13.         width: 100%;position:relative;
    14.         height: 100%;
    15.     }
    16.     .swiper-slide {
    17.         text-align: center;
    18.         font-size: 18px;
    19.         background: #fff;
    20.  
    21.        
    22.     }
    23.     </style>
    24.  
    25.  
    26.     <script src="js/swiper.min.js"></script>
    27.  
    28. </head>
    29. <body>
    30. <header>
    31.   <div class="headerstrip">
    32.     <div class="container">
    33.       <div class="row">
    34.         <div class="span12">
    35.           <a href="index.html" class="logo pull-left"><img src="img/logo.png" alt="SimpleOne" title="SimpleOne"></a>
    36.           <div class="pull-left">
    37.             <div class="navbar" id="topnav">
    38.               <div class="navbar-inner">
    39.                 <ul class="nav" >
    40.                 
    41.                   <li><a class="myaccount" href="login.html">登录</a>
    42.                   </li>
    43.                   <li><a class="shoppingcart" href="shopping-cart.html">购物车</a>
    44.                   </li>
    45.                 </ul>
    46.               </div>
    47.             </div>
    48.           </div>
    49.          
    50.         </div>
    51.       </div>
    52.     </div>
    53.   </div>
    54.   <div class="container">
    55.    
    56.     <div id="categorymenu">
    57.       <nav class="subnav">
    58.         <ul class="nav-pills categorymenu">
    59.           <li><a class="active"  href="index.html">首页</a>
    60.            
    61.           </li>
    62.          
    63.           <li><a  href="category.html">女装</a>
    64.           </li>
    65.           
    66.           <li><a href="blog.html">关于</a>
    67.             
    68.           </li>
    69.           
    70.          
    71.           <li><a href="contact.html">联系</a>
    72.           </li>         
    73.         </ul>
    74.       </nav>
    75.     </div>
    76.   </div>
    77. </header>
    78. <!-- 头部结束 -->
    79.  
    80. <div id="maincontainer">
    81.   <!-- Slider Start-->
    82.   <section class="slider">
    83.     <div class="container">
    84.       
    85.       
    86.           <!-- Swiper -->
    87.     <div class="swiper-container">
    88.         <div class="swiper-wrapper">
    89.             <div class="swiper-slide"><img src="img/banner1.jpg" style="width:100%;"/></div>
    90.             <div class="swiper-slide"><img src="img/banner2.jpg" style="width:100%;"/></div>
    91.             <div class="swiper-slide"><img src="img/banner3.jpg" style="width:100%;"/></div>
    92.         
    93.         </div>
    94.         <!-- Add Pagination -->
    95.         <div class="swiper-pagination"></div>
    96.       
    97.     </div>
    98.   <script>
    99.     var swiper = new Swiper('.swiper-container', {
    100.         pagination: '.swiper-pagination',
    101.         nextButton: '.swiper-button-next',
    102.         prevButton: '.swiper-button-prev',
    103.         paginationClickable: true,
    104.         spaceBetween: 30,
    105.         centeredSlides: true,
    106.         autoplay: 2500,
    107.         autoplayDisableOnInteraction: false
    108.     });
    109.     </script>
    110.     
    111.     </div>
    112.   </section>
    113.   <!-- Slider End-->
    114.  <div class="gonggao"> <div class="container"><span style="float:left;color:red;line-height:45px;width:100px;display:inline-block;">网站公告：</span><marquee style="display:inline-block;width:500px;float:left;height:45px;line-height:45px;">1.精彩不断,折扣连连。2.精美商品不断上架,折扣活动天天上演。3.新货不断上架,商品天天降价。4.新货拿在手,折扣天天有。</marquee></div></div>
    115.   
    116.   <!-- Featured Product-->
    117.   <section id="featured" class="row mt40">
    118.     <div class="container">
    119.       <h1 class="heading1"><span class="maintext">推荐产品</span></h1>
    120.       <ul class="thumbnails">
    121.         <li class="span3">
    122.           <a class="prdocutname" href="product.html">绿色女装</a>
    123.           <div class="thumbnail">
    124.             <span class="sale tooltip-test">Sale</span>
    125.             <a href="product.html"><img alt="" src="img/product1.jpg"></a>
    126.            
    127.             <div class="pricetag">
    128.               <span class="spiral"></span><a href="product.html" class="productcart">购买</a>
    129.               <div class="price">
    130.                 <div class="pricenew">459.00元</div>
    131.                
    132.               </div>
    133.             </div>
    134.           </div>
    135.         </li>
    136.         <li class="span3">
    137.           <a class="prdocutname" href="product.html">绿色女装</a>
    138.           <div class="thumbnail">
    139.             <span class="sale tooltip-test">Sale</span>
    140.             <a href="product.html"><img alt="" src="img/product1.jpg"></a>
    141.            
    142.             <div class="pricetag">
    143.               <span class="spiral"></span><a href="product.html" class="productcart">购买</a>
    144.               <div class="price">
    145.                 <div class="pricenew">459.00元</div>
    146.                
    147.               </div>
    148.             </div>
    149.           </div>
    150.         </li>
    151.         <li class="span3">
    152.           <a class="prdocutname" href="product.html">绿色女装</a>
    153.           <div class="thumbnail">
    154.             <span class="sale tooltip-test">Sale</span>
    155.             <a href="product.html"><img alt="" src="img/product1.jpg"></a>
    156.            
    157.             <div class="pricetag">
    158.               <span class="spiral"></span><a href="product.html" class="productcart">购买</a>
    159.               <div class="price">
    160.                 <div class="pricenew">459.00元</div>
    161.                
    162.               </div>
    163.             </div>
    164.           </div>
    165.         </li>
    166.         <li class="span3">
    167.           <a class="prdocutname" href="product.html">绿色女装</a>
    168.           <div class="thumbnail">
    169.             <span class="sale tooltip-test">Sale</span>
    170.             <a href="product.html"><img alt="" src="img/product1.jpg"></a>
    171.            
    172.             <div class="pricetag">
    173.               <span class="spiral"></span><a href="product.html" class="productcart">购买</a>
    174.               <div class="price">
    175.                 <div class="pricenew">459.00元</div>
    176.                
    177.               </div>
    178.             </div>
    179.           </div>
    180.         </li>
    181.       </ul>
    182.     </div>
    183.   </section>
    184.   
    185.   
    186.  
    187. </div>
    188. <!-- /maincontainer -->
    189.  
    190. <!-- 底部 -->
    191. <footer id="footer">
    192.   
    193.   <section class="copyrightbottom">
    194.     <div class="container">
    195.       <div class="row">
    196.         <div class="span6">版权所有 &copy; 2022</div>
    197.         <div class="span6 textright"> 姓名：    学号： </div>
    198.       </div>
    199.     </div>
    200.   </section>
    201. </footer>
    202.  
    203. </body>
    204. </html>

    注册页面代码展示，包括表单的验证

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="utf-8">
    5. <title>登录</title>
    6. <link href="css/bootstrap.css" rel="stylesheet">
    7. <link href="css/bootstrap-responsive.css" rel="stylesheet">
    8. <link href="css/style.css" rel="stylesheet">
    9. <script type="text/javascript" src="js/yanzheng.js"></script>
    10. </head>
    11. <body>
    12. <header>
    13.   <div class="headerstrip">
    14.     <div class="container">
    15.       <div class="row">
    16.         <div class="span12">
    17.           <a href="index.html" class="logo pull-left"><img src="img/logo.png" alt="SimpleOne" title="SimpleOne"></a>
    18.           <div class="pull-left">
    19.             <div class="navbar" id="topnav">
    20.               <div class="navbar-inner">
    21.                 <ul class="nav" >
    22.                 
    23.                  <li><a class="myaccount" href="login.html">登录</a>
    24.                   </li>
    25.                   <li><a class="shoppingcart" href="shopping-cart.html">购物车</a>
    26.                   </li>
    27.                 </ul>
    28.               </div>
    29.             </div>
    30.           </div>
    31.          
    32.         </div>
    33.       </div>
    34.     </div>
    35.   </div>
    36.   <div class="container">
    37.    
    38.     <div id="categorymenu">
    39.       <nav class="subnav">
    40.         <ul class="nav-pills categorymenu">
    41.           <li><a class="active"  href="index.html">首页</a>
    42.            
    43.           </li>
    44.          
    45.           <li><a  href="category.html">女装</a>
    46.           </li>
    47.           
    48.           <li><a href="blog.html">新闻</a>
    49.             
    50.           </li>
    51.           
    52.          
    53.           <li><a href="contact.html">联系</a>
    54.           </li>         
    55.         </ul>
    56.       </nav>
    57.     </div>
    58.   </div>
    59. </header>
    60. <!-- 头部结束 -->
    61.  
    62. <div id="maincontainer">
    63.   <section id="product">
    64.     <div class="container">
    65.       <!--  breadcrumb --> 
    66.       <ul class="breadcrumb">
    67.         <li>
    68.           <a href="index.html">首页</a>
    69.           <span class="divider">/</span>
    70.         </li>
    71.         <li class="active">登录</li>
    72.       </ul>
    73.        <!-- Account Login-->
    74.       <div class="row">  
    75.         <div class="span12">
    76.          
    77.          
    78.           <section class="returncustomer">
    79.            
    80.             <div class="loginbox">
    81.              
    82.               <form action="#" method="post" name="myForm">
    83.            <table border="0" align="center">
    84.                <h2>会员注册</h2>
    85.                <tr>
    86.                    <th>用户名</th>
    87.                    <td><input type="text" name="username"/><span> (可包含a-z、0-9和下划线)</span></td>
    88.                </tr>
    89.                <tr>
    90.                    <th>密码</th>
    91.                    <td><input type="password" name="password"/><span> (至少包含6个字符)</span></td>
    92.                </tr>
    93.                <tr>
    94.                    <th>邮箱</th>
    95.                    <td><input type="text" name="email"/><span> (必须包含@字符)</span></td>
    96.                </tr>
    97.                <tr>
    98.                    <td colspan="2" align="center"> 
    99.                        <input type="submit" value="提交" class="submit btn"/><a href="login.html" style="margin-left:20px;" class="btn">登录</a>
    100.                    </td>
    101.                </tr>
    102.            </table>
    103.        </form>
    104.             </div>
    105.           </section>
    106.         </div>
    107.       
    108.       </div>
    109.     </div>
    110.   </section>
    111. </div>
    112.  
    113. <!-- 底部 -->
    114. <footer id="footer">
    115.   
    116.   <section class="copyrightbottom">
    117.     <div class="container">
    118.       <div class="row">
    119.         <div class="span6">版权所有 &copy; 2022</div>
    120.         <div class="span6 textright"> 姓名：    学号： </div>
    121.       </div>
    122.     </div>
    123.   </section>
    124. </footer>
    125. </body>
    126. </html>

    表单验证js

    1.  function validateForm(){
    2.              
    3.              var  formElement = document.myForm;
    4.  //            依次取出用户名和密码
    5.              var username = formElement.username.value;
    6.              var password = formElement.password.value;
    7.              var email = formElement.email.value;
    8.  //            alert("去空格前："+"#"+username+"#"+":"+password+":"+email+"长度："+username.length);
    9.              username = trim(username);
    10.              password = trim(password);
    11.              email = trim(email);
    12.  //            alert("去空格后："+username+":"+password+":"+email+"长度："+username.length);
    13.              checkUsername(username);
    14.              checkPassword(password);
    15.              checkEmail(email);
    16.          }
    17.  //        验证邮箱
    18.          function checkEmail(email){
    19.              var flag = true;
    20.              if(email.length==0){
    21.                  flag = false; 
    22.                  alert("邮箱不能为空！");
    23.              }else if(!/^\w+@\w+(\.\w+)+$/.test(email)){
    24.                  flag = false;
    25.                  alert("邮箱格式不对");
    26.              }
    27.              return flag;
    28.          }        
    29.  
    30.  //        验证密码
    31.          function checkPassword(password){
    32.              var flag = true;
    33.              var  formElement = document.myForm;
    34.              if(password.length == 0){
    35.                  flag = false;
    36.                  alert("密码不能为空！");
    37.                  formElement.password.focus();
    38.              }else if(!/^[0-9]{6}$/.test(password)){
    39.                  flag = false;
    40.                  alert("密码必须为6位数字！");
    41.              }
    42.              return flag;
    43.          }
    44.  //        验证用户名
    45.          function checkUsername(username) {
    46.              var flag = true;
    47.              var  formElement = document.forms[0];
    48.              if(username.length == 0){
    49.                  flag = false;
    50.                  alert("用户名不能为空！");
    51.                  formElement.username.focus();
    52.              }else if(!/^[a-zA-Z0-9]+_/.test(username)){
    53.                  flag = false;
    54.                  alert("用户名必须为英文数字和下划线和下划线");
    55.              }
    56.              return flag;
    57.          }
    58.  //        自定义去空格函数
    59.          function trim(s){
    60.              s = s.replace(/(^\s*)|(\s*_)/g, "");//去前后空格
    61.  //            s = s.replace(/^\s*$/,"");
    62.              return s;
    63.          }
    64.          window.onload = function(){
    65.              var formElement = document.myForm;
    66.              formElement.onsubmit=validateForm;
    67.          };

  • 相关阅读:
    【智能优化算法-蒲公英优化器】基于蒲公英优化器求解单目标优化问题附matlab代码
    【Unity】 2D 游戏 库存模块实现
    golang中的错误处理
    SBCS MBCS Unicode三种编码方式？
    Demo20快乐数
    R语言实操记录——导出高清图片（矢量图）
    echarts和v-chart柱状图颜色渐变
    全球AI新闻速递6.20
    axios介绍和使用
    2023高教社杯数学建模B题思路代码 - 多波束测线问题
  • 原文地址：https://blog.csdn.net/qq_40957277/article/details/125455518