商城项目日结2

其他 2020-03-11 09:55:36 阅读次数: 0

主要对商城的主页的一些功能 进行了 编写 ，并通过jQuery 发送ajax 请求的到数据之后通过得到的数据对页面进行渲染工作。
商城主页的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.css">
  <link rel="stylesheet" href="../css/reset.css">
  <link rel="stylesheet" href="../css/common.min.css">
  <link rel="stylesheet" href="../css/index.css">
  <link rel="stylesheet" href="../lib/bootstrap/fonts/glyphicons-halflings-regular.svg">
  <link rel="stylesheet" href="../lib/jquery-ui/jquery-ui.min.css">
  <link rel="stylesheet" href="../lib/swiper/css/swiper.min.css">
</head>
<body>

  <h1>TP-Link首页</h1>

  <div class="layout-header-nav">
      <div class="container"> 
          <p class="header-benefit">
              商城优惠大酬宾，全场满59元包邮
          </p>
          <div class="header-cart">
              <a href="./cart.html" class="header-cart-link">
                  <div class="header-cart-button">
                      <div class="header-cart-button-img"></div>
                      <span class="header-cart-button-word">
                        购物车
                      </span>
                  </div>
              </a>
          </div>
          <div class="header-nav">
              <a href="./login.html" class="header-nav-item login">登录</a>
              <span class="header-nav-item">|</span>
              <a href="./register.html" class="header-nav-item">注册</a>
              <span class="header-nav-item">|</span>
              <a href="./cart.html" class="header-nav-item">我的订单</a>
              <span class="header-nav-item">|</span>
              <a href="#" class="header-nav-item">帮助中心</a>
              <span class="header-nav-item">|</span>
              <a href="#" class="header-nav-item">TP-LINK官网</a>
          </div>> 
      </div>
  </div>
  
  <div class="layout-header-search">
    <div class="container">
        <a href="#">
          <img src="" alt="" class="header-logo">
        </a>
        
          <div class="layout-banner-nav">
            <div class="banner-nav-list">
                <div class="container2">
                    
                </div>
            </div>
          </div>
        <form action="" class="header-search">
              <input type="text" class="header-search-input" autocomplete="off">
              <input type="submit" class="header-search-submit" value="">
              
        </form>
    </div>

  </div>

  <div class="nav_box"> 
      <ul class="container">

      </ul>
  </div>

  <div class="banner container">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="http://www.tp-linkshop.com.cn/Content/themes/base/images/TL-XDR3020.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="http://www.tp-linkshop.com.cn/Content/themes/base/images/TL-WDR7650kyizhan.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="http://www.tp-linkshop.com.cn/Content/themes/base/images/IPC43AN2.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="http://www.tp-linkshop.com.cn/Content/themes/base/images/TL-WDR7660k2.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="http://www.tp-linkshop.com.cn/Content/themes/base/images/AP.jpg" style="height: 500px;" alt="">
        </div>
      </div>
      
      <div class="swiper-pagination"></div>

    
      <div class="swiper-button-prev prev"></div>
      <div class="swiper-button-next"></div>

      
    </div>

    <div class="nav_list">
      <ul>
        <li>无线路由器 <p>></p></li>
        <li>企业路由器 <p>></p></li>
        <li>交换机 <p>></p></li>
        <li>路由器 <p>></p></li>
        <li>安防监控 <p>></p></li>
        <li>电力线产品 <p>></p></li>
        <li>无线扩展器 <p>></p></li>
        <li>网卡 <p>></p></li>
        <li>综合布线 <p>></p></li>
        <li>其他产品 <p>></p></li>
      </ul>
    </div>
  </div>

  <div class="hot-products">
      <div class="container">
          <ul class="hot-products-list">
            <li class="hot-products-list-item"><a href="">
              <div class="hot-products-list-item-inner" style="background: url('http://www.tp-linkshop.com.cn/Content/themes/base/images/Home/hpTL-WDR7650kyizhan.jpg') center center no-repeat;">
                <p></p>
                <p></p>
                <p></p>
                <p></p>
              </div>
            </a></li>
            <li class="hot-products-list-item"><a href="">
              <div class="hot-products-list-item-inner" style="background: url('http://www.tp-linkshop.com.cn//Content/themes/base/images/Home/hpTL-WDR7661k.jpg') center center no-repeat;">
                <p></p>
                <p></p>
                <p></p>
                <p></p>
              </div>
            </a></li>
            <li class="hot-products-list-item"><a href="">
              <div class="hot-products-list-item-inner" style="background: url('http://www.tp-linkshop.com.cn/Content/themes/base/images/Home/hpTL-WDR8690.jpg') center center no-repeat;">
                <p></p>
                <p></p>
                <p></p>
                <p></p>
              </div>
            </a></li>
            <li class="hot-products-list-item"><a href="">
              <div class="hot-products-list-item-inner" style="background: url('http://www.tp-linkshop.com.cn/Content/themes/base/images/Home/hpTL-IPC43AN.jpg') center center no-repeat;">
                <p></p>
                <p></p>
                <p></p>
                <p></p>
              </div>
            </a></li>
          </ul>
      </div>
  </div>
</body>
</html>

css:

* {
    margin: 0;
    padding: 0;
  }
  
  ul, ol, li {
    list-style: none;
  }
.header-cart,.header-cart-link{height:40px;width:80px}
.header-cart-below-list-item-link,.header-cart-below-summary-link,.header-cart-below:hover,.header-cart-link{display:block}
.layout-header-nav{width:100%;min-width:1200px;height:40px;background-color:#333}
.layout-header-nav .header-benefit{font-size:12px;line-height:40px;color:#FFF;float:left}
.layout-header-nav .header-nav{float:right}
.layout-header-nav .header-nav-item{font-size:12px;line-height:40px;color:rgba(255,255,255,.7);padding:0 8px}
a.header-nav-item{font-size:12px;line-height:40px;color:#ccc;padding:0 8px}
a.header-nav-item:hover{color:#fff}

.header-cart{background-color:#4d4d4d;float:right;margin-left:8px;position:relative}
.header-cart-button{width:100%;height:100%}
.header-cart-button-img{background:url(http://www.tp-linkshop.com.cn/Content/themes/base/images/Shared/shopping_cart.png) center center no-repeat;background-size:100%;margin:12px 4px 12px 12px;float:left;width:16px;height:16px}
.header-cart-below,.header-cart-nothing{position:absolute;top:40px;right:0;z-index:99;width:276px}
.header-cart-button-word{font-size:12px;line-height:40px;color:#ccc;float:left}
.header-cart.active{background-color:#0096ff}

.header-cart.active .header-cart-button-img{background:url(http://www.tp-linkshop.com.cn/Content/themes/base/images/Shared/shopping_cart_hover.png) center center no-repeat;background-size:100%}
.header-cart.active .header-cart-button-word{color:#fff}


.layout-header-search{width:100%;min-width:1200px;height:80px;background-color:#FFF;border-bottom:1px solid #E6E6E6;box-shadow:0 0 10px 0 rgba(0,0,0,.04);box-sizing:border-box}
.layout-header-search .header-logo{width:237px;height:20px;margin:30px 0 0;float:left;background-image:url(http://www.tp-linkshop.com.cn/Content/themes/base/images/Shared/logo.png);background-size:100%}
.layout-header-search .header-search{position:relative;width:320px;height:40px;margin:20px 0 0;background-color:#FFF;float:right}
.layout-header-search .header-search-input{padding:10px 32px 10px 12px;width:276px;height:40px;border:1px solid #E6E6E6;font-size:14px;color:#333;line-height:20px}
.layout-header-search .header-search-input:focus{outline:0;caret-color:#0096FF;border:1px solid #0096FF}
.layout-header-search .header-search-submit{width:24px;height:24px;background-image:url(../images/search2.png);background-size:100% 100%;background-color:#FFF;border:none;cursor:pointer;position:absolute;top:10px;right:12px}
.layout-header-search .header-search-submit:hover{background-image:url(../images/search.png)}
.layout-header-search .header-search-keywords{position:absolute;top:0;left:0;padding:9px 12px}
.layout-header-search .header-search-keywords-item{font-size:12px;line-height:24px;color:#999;padding:4px;background-color:#F0F0F0}
.layout-header-search .header-search-keywords-item:hover{color:#0096FF}


.layout-banner-nav{width:600px;min-width:500px;background:#FFF;box-shadow:0 0 10px 0 rgba(0,0,0,.04);position: relative;}
.layout-banner-nav .banner-nav-list-item{font-size:14px;line-height:80px;color:#333;margin:0 24px 0 0;display:block;float:left}
.layout-banner-nav .banner-nav-list-item:first-of-type{margin-left:44px}
.layout-banner-nav .banner-nav-list-item:hover{color:#0096FF}
.container2{width:900px;background-color: salmon;}

.nav_box{
    width: 100%;
    background-color: white;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    display: none;
    position: absolute;
    z-index: 9999;
}
.nav_box >ul{display: flex;}
.nav_box >ul >li{ 
    flex: 1;
    padding: 20px;

    display: flex;
    flex-direction: column;
    align-items: center;
}
.nav_box >ul >li >div{
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #333;
    margin-bottom: 15px;
    padding-right: 40px;
}
.nav_box >ul >li >div img{
    width: 150px;
    height: 150px;
    display: block;
    
}
.nav_box >ul >li  >p{
    margin-bottom: 5px;
}
.model{
    font-size: 10px;
}
.price{
    color: coral;
}

.banner{
    position: relative;
}
.banner .prev{
    left: 215px;
}
.banner >.nav_list{
    width: 200px;
    height: 100%;
    position: absolute;
    left: 15px;
    top: 0;
    background-color: rgba(0, 0, 0, .4);
    z-index: 999;
}
.banner > .nav_list >ul{
    width: 100%;
    height: 100%;
}
.banner > .nav_list >ul >li{
    color: white;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    text-indent: 20px;
}
.banner > .nav_list >ul >li:hover{
   background-color: #0096FF;
}

.banner >.nav_list >ul >li >p{
    float:right;
    margin-right: 15px;
}

.hot-products-list-item-inner{
    width: 280px;
    height: 260px;
}
.hot-products-list {
    margin-top: 30px;
    margin-bottom: 60px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* align-items: center; */
}

js代码：

<script>
    console.log($.cookie('name'));

    console.log($('.login'));
    $(function() {
        if ($.cookie('name')) {
          console.log('用户登录')
            $('.login').text($.cookie('name'));
        }else{
          console.log('用户未登录')
        }
    })

    $('.header-cart').hover(function(){
        $('.header-cart').addClass("active")
    },function (){
        $('.header-cart').removeClass("active")
    }
    )

    var mySwiper = new Swiper ('.swiper-container', {
        // direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项
        autoplay: {
          delay: 1000
        },
        effect: 'fade',

        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },

        // 如果需要滚动条
        // scrollbar: {
        //   el: '.swiper-scrollbar',
        // },
      })


    getList()

    function getList() {
      $.ajax({
        url: '../lib/nav_top.json',
        dataType: 'json',
        success: function (res) {
          console.log(res)

          // 4-1. 准备一个空字符串
          let str = ''

          // 4-2. 渲染一级的 a
          res.forEach(item => {
            str += `<a class="banner-nav-list-item">${ item.name }</a>`
          })

          // 4-3. 填充到 nav_top 里面的 ul 里面
          $('.container2 ')
            .html(str)
            .on({
              mouseenter: () => $('.nav_box').stop().slideDown(),
              mouseleave: () => $('.nav_box').stop().slideUp()
            })
            .children('a') // 找到所有的一级菜单下的 a
            .on('mouseover', function () {
              // 5-1. 知道自己移入的时哪一个 a
              const index = $(this).index()
              // 5-2. 找到要渲染的数组
              const list = res[index].list
              // 5-3. 用我们找到的数组把 nav_box 位置渲染了就可以了
              let str = ''

              // 5-4. 进行组装
              list.forEach(item => {
                str += `
                  <li>
                    <div>
                      <img src="${ item.list_url }" alt="">
                    </div>
                    <p class="title">${ item.list_name }</p>
                    <p class="model">${item.list_model}</p>
                    <span class="price">￥${ item.list_price }</span>
                  </li>
                `
              })

              // 5-5. 填充到页面里面
              $('.nav_box > ul').html(str)
            })

          // 4-4. 给 nav_box 添加一个移入移出事件
          $('.nav_box')
            .on({
              mouseover: function () { $(this).finish().show() },
              mouseout: function () { $(this).finish().slideUp() }
            })
        }
      })
    }
  </script>

json数据

[
  {
    "id": 1,
    "name": "家用产品",
    "list": [
      {
        "list_id": 101,
        "list_name": "TL-WDR7660千兆版",
        "list_model":"AC1900双频无线路由器",
        "list_price": 199,
        "list_url": "http://www.tp-linkshop.com.cn/ProductImg200/815.png"
      },
      {
        "list_id": 102,
        "list_name": "TL-WDR5620",
        "list_model":"AC1200双频无线路由器",
        "list_price": 119,
        "list_url": "http://www.tp-linkshop.com.cn/ProductImg200/527.png"
      },
      {
        "list_id": 103,
        "list_name": "飞月•TL-WDR5670青瓷色",
        "list_model":"AC1200双频无线路由器",
        "list_price": 125,
        "list_url": "http://www.tp-linkshop.com.cn/ProductImg200/757.png"
      },
      {
        "list_id": 104,
        "list_name": "仲夏夜之梦•TL-WDR5660千兆版",
        "list_model":"AC1200双频千兆无线路由器",
        "list_price": 179,
        "list_url": "http://www.tp-linkshop.com.cn/ProductImg200/732.png"
      },
      {
        "list_id": 105,
        "list_name": "TL-WDR8630",
        "list_model":"AC2600双频板阵天线千兆无线路由器",
        "list_price": 529,
        "list_url": "http://www.tp-linkshop.com.cn/ProductImg200/606.png"
      }
    
    ]
  },
  {
    "id": 2,
    "name": "商用产品",
    "list": [
      {
        "list_id": 201,
        "list_name": "TL-SG1210P",
        "list_model":"8口全千兆以太网PoE交换机",
        "list_price": 420,
        "list_url": "http://www.tp-linkshop.com.cn/ProductImg200/347.png"
      },
      {
        "list_id": 202,
        "list_name": "TL-ER3220G",
        "list_model":"双核多WAN口千兆企业VPN路由器",
        "list_price": 879,
        "list_url": "http://www.tp-linkshop.com.cn/ProductImg200/619.png"
      },
      {
        "list_id": 203,
        "list_name": "TL-R473GP-AC",
        "list_model":"PoE•AC一体化千兆VPN路由器",
        "list_price": 499,
        "list_url": "http://www.tp-linkshop.com.cn/ProductImg200/560.png"
      },
      {
        "list_id": 204,
        "list_name": "TL-HDAP1800C-PoE/DC",
        "list_model":"AC1800四频高密度无线吸顶式AP",
        "list_price": 799,
        "list_url": "http://www.tp-linkshop.com.cn/ProductImg200/742.png"
      },
      {
        "list_id": 205,
        "list_name": "TL-AP1202GI-PoE 薄款",
        "list_model":"AC1200双频千兆无线面板式AP",
        "list_price": 329,
        "list_url": "http://www.tp-linkshop.com.cn/ProductImg200/763.png"
      }
      
    ]
  },
  {
    "id": 3,
    "name": "阵列天线路由器",
    "list": [
      {
        "list_id": 301,
        "list_name": "TL-WTR9500",
        "list_model":"AC5400三频方阵千兆无线路由器",
        "list_price": 2599,
        "list_url": "http://www.tp-linkshop.com.cn/ProductImg200/576.png"
      },
      {
        "list_id": 302,
        "list_name": "TL-WDR8630",
        "list_model":"AC2600双频板阵千兆无线路由器",
        "list_price": 529,
        "list_url": "http://www.tp-linkshop.com.cn/ProductImg200/606.png"
      },
      {
        "list_id": 303,
        "list_name": "绿野仙踪•TL-WDR8640",
        "list_model":"AC2600双频板阵千兆无线路由器",
        "list_price": 459,
        "list_url": "http://www.tp-linkshop.com.cn/ProductImg200/672.png"
      },
      {
        "list_id": 304,
        "list_name": "飞檐•TL-WDR5640",
        "list_model":"AC1200双频方阵无线路由器",
        "list_price": 129,
        "list_url": "http://www.tp-linkshop.com.cn/ProductImg200/655.png"
      },
      {
        "list_id": 305,
        "list_name": "X12套装",
        "list_model":"全家通•智享路由",
        "list_price": 349,
        "list_url": "http://www.tp-linkshop.com.cn/ProductImg200/712.png"
      }
      
    ]
  },
  {
    "id": 4,
    "name": "WVR/WAR系列",
    "list": [
      {
        "list_id": 401,
        "list_name": "TL-WVR2600L",
        "list_model":"企业级AC2600双频无线VPN路由器",
        "list_price": 1499,
        "list_url": "http://www.tp-linkshop.com.cn/ProductImg200/525.png"
      },
      {
        "list_id": 402,
        "list_name": "TL-WVR1300L",
        "list_model":"企业级AC1300双频无线VPN路由器",
        "list_price": 759,
        "list_url": "http://www.tp-linkshop.com.cn/ProductImg200/443.png"
      },
      {
        "list_id": 403,
        "list_name": "TL-WVR1200L",
        "list_model":"企业级AC1200双频无线VPN路由器",
        "list_price": 599,
        "list_url": "http://www.tp-linkshop.com.cn/ProductImg200/528.png"
      },
      {
        "list_id": 404,
        "list_name": "TL-WAR1208L",
        "list_model":"企业级AC4300三频无线VPN路由器",
        "list_price": 599,
        "list_url": "http://www.tp-linkshop.com.cn/ProductImg200/673.png"
      },
      {
        "list_id": 405,
        "list_name": "TL-WVR450G",
        "list_model":"450M无线企业VPN路由器",
        "list_price": 519,
        "list_url": "http://www.tp-linkshop.com.cn/ProductImg200/177.png"
      }
     
    ]
  },
  {
    "id": 5,
    "name": "无线网络摄像机",
    "list": [
      {
        "list_id": 501,
        "list_name": "TL-IPC42A-4",
        "list_model":"200万云台无线网络摄像机",
        "list_price": 199,
        "list_url": "http://www.tp-linkshop.com.cn/ProductImg200/682.png"
      },
      {
        "list_id": 502,
        "list_name": "TL-IPC42C-4",
        "list_model":"200万云台无线网络摄像机",
        "list_price": 189,
        "list_url": "http://www.tp-linkshop.com.cn/ProductImg200/717.png"
      },
      {
        "list_id": 503,
        "list_name": "TL-IPC53A",
        "list_model":"全景无线网络摄像机",
        "list_price": 299,
        "list_url": "http://www.tp-linkshop.com.cn/ProductImg200/705.png"
      }
    ]
  }
]
张运成
发布了9 篇原创文章 · 获赞 0 · 访问量 102
私信 关注

猜你喜欢

转载自blog.csdn.net/weixin_43861707/article/details/104644350
结
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022