实例演示购物车实例演示JSON常用的两个API 交互的原理与JSON的优势 - 大前端

Home > List of blog posts > 实例演示购物车实例演示JSON常用的两个API 交互的原理与JSON的优势

Blogger Information

Blog 36

fans 1

comment 0

visits 26087

Special Recommendation

More>

Related recommendations

实例演示购物车

运行效果

购物车代码

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>购物车</title>
  </head>
  <style>
    /* 浏览器和标签都有默认的样式 清除默认样式 */
    * {
      margin: 0;
      padding: 0;
    }
    /* 清除加粗标签的默认样式 */
    b,
    strong {
      font-weight: normal;
    }
    /* 清除倾斜标签的默认样式 */
    i,
    em {
      font-style: normal;
    }
    /* 清除默认下划线 */
    a,
    u {
      text-decoration: none;
    }
    /* 超链接默认颜色为黑色 */
    a {
      color: #000;
    }
    /* 清除列表的默认符号样式 */
    ul,
    ol,
    li {
      list-style: none;
    }
    /* 左浮动 */
    .u-l {
      float: left;
    }
    /* 右浮动 */
    .u-r {
      float: right;
    }
    /* 清除浮动 */
    .clearfix {
      clear: both;
    }
    .cart {
      margin: 0 auto;
      width: 95%;
    }
    /* 购物车头部样式 */
    .cart-head {
      height: 70px;
      line-height: 70px;
    }
    .col {
      width: 10%;
    }
    .col-img img {
      width: 100px;
      height: 100px;
    }
    .col-name {
      width: 30%;
    }
    .col-price {
      width: 20%;
      padding-right: 18px;
    }
    .col-num {
      width: 10%;
      text-align: center;
    }
    .col-sum {
      text-align: center;
      color: #ff6700;
    }
    .col-active {
      text-align: center;
    }
    /* 购物车商品样式 */
    .item-box {
      overflow: hidden;
      padding: 20px 0;
      border-top: 1px solid #ccc;
    }
    .change-goods-num {
      width: 148px;
      height: 38px;
      border: 1px solid #000;
    }
    .change-goods-num a {
      float: left;
      width: 38px;
      height: 38px;
      line-height: 38px;
      font-size: 20px;
      color: #000;
      text-align: center;
    }
    .change-goods-num input {
      float: left;
      width: 72px;
      height: 38px;
      font-size: 18px;
      line-height: 38px;
      text-align: center;
      border-width: 0;
    }
    /* 底部 */
    .cart-foot {
      height: 50px;
      line-height: 50px;
      border: 1px solid #ccc;
    }
    .section-left a {
      margin-left: 32px;
      color: #757575;
    }
    .section-left span {
      margin-left: 16px;
      padding-left: 16px;
      color: #757575;
      /* border-left: 1px solid #ccc; */
    }
    .section-left i {
      color: #ff6700;
    }
    .settlement {
      margin-left: 40px;
      padding: 0 40px;
      font-size: 18px;
      background-color: orange;
      color: #fff;
    }
    .total-price {
      color: #ff6700;
      padding-right: 30px;
    }
    .total-price em {
      font-size: 30px;
    }
  </style>
  <body>
    <div class="cart">
      <!-- 购物车头部 -->
      <div class="cart-head clearfix">
        <div class="col col-check u-l">
          <input type="checkbox" id="all" class="check" />
          <label for="all">全选</label>
        </div>
        <div class="col col-img u-l">&nbsp;</div>
        <div class="col col-name u-l">商品名称</div>
        <div class="col col-price u-l">单价</div>
        <div class="col col-num u-l">数量</div>
        <div class="col col-sum u-l">小计</div>
      </div>
      <!-- 购物车列表 -->
      <div class="cart-list">
        <!-- 商品块 -->
        <div class="list-item">
          <div class="item-box">
            <div class="col col-check u-l">
              <input type="checkbox" class="check single" />
            </div>
            <div class="col col-img u-l">
              <img src="./images/1.jpg" alt="" />
            </div>
            <div class="col col-name u-l">
              天梭(TISSOT)瑞士手表 天梭男表速敢黑武士钢带石英男士运动腕表
            </div>
            <div class="col col-price u-l">3555元</div>
            <div class="col col-num u-l">
              <div class="change-goods-num">
                <a href="javascript:;" class="jianhao">-</a>
                <input type="text" value="1" />
                <a href="javascript:;" class="jiahao">+</a>
              </div>
            </div>
            <div class="col col-sum u-l">3555元</div>
          </div>
          <div class="item-box">
            <div class="col col-check u-l">
              <input type="checkbox" class="check single" />
            </div>
            <div class="col col-img u-l">
              <img src="./images/2.png" alt="" />
            </div>
            <div class="col col-name u-l">
              佳能（Canon）E478无线学生彩色喷墨多功能一体机
            </div>
            <div class="col col-price u-l">459元</div>
            <div class="col col-num u-l">
              <div class="change-goods-num">
                <a href="javascript:;" class="jianhao">-</a>
                <input type="text " value="1" />
                <a href="javascript:;" class="jiahao">+</a>
              </div>
            </div>
            <div class="col col-sum u-l">459元</div>
          </div>
          <div class="item-box">
            <div class="col col-check u-l">
              <input type="checkbox" class="check single" />
            </div>
            <div class="col col-img u-l">
              <img src="./images/3.jpg" alt="" />
            </div>
            <div class="col col-name u-l">毕亚兹 无线投屏器 4K高清</div>
            <div class="col col-price u-l">599元</div>
            <div class="col col-num u-l">
              <div class="change-goods-num">
                <a href="javascript:;" class="jianhao">-</a>
                <input type="text" value="1" />
                <a href="javascript:;" class="jiahao">+</a>
              </div>
            </div>
            <div class="col col-sum u-l">599元</div>
          </div>
          <div class="item-box">
            <div class="col col-check u-l">
              <input type="checkbox" class="check single" />
            </div>
            <div class="col col-img u-l">
              <img src="./images/4.jpg" alt="" />
            </div>
            <div class="col col-name u-l">联想ThinkBook16+笔记本电脑</div>
            <div class="col col-price u-l">5699元</div>
            <div class="col col-num u-l">
              <div class="change-goods-num">
                <a href="javascript:;" class="jianhao">-</a>
                <input type="text" value="1" />
                <a href="javascript:;" class="jiahao">+</a>
              </div>
            </div>
            <div class="col col-sum u-l">5699元</div>
          </div>
        </div>
      </div>
      <!-- 购物车底部 -->
      <div class="cart-foot">
        <div class="section-left u-l">
          <span>已选择 <i id="totalNum">0</i> 件商品</span>
        </div>
        <div class="total-price">合计： <em id="totalPrice">0</em>元</div>
      </div>
    </div>
    <script>
      //获取到页面中所有复选框check
      let check = document.querySelectorAll(".check");
      console.log(check.length);
      //获取到商品栏复选框
      let single = document.querySelectorAll(".single");
      console.log(single.length);
      //获取每一行商品栏
      let itemBox = document.querySelectorAll(".item-box");
      console.log(itemBox);
      for (let i = 0; i < check.length; i++) {
        //给所有复选框添加事件
        check[i].onclick = function (e) {
          //判断是否全选
          let count = 0;
          //判断全选框
          if (e.target.getAttribute("id") == "all") {
            //把全选状态赋值给每一个checkbox
            for (j = 0; j < single.length; j++) {
              single[j].checked = this.checked;
            }
          }
          for (let k = 0; k < single.length; k++) {
            if (single[k].checked) {
              count++;
            }
            if (count == single.length) {
              check[0].checked = true;
            } else {
              check[0].checked = false;
            }
          }
          fTotal();
        };
      }
      //给商品每一行添加事件
      for (let i = 0; i < itemBox.length; i++) {
        itemBox[i].onclick = function (e) {
          let input = this.getElementsByTagName("input")[1];
          switch (e.target.className) {
            case "jiahao":
              // alert('加');
              input.value = parseInt(input.value) + 1;
              fTotalSum(this);
              break;
            case "jianhao":
              // alert('减');
              input.value =
                parseInt(input.value) - 1 <= 1 ? 1 : parseInt(input.value) - 1;
              fTotalSum(this);
              break;
          }
          //调用 计算总数量和总价
          fTotal();
        };
      }
      // 定义一个函数计算 小计 That === this 就是商品每一行
      function fTotalSum(That) {
        //获取当前行的数量
        let num = That.getElementsByTagName("input")[1].value;
        //获取当前行的单价  取整是为了省略掉'元'字符串，方便计算
        let price = parseInt(That.querySelector(".col-price").innerHTML);
        // 最终小计值为数量乘以单价
        That.querySelector(".col-sum").innerHTML = num * price + "元";
      }
      //定义一个函数 方便调用总数量  和 合计
      function fTotal() {
        //获取到总价节点
        let totalPrice = document.getElementById("totalPrice");
        //总价
        let price = 0;
        //获取到总件节点
        let totalNum = document.getElementById("totalNum");
        //数量总和
        let Num = 0;
        //获取每一行商品盒子
        let itemBox = document.querySelectorAll(".item-box");
        for (let i = 0; i < itemBox.length; i++) {
          itemBox[i].getElementsByTagName("input")[1].value;
          //选中了，才拿数量和价格
          if (itemBox[i].getElementsByTagName("input")[0].checked) {
            Num += parseInt(itemBox[i].getElementsByTagName("input")[1].value);
            price += parseInt(itemBox[i].querySelector(".col-sum").innerHTML);
          }
        }
        //合并把总和数量写到标签里
        totalNum.innerHTML = Num;
        totalPrice.innerHTML = price;
      }
    </script>
  </body>
</html>

JSON交互原理与JSON的优势

JSON是一种基于文本的数据交换方式，也叫做数据描述格式。
JSON的优点：
1) 基于纯文本，跨平台传递极其简单；
2) json是通用的,轻量化的 "数据交互格式",用于 "前后端数据通信"
3) json独立于编程语言,本质是一个格式化字符串
4) json借用了js对象字面量的语法,简洁高效,已替代了传统的xml格式
5) json不是js对象, 但它可以与js对象之间相互转换
JSON的格式/规则：
JSON能够以非常简单的方式来描述数据结构，XML能做的它都能做，因此在跨平台方面两者均可实现。
1) JSON只有两种数据类型描述符，大括号{}和方括号[]，其余英文冒号:是映射符，英文逗号,是分隔符，英文双引号""是定义符。
2) 大括号{}用来描述一组“不同类型的无序键值对集合”，方括号[]用来描述一组“相同类型的有序数据集合”。
3) 上述两种集合中若有多个子项，则通过英文逗号,进行分隔。
4) 键值对以英文冒号:进行分隔，并且建议键名都加上英文双引号””，以便于不同语言的解析。
5) JSON内部常用数据类型无非就是字符串、数字、布尔、日期、null这几个，字符串必须用双引号引起来，其余的都不用。

实例演示JSON常用的两个API

运行效果

JSON常用的两个API代码

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>json的常用两个api</title>
  </head>
  <body>
    <script>
      console.log(
        "----------------------JS对象转换JSON----------------------------"
      );
      const user = {
        text: "Json常用api",
        name: "早晨",
        date: "2022-7-31",
      };
      console.log(user);
      console.log(typeof user);
      let json = JSON.stringify(user);
      console.log(json);
      console.log(typeof json);
      console.log(
        "----------------------JSON转换JS对象-------------------------------"
      );
      let str = `{ 
         "title": "发布的标题",
         "name": "发布者",
         "catid": "分类信息"
      }`;
      console.log(str);
      console.log(typeof str);
      let item = JSON.parse(str);
      console.log(item);
      console.log(typeof item);
    </script>
  </body>
</html>

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

如何快速创建前端开发环境

2022-07-05 17:12:50

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

实例演示购物车

运行效果

购物车代码

JSON交互原理与JSON的优势

实例演示JSON常用的两个API

运行效果

JSON常用的两个API代码