怎么用html做购物网站_IT百科

只用eclipse就可以了，用jsp可以写一个js监听事件，购买肯定是一个按钮，在上面添加onclick事件，绑定一个函数，显示购物车这个div或者页面(放在当前页面上面)，结算时就是拿商品的价格相加显示出来，比如商品对象放在一个链表里，取出购物车里的，价格相加。

就是简单的数字加减，点击加入购物车后，将购物车的数字内容提取出来加一再赋值到内容里。一般数字部分会单独给一个标签来写入变量给js进行 *** 作，

购物车还有加减按钮，也是将标签内容的数字加一减一就行了

数字的改变需要用到 js 或者其他js框架来进行 *** 作

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

<div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<div>

</div>

</div>

</div>

</div>

</div>

<div>移入收藏夹</div>

</div>

<div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

.container{

width: 1000px

margin-left: auto

margin-right: auto

color: #444444

}

.header{

margin: 8px

}

.shop-icon, .wangwang-icon, .promotion-icons span{

display:inline-block

width: 15px

height: 15px

background-color: rgb(117,192,241)

}

.promotion-icons span{

margin-right: 4px

}

.items{

border: 1px solid #ebe9e9

}

.item{

display: flex

margin: 8px

}

.item-img{

width:100px

height: 100px

display: inline-block

background-color: aquamarine

margin-left: 6px

margin-right: 6px

}

.item-name

{

display: flex

flex-direction: column

justify-content: space-between

}

.sku, .price,.item-price-total,.operation,.num-control{

margin-left: 18px

}

.num{

width: 18px

height: 15px

}

.num-control{

display: flex

align-items: baseline

}

.num-minus,.num-plus{

width: 18px

height: 22px

display: inline-block

background-color: #ebe9e9

}

.checkout{

display: flex

justify-content: space-between

}

.shop{

margin-bottom: 20px

margin-top: 30px

}

.goods,.freight,.checkout-button{

margin-left: 15px

}

.price-1{

text-decoration: line-through

color: gray

}

.check-num ,.total-price{

font-size: large

color: red

margin-left: 3px

margin-right: 3px

}

.checkout-button{

height: 30px

width: 50px

background-color: beige

}

.checkout{

margin-top: 15px

}

.item-name{

width: 25%

}

.item-price-total{

width: 5%

}

.sku{

width: 20%

}

function updatePrice(){

let items = document.querySelectorAll('.item')

let totalNum = 0

let totalPrice = 0

items.forEach(function(item){

if(item.querySelector('.item-checkbox').checked){

let num = item.querySelector('.num').value

totalNum = totalNum + parseInt(num)

let price = item.querySelector('.price-2').getAttribute('data-price')

totalPrice = totalPrice + parseFloat(price) * num

}

})

document.querySelector('.check-num').innerText= totalNum

document.querySelector('.total-price').innerText = totalPrice

}

window.onload=function(){

let itemCheckboxes = document.querySelectorAll('.item-checkbox')

itemCheckboxes.forEach(function(itemCheckbox){

itemCheckbox.onchange = function(){

updatePrice()

}

})

let minuses = document.querySelectorAll('.num-minus')

minuses.forEach(function(minus){

minus.onclick = function(event){

let num=minus.parentElement.querySelector('.num').value

if(parseInt(num)>1)

{

minus.parentElement.querySelector('.num').value=parseInt(num)-1

updatePrice()

}

})

let pluses = document.querySelectorAll('.num-plus')

pluses.forEach(function(plus){

plus.onclick = function(event){

let num=plus.parentElement.querySelector('.num').value

plus.parentElement.querySelector('.num').value=parseInt(num)+1

updatePrice()

}

})

}

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

原文地址: https://outofmemory.cn/bake/11759445.html

怎么用html做购物网站

发表评论

评论列表（0条）