投稿
  1. 首页
  2. IT百科

JS DOM(五) 购物车案例

小企业管理 • 2023-4-12 • IT百科 • 阅读 9

JS DOM(五) 购物车案例,第1张

 <style>

        table {

            border-collapse: collapse

        }

        td,

        th {

            border: 1px solid #ccc

            text-align: center

        }

        input {

            text-align: center

            width: 20px

            outline: none

        }

        img {

            width: 100px

        }

    </style>

</head>

<body>

    <table>

        <thead>

            <tr>

                <th><input type="checkbox" id="ckAll">全选</th>

                <th>商品名称</th>

                <th>商品图片</th>

                <th>商品价格</th>

                <th>购买数量</th>

                <th>小计</th>

                <th> *** 作</th>

            </tr>

        </thead>

        <tbody>

        </tbody>

        <tfoot>

            <tr>

                <td colspan="7" style="text-align: right">

                    <span>总计:</span>

                    <span id="total"></span>

                </td>

            </tr>

        </tfoot>

    </table>

    <script>

        let goodses = [{

            name: '苹果手机',

            img: "https://img12.360buyimg.com/n7/jfs/t1/212335/23/6412/83352/61a99591E098e28c1/03fd3bb84b20d97d.jpg",

            price: 300,

            count: 2,

            isck: false

        }, {

            name: '华为手机',

            img: "https://img11.360buyimg.com/n7/jfs/t1/147090/30/15709/47809/5fbe06d6E0eb8239d/a2e900f693d6e973.jpg",

            price: 200,

            count: 3,

            isck: true

        }, {

            name: '小米手机',

            img: "https://img13.360buyimg.com/n7/jfs/t1/201578/31/15673/77560/619479ceEd1bde507/c0dab826b71e0b84.jpg",

            price: 100,

            count: 8,

            isck: false

        }, {

            name: '中兴手机',

            img: "https://img11.360buyimg.com/n7/jfs/t1/138577/34/21237/197279/61790dbfE7274a47b/569c3d1be96793bd.jpg",

            price: 500,

            count: 4,

            isck: false

        }]

        // 加载商品信息方法

        function loadGoodses() {

            goodses.forEach(g =>{

                let tr = document.createElement('tr')

                    // 每个tr里面有7个td

                let td1 = document.createElement('td')

                let ck = document.createElement('input') //获取里面的输入框

                ck.type = 'checkbox' //获取输入框的按钮选项

                ck.className = 'ck' //这里只是添加一个标记

                    // 设置复选框的选中状态

                ck.checked = g.isck

                    // 设置复选框状态发生改变后的事件

                ck.onchange = function() {

                    // 更新商品的状态

                    g.isck = ck.checked

                        // 再次调用计算总计的方法

                    totalPrice()

                        // 判断是否需要更新全选复选的状态

                    document.querySelector('#ckAll').checked = goodses.every(r =>r.isck)

                }

                td1.appendChild(ck) //将获取到的输入框添加到td里面

                let td2 = document.createElement('td')

                td2.innerHTML = g.name //里面的文本等于数组中商品的name

                let td3 = document.createElement('td')

                let img = document.createElement('img')

                img.src = g.img

                td3.appendChild(img)

                    // td4显示单价

                let td4 = document.createElement('td')

                td4.innerHTML = '￥' + g.price.toFixed(2)

                    // td5显示数量

                let td5 = document.createElement('td')

                let btn1 = document.createElement('button')

                btn1.innerHTML = '-'

                    // 添加减按钮 注册点击事件

                btn1.onclick = function() {

                    g.count--

                        // 判断商品不能小于1

                        if (g.count <1) {

                            g.count = 1

                        }

                        // 更新商品数量

                    count.value = g.count

                        // 更新小计

                    td6.innerHTML = '￥' + (g.price * g.count).toFixed(2)

                        // 更新总计数量，调用函数

                    totalPrice()

                }

                td5.appendChild(btn1)

                let count = document.createElement('input')

                count.value = g.count

                td5.appendChild(count)

                let btn2 = document.createElement('button')

                btn2.innerHTML = '+'

                btn2.onclick = function() {

                    g.count++

                        // 更新商品数量

                        count.value = g.count

                        // 更新小计

                    td6.innerHTML = '￥' + (g.price * g.count).toFixed(2)

                        // 更新总计数量，调用函数

                    totalPrice()

                }

                td5.appendChild(btn2)

                    //单个商品的小计

                let td6 = document.createElement('td')

                td6.innerHTML = '￥' + (g.price * g.count).toFixed(2)

                let td7 = document.createElement('td')

                let del = document.createElement('button')

                del.innerHTML = '删除'

                    // 添加删除事件

                del.onclick = function() {

                    // 删除tr标签

                    tr.remove()

                        // 根据商品的名称获取在数组中的位置

                    let index = goodses.findIndex(r =>r.name === g.name)

                        // 根据位置删除对应的商品

                    goodses.splice(index, 1)

                        // 更新总价 调用函数

                    totalPrice()

                }

                td7.appendChild(del)

                    // 将所有的td添加到tr中

                tr.appendChild(td1)

                tr.appendChild(td2)

                tr.appendChild(td3)

                tr.appendChild(td4)

                tr.appendChild(td5)

                tr.appendChild(td6)

                tr.appendChild(td7)

                    // 将tr 添加到tbody中

                document.querySelector('tbody').appendChild(tr)

            })

        }

        loadGoodses() //调用方法

        // 封装计算总金额的方法

        function totalPrice() {

            // 计算总计

            let money = goodses.filter(r =>r.isck).reduce((a, b) =>a + b.count * b.price, 0)

            // 显示总计

            document.querySelector('#total').innerHTML = '￥' + money.toFixed(2)

        }

        totalPrice()

        // 全选方法

        document.querySelector('#ckAll').onchange = function() {

            let cks = document.querySelectorAll('.ck')

                // 更新DOM

            cks.forEach(ck =>{

                    ck.checked = this.checked

                })

                // 更新数据

            goodses.forEach(g =>{

                    g.isck = this.checked

                })

                // 再次调用计算总计的方法

            totalPrice()

        }

    </script>

可以参考如下代码

<?php

class Cart extends Think {

//当前购物车名

public $sessionName

//购物车总价格

public $totalPrice

public function __construct($sessionName)

{

$this->sessionName=$sessionName

if(!isset($_SESSION[$this->sessionName]))

 {

$_SESSION[$this->sessionName]=""

  }

 }

//获取购物车的信息

public function getCart(){

    $cur_cart_array=$_SESSION[$this->sessionName]

    return $cur_cart_array

}

//获取购物车商品清单

public function getCartList()

{

$cur_cart_array=$_SESSION[$this->sessionName]

if($cur_cart_array!="")

 {

  $mode_goods_data=M("goods_data")

  $len=count($cur_cart_array)

  for($i=0$i<$len$i++)

  {

  $goodsid=$cur_cart_array[$i]["id"]

  $num=$cur_cart_array[$i]["num"]

   $query="select (select sfilename from goods_pic where goodsid=a.goodsid order by sno desc limit 0,1) as sfilename,b.clsname as clsname,a.goodsid as goodsid,a.goodsname as goodsname,a.Price as Price,a.Storageqty as Storageqty from goods_data a left join goods_cls b on a.Clsid=b.clsid where a.goodsid=$goodsid"

    $list=$mode_goods_data->query($query)

    $list[0]["qty"]=$num

    $list[0]["amount"]=$num*$list[0]["Price"]

    $cartList[$i]=$list[0]

    $totalPrice+=$list[0]["amount"]

  }

  //返回商品总价格

  $this->totalPrice=$totalPrice

    return $cartList

 }

}

//加入购物车,购物车的商品id和购物车的商品数量

public function addcart($goods_id,$goods_num){

      $cur_cart_array=$_SESSION[$this->sessionName]

      if($cur_cart_array=="")

       {

          $cart_info[0]["id"]=$goods_id//商品id保存到二维数组中

      $cart_info[0]["num"]=$goods_num//商品数量保存到二维数组中

      $_SESSION[$this->sessionName]=$cart_info

        }

        else

        {   

          //返回数组键名倒序取最大

      $ar_keys=array_keys($cur_cart_array)

           $len=count($ar_keys)

           $max_array_keyid=$ar_keys[$len-1]+1

          //遍历当前的购物车数组

     //遍历每个商品信息数组的0值，如果键值为0且货号相同则购物车该商品已经添加

     $is_exist=$this->isexist($goods_id,$goods_num,$cur_cart_array)

         if($is_exist==false)

         {

             $cur_cart_array[$max_array_keyid]["id"] = $goods_id

             $cur_cart_array[$max_array_keyid]["num"] = $goods_num

             $_SESSION[$this->sessionName]=$cur_cart_array

         }

         else

         {

          $arr_exist=explode("/",$is_exist)

          $id=$arr_exist[0]

          $num=$arr_exist[1]

          $cur_cart_array[$id]["num"]=$num

          $_SESSION[$this->sessionName]=$cur_cart_array

         } 

       }

}

//判断购物车是否存在相同商品

public function isexist($id,$num,$array)

{

 $isexist=false

 foreach($array as $key1=>$value)

 {

  foreach($value as $key=>$arrayid)

  {

    if($key=="id" && $arrayid==$id)

    {

     $num=$value["num"]+$num

     $isexist=$key1."/".$num

    }

  }

 }

 return $isexist

}

thinkphp开发使得我们比较容易的去进行了

//从购物车删除

public function delcart($goods_array_id){

         //回复序列化的数组

     $cur_goods_array=$_SESSION[$this->sessionName]

        //删除该商品在数组中的位置

     unset($cur_goods_array[$goods_array_id])

         $_SESSION[$this->sessionName]=$cur_cart_array

         //使数组序列化完整的保存到cookie中

}

//清空购物车

public function emptycart(){

$_SESSION[$this->sessionName]=""

}

//修改购物车货品数量   

public function update_cart($up_id,$up_num){

 //回复序列化的数组

 $cur_goods_array=$_SESSION[$this->sessionName]  

  $cur_goods_array[$up_id]["num"]=$up_num

  $_SESSION[$this->sessionName]=$cur_cart_array

}

}

?>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/bake/7994327.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
小企业管理 小企业管理 一级用户组
0 0
上一篇 2023-04-12
下一篇 2023-04-12

发表评论

登录后才能评论

评论列表（0条）

保存