js購物車的實現

2021-10-04 16:34:35 字數 2325 閱讀 3352

購物車

在**類專案中,購物車是非常常見的,但購物車該怎麼實現呢?很多講購物車都是用html頁面模擬的靜態資料,這種資料沒有靈活性,正常的**思路應該是:根據使用者的id查詢出使用者的購物車中的商品,然後對使用者購物車商品進行遍歷,本文章就是對遍歷出來的商品進行購物車數量的加減和小計、總計之間的計算。

遍歷的html頁面:

商品名稱<

/td>

<

/td>

資訊<

/td>

顏色<

/td>

單價<

/td>

數量<

/td>

操作<

/td>

<

/tr>

"s:$"

>

<

!-- readonly=

"readonly"文字框的值不可更改 --

>

"text"

class

="goodsname" name=

"ck" readonly=

"readonly" th:value=

"$">

<

/td>

"$" width=

"80px" height=

"60px"

/>

="picture" type=

"hidden" th:value=

"$">

<

/td>

"text"

class

="message" id=

"message" readonly=

"readonly" th:value=

"$">

<

/td>

"text"

class

="color" readonly=

"readonly" th:value=

"$">

<

/td>

"text" id=

"price"

class

="price" readonly=

"readonly" th:value=

"$">

<

/td>

"button"

class

="sub" value=

"-">

"width: 40px" id=

"num" name=

"num"

class

="num"

type=

"text" readonly=

"readonly" th:value=

"$">

"button"

class

="add" value=

"+">

<

/td>

"text"

class

="total"

>

<

/td>

"hidden"

class

="tota"

>

<

/td>

<

/tr>

<

/th:block>

<

/table>執行結果如下圖:

js計算數量,小計和總價的操作

//動態繫結事件 +$(

"table").

on("click"

,".add"

,function()

);//動態繫結事件 -$(

"table").

on("click"

,".sub"

,function()

//求小計$(

this).

parent()

.next()

.children

(".total").

val(

(num*10)

*(price*10)

/100);

//呼叫函式得到小計和總價

gettotal()

;});

//計算總價

var sum=0;

function

gettotal()

);sum=0;

//清零

}gettotal()

;

JS實現的購物車

hoppingcart jscript 檔案 read cookie function getcookie cookiename result unescape mycookie.substring start,end return result write cookie function setc...

JS實現購物車功能(JS案例)

html 刪除 全選 商品單價數量 小計操作 全選 全部刪除 已選商品 3件顯示或隱藏 合計 7000 結算css body div.box div.box table div.box table td,div.box th div.box th div.box table tbody img di...

購物車實現步驟

1 登陸介面login.php 註冊 insert into tbl user 登入 select from tbl user 2 商品展示頁面carlist.php insert into tbl product mysql connect sql mysql query mysql fetch ...