JS實現購物車

時間 2020-05-08

標籤實現購物車欄目 JavaScript 简体版

原文原文鏈接

JS實現購物車html

1.實現思路：數組

（1）在body中定義一個id="list",將全部商品存放在一個列表中，當進入購物車時若是有兩個商品被勾選了，須要計算出總共的價錢和商品的件數以及最貴的商品價格；函數

（2）在JS中獲取元素屬性，分別把它們存放在數組中；spa

（3）點擊加號進行商品添加，點擊減號進行商品移除；orm

（4）將上一步用兩個點擊函數來實現添加和移除；htm

（5）在JS中用for循環來計算總價錢和比較最貴的商品；blog

2.代碼思路ip

1.商品列表：get

<body>input

<li>

單價:<em>10元</em>

總計:<span>0元</span>

</li>

<li>

單價:<em>5元</em>

總計:<span>0元</span>

</li>

<li>

單價:<em>6元</em>

總計:<span>0元</span>

</li>

<li>

單價:<em>8元</em>

總計:<span>0元</span>

</li>

</ul>

</body>

2.商品的添加與移除：

//商品的添加與移除

function tab(a){

var oInput = aLi[a].getElementsByTagName("input")

var oStrong = aLi[a].getElementsByTagName("strong")[0]

var oEm = aLi[a].getElementsByTagName("em")[0]

var oSpan = aLi[a].getElementsByTagName("span")[0]

var num = 0

oInput[1].onclick = function(){

num++

oStrong.innerHTML = num

var oPrice = parseFloat(oEm.innerHTML)

oSpan.innerHTML = parseFloat(num)*oPrice+"元"

var addShop = count()

// console.log(addShop)

oP[0].innerHTML = "商品數量總計:"+addShop+"件"

var all = all_price()

oP[1].innerHTML = "共消費:"+all+"元"

var max = compare()

// console.log(max)

oP[2].innerHTML = "商品最貴的是:"+max+"元"

}

oInput[0].onclick = function(){

num--

if(num<=0){

num = 0

}

oStrong.innerHTML = num

var oPrice = parseFloat(oEm.innerHTML)

oSpan.innerHTML = parseFloat(num)*oPrice+"元"

var addShop = count()

// console.log(addShop)

oP[0].innerHTML = "商品數量總計:"+addShop+"件"

var all = all_price()

oP[1].innerHTML = "共消費:"+all+"元"

}

3.計算總價值：

//消費總計

function all_price(){

var sum = 0

for (var i=0;i<oSpan.length;i++) {

sum+=parseFloat(oSpan[i].innerHTML)

}

// console.log(sum)

return sum

}

4.商品總數量：

//商品數量求和

function count(){

var sum = 0

for (var i=0;i<oStrong.length;i++) {

sum+=parseFloat(oStrong[i].innerHTML)

}

// console.log(sum)

return sum

}

5.最貴商品價格：

//比較最大值

function compare(){

var arr = []

for (var i=0;i<oSpan.length;i++) {

arr.push(parseFloat(oSpan[i].innerHTML))

}

arr.sort(function(a,b){

return b-a

})

return arr[0]

}

3.實現代碼

<!DOCTYPE html>

<html>

<head>

<style>

em{

font-style: normal;

}

ul li{

list-style: none;

}

</style>

</head>

<body>

<li>

單價:<em>10元</em>

總計:<span>0元</span>

</li>

<li>

單價:<em>5元</em>

總計:<span>0元</span>

</li>

<li>

單價:<em>6元</em>

總計:<span>0元</span>

</li>

<li>

單價:<em>8元</em>

總計:<span>0元</span>

</li>

</ul>

<p>商品數量總計:0件</p>

<p>商品最貴的是:0元</p>

var oList = document.getElementById("list")

var aLi = oList.getElementsByTagName("li")

var oStrong = oList.getElementsByTagName("strong")

var oP = document.getElementsByTagName("p")

var oSpan = document.getElementsByTagName("span")

for (var i=0;i<aLi.length;i++) {

tab(i)

}

//商品的添加與移除

function tab(a){

var oInput = aLi[a].getElementsByTagName("input")

var oStrong = aLi[a].getElementsByTagName("strong")[0]

var oEm = aLi[a].getElementsByTagName("em")[0]

var oSpan = aLi[a].getElementsByTagName("span")[0]

var num = 0

oInput[1].onclick = function(){

num++

oStrong.innerHTML = num

var oPrice = parseFloat(oEm.innerHTML)

oSpan.innerHTML = parseFloat(num)*oPrice+"元"

var addShop = count()

// console.log(addShop)

oP[0].innerHTML = "商品數量總計:"+addShop+"件"

var all = all_price()

oP[1].innerHTML = "共消費:"+all+"元"

var max = compare()

// console.log(max)

oP[2].innerHTML = "商品最貴的是:"+max+"元"

}

oInput[0].onclick = function(){

num--

if(num<=0){

num = 0

}

oStrong.innerHTML = num

var oPrice = parseFloat(oEm.innerHTML)

oSpan.innerHTML = parseFloat(num)*oPrice+"元"

var addShop = count()

// console.log(addShop)

oP[0].innerHTML = "商品數量總計:"+addShop+"件"

var all = all_price()

oP[1].innerHTML = "共消費:"+all+"元"

}

//商品數量求和

function count(){

var sum = 0

for (var i=0;i<oStrong.length;i++) {

sum+=parseFloat(oStrong[i].innerHTML)

}

// console.log(sum)

return sum

}

//消費總計

function all_price(){

var sum = 0

for (var i=0;i<oSpan.length;i++) {

sum+=parseFloat(oSpan[i].innerHTML)

}

// console.log(sum)

return sum

}

//比較最大值

function compare(){

var arr = []

for (var i=0;i<oSpan.length;i++) {

arr.push(parseFloat(oSpan[i].innerHTML))

}

arr.sort(function(a,b){

return b-a

})

return arr[0]

}

</script>

</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。