1. js购物车

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        list-style: none;
    }
    img{
        width: 80px;
        height: 80px;
    }
    body{
        font-size: 14px;
        color: #666;
    }
    a{
        color: #666;
text-decoration: none;}
    i{
        font-style: normal;
    }
    .box{
        width: 800px;
    margin: 0 auto;
    }
   ul{
    display: grid;
    grid-template-rows: 51px 1fr
   }
    li{
        display: grid;
        grid-template-columns: 107px 208px 79px 255px 79px 1fr;
       place-items: center;
       border-bottom: 1px dashed #ccc;
    }
    li:nth-of-type(n+2){
        height: 103px;
    }
    li:first-of-type{
        font-family: 宋体;
    }
    li .commodity{
        height: 100%;
       position: relative; 
    }
    li p{
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
    }
    li .inp{
        width: 54px;
    height: 22px;
  border: 1px solid rgb(118, 118, 118);
  text-align: center;
    }
    .btn{
        font-size: 0;
    }
    .btn button{
        width: 22px;
        height: 22px;
        border: 1px solid #ccc;
    background: none;
    outline: none;
    cursor: pointer;
    }
    .foot{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 800px;
    margin: 10px auto;
    border: 1px solid #ccc;
  height: 50px;
    padding-left: 10px;
    }
    .left a{
        height: 48px;
        line-height: 48px;
        display: inline-block;
        margin-right: 50px;
    }
    .right{
        display: flex;
        align-items: center;
    }
    .right button{
        width: 80px;
    height: 54px;
    background: red;
    font: bold 20px/54px '宋体';
    color: #fff;
    text-align: center;
    border: none;
    cursor: pointer;
    }
    .right p{
        margin-right: 20px;
    }
    .right span{
        font-size: 14px;
        color: #ff0000;
    }
    .right span:last-of-type{
        font-weight: bold;
    }
    input{
        outline: none;
    }
</style>
<body>
    <div class="box">
        <ul>
            <li>
                <div class="all">
                    <input type="checkbox"><span class="quan">全选</span>
                </div>
                <span>商品</span>
                <span>单价</span>
                <span>商品数量</span>
                <span>小计</span>
                <span>操作</span>
            </li>
            <li>
                <input type="checkbox">
                <div class="commodity"> <img src="https://img2.baidu.com/it/u=1017090698,4049749381&fm=253&fmt=auto&app=138&f=PNG?w=504&h=500" alt=""><p>牛奶</p></div>
                <span><i class="danjia">5</i>￥</span>
             <div class="btn">
                <button disabled class="jian">-</button>
                <input type="text" class="inp quantity" value="1"  readonly>>
                <button class="jia">+</button>
             </div>
             <span><i class="xiaoji">0</i>￥</span>
             <a href="#" class="del">删除</a>
            </li>
            <li>
                <input type="checkbox">
                <div class="commodity"> <img src="https://img2.baidu.com/it/u=1017090698,4049749381&fm=253&fmt=auto&app=138&f=PNG?w=504&h=500" alt=""><p>牛奶</p></div>
                <span><i class="danjia">10</i>￥</span>
             <div class="btn">
                <button disabled class="jian">-</button>
                <input type="text" class="inp quantity" value="1" readonly>>
                <button class="jia">+</button>
             </div>
             <span><i class="xiaoji">0</i>￥</span>
             <a href="#" class="del">删除</a>
            </li>
            <li>
                <input type="checkbox">
                <div class="commodity"> <img src="https://img2.baidu.com/it/u=1017090698,4049749381&fm=253&fmt=auto&app=138&f=PNG?w=504&h=500" alt=""><p>牛奶</p></div>
                <span><i class="danjia">20</i>￥</span>
             <div class="btn">
                <button disabled class="jian">-</button>
                <input type="text" class="inp quantity" value="1"  readonly>>
                <button class="jia">+</button>
             </div>
             <span><i class="xiaoji">0</i>￥</span>
             <a href="#" class="del">删除</a>
            </li>
            <li>
                <input type="checkbox">
                <div class="commodity"> <img src="https://img2.baidu.com/it/u=1017090698,4049749381&fm=253&fmt=auto&app=138&f=PNG?w=504&h=500" alt=""><p>牛奶</p></div>
                <span><i class="danjia">35</i>￥</span>
             <div class="btn">
                <button disabled class="jian">-</button>
                <input type="text" class="inp quantity" value="1" readonly>
                <button class="jia">+</button>
             </div>
             <span><i class="xiaoji">0</i>￥</span>
             <a href="#" class="del">删除</a>
            </li>
        </ul>
    </div>
    <div class="foot">
  <div class="left">
    <a href="#" class="sx">删除所选商品</a>
    <a href="#" class="qk">清理购物车</a>
  </div>
  <div class="right">
    <p>已经选中<span class="shul">0</span>件商品;总价：<span><i class="zonjia">0</i>￥</span></p>
    <button>去结算</button>
  </div>
    </div>
 <script>
    // 全选模块
    let select=document.querySelector('.all input[type="checkbox"]')
    let item=Array.from(document.querySelectorAll('li:nth-of-type(n+2) input[type="checkbox"]'))
select.addEventListener('click',()=>item.forEach(i=>i.checked=select.checked))
item.forEach(i=>i.addEventListener('click',()=>select.checked=item.every(i=>i.checked===true)))
let jia=[...document.querySelectorAll('button.jia')]
let jian=[...document.querySelectorAll('button.jian')]
let shul=[...document.querySelectorAll('.inp.quantity')]
let xiaoji=[...document.querySelectorAll('i.xiaoji')]
// 加号模块
jia.forEach((i,o)=>i.addEventListener('click',()=>{
if(item[o].checked){
    jian[o].disabled=false
 shul[o].value++
 xiaoji[o].innerHTML=document.querySelectorAll('i.danjia')[o].innerHTML*shul[o].value
 getShul()
 getZonjia()
}else{
    alert('请选择商品')
   return false
}}))
// 减号模块
jian.forEach((i,o)=>i.addEventListener('click',()=>{
if(item[o].checked){
    shul[o].value--
if(shul[o].value<=1)jian[o].disabled=true
 xiaoji[o].innerHTML=document.querySelectorAll('i.danjia')[o].innerHTML*shul[o].value
 getShul()
 getZonjia()
}else{
    alert('请选择商品')
   return false
}}))
// 总数量模块
function getShul(){
    document.querySelector('span.shul').innerHTML= shul.map(i=>+i.value).reduce((a,b)=>a+b)
}
// 总价模块
function getZonjia(){
    document.querySelector('i.zonjia').innerHTML= xiaoji.map(i=>+i.innerHTML).reduce((a,b)=>a+b)
}
// 右边删除模块
let li=[...document.querySelectorAll('li')]
document.querySelectorAll('a.del').forEach((i,o)=>{i.addEventListener('click',()=>{
 if(confirm('确认删除吗')) li[o+1].remove()
})})
// 删除所选商品模块
document.querySelector('a.sx').addEventListener('click',()=>{
   item.forEach((i,o)=>{if(i.checked)li[o+1].remove()})})
// 清理购物车模块
document.querySelector('a.qk').addEventListener('click',()=>{
    if(confirm('确认全部删除吗')) li.splice(1).map(i=>i.outerHTML=null)
})
// 当页面加载时,根据默认值进行自动计算
window.addEventListener('load',function(){
   xiaoji.forEach((i,o)=>{xiaoji[o].innerHTML=document.querySelectorAll('i.danjia')[o].innerHTML*shul[o].value})
   getShul()
 getZonjia()
})
 </script>
</body>
</html>

2.json常用的二个API

当数据在浏览器与服务器之间进行交换时，这些数据只能是文本。
JSON 属于文本，并且我们能够把任何 JavaScript 对象转换为 JSON，然后将 JSON 发送到服务器。
我们也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象。
以这样的方式，我们能够把数据作为 JavaScript 对象来处理，无需复杂的解析和转译。

 <script>
              // 1. 前端 -> 后端: js对象序列化  JSON.stringify()-> json字符串
              let arr=[1,2,3,true]
              let obj={name:1,age:21}
          localStorage.setItem('obj',JSON.stringify(obj))
      // 2. 后端 -> 前端, json反序列化 JSON.parse() ->
      js对象
    console.log(JSON.parse(localStorage.getItem('obj')));
    </script>

js购物车与JSON常用的二个API

1. js购物车

2.json常用的二个API

相关文章