ajax接口-随机、价格销量排序-demo

最新推荐文章于 2022-07-15 15:20:06 发布

咩有猫腻.

最新推荐文章于 2022-07-15 15:20:06 发布

阅读量293

点赞数

分类专栏： jQuery Ajax 前端后端demo

本文链接：https://blog.csdn.net/DcTbnk/article/details/107024719

版权

jQuery 同时被 3 个专栏收录

49 篇文章 0 订阅

订阅专栏

前端后端demo

33 篇文章 0 订阅

订阅专栏

Ajax

12 篇文章 0 订阅

订阅专栏

在这里插入图片描述

`html.css(包括js)`

<!-- css -->
  <link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="./css/main.css" />
</head>

<body>
  <!-- html -->
  <div class="container">
    <div class="btns">
      <button class="btn" onclick="sortHandle('r')">随机</button>
      <button class="btn" onclick="sortHandle('p')">价格</button>
      <button class="btn" onclick="sortHandle('s')">销量</button>
    </div>

    <div class="content"></div>
    <ul class="nav">
      <!-- emmet语法 -->
      <li>
        <i class="fa fa-home fa-fw"></i>
        <span>首页</span>
      </li>
      <li class="active">
        <i class="fa fa-fire fa-fw"></i>
        <span>列表</span>
      </li>
      <li>
        <i class="fa fa-cart-plus fa-fw"></i>
        <span>购物车</span>
      </li>
      <li>
        <i class="fa fa-user fa-fw"></i>
        <span>我的</span>
      </li>
    </ul>
  </div>

<!-- js -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
  <script>
    var books = [];## `main.css`

    function initHtml() {
      var strHtml = "";
      books.forEach(function (book) {
        strHtml += `<div class="card">
            <img src="${book.img}" alt="" />
            <h3>${book.title}</h3>
            <p class="price">￥${book.price}</p>
            <p class="sales">销量:${book.sales}</p>
          </div>`;
      });
      $(".content").html(strHtml);
    }


    /* 排序
        数组.sort()    默认按照首字符串大小排序
        数组.sort(function(a,b){return a-b})    按照数值,从小到大排列
        数组.sort(function(a,b){return b-a})    按照数值,从大到小排列
    */

    function sortHandle(type) {
      switch (type) {
        case "r":
          books.sort(function (a, b) {
            return Math.random() - 0.5;
          });
          break;
        case "p":
          books.sort((a, b) => a.price - b.price);
          break;
        case "s":
          books.sort((a, b) => a.sales - b.sales);
          break;
        default:
          break;
      }
      initHtml();
    }

    $(function () {
      // 底部导航选项
      $('.nav>li').click(function () {
        $(this).addClass('active').siblings().removeClass('active');
      });
      // 
      $.getJSON("http://api.cat-shop.penkuoer.com/books.json", function (data) {
        books = data;
        initHtml(data);
      });
    });
  </script>

`main.css`

html,
body,
.container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-direction: column;
}

.container .content {
  flex: 1;
}

ul,
li {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

.container .btns {
  position: fixed;
  top: 0;
  background: white;
  padding-bottom: 10px;
}

.container .nav {
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: space-around;
  border-top: 1px solid #ccc;
  position: fixed;
  bottom: 0;
  width: 100%;
  background: white;
}

.container .nav li {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container .nav li span {
  font-size: 0.6rem;
}

.container .nav li.active {
  color: deeppink;
}

.card {
  width: 180px;
  height: 270px;
  padding: 0.5rem;
  float: left;
}

/* .content .card {
  float: left;
} */
.content h3 {
  padding: 0;
  font-size: 0.9rem;
  margin: 0.2rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.content p {
  padding: 0;
  margin: 0.1rem 0;
  font-size: 0.7rem;
}

.btn {
  border: 0;
  background-color: deeppink;
  color: white;
  width: 3rem;
  height: 1.5rem;
  cursor: pointer;
}

咩有猫腻.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajax接口-随机、价格销量排序-demo

html.css(包括js) <link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <link rel="stylesheet" href="./css/main.css" /></head><body> <!-- html --&g...
复制链接

扫一扫

专栏目录