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>

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

markdown常用语法,emmet常用语法

2022-07-02 16:06:48