html商品页面代码（如何用html css javascript php制作购物车）

本文目录

• 如何用html css javascript php制作购物车
• 商品详情页怎么写代码

如何用html css javascript php制作购物车

《!DOCTYPE html》
《html》
《head》
《meta charset="utf-8"》
《title》《/title》
《link rel="stylesheet" href="---.css"》
《script src="---.js"》《/script》
《/head》
《body》
《div class="container"》
《div class="shop"》
《div class="header"》
《input type="checkbox" class="shop-checkbox"》
《span class="shop-icon"》《/span》
《span class="shop-name"》---《/span》
《span class="wangwang-icon"》《/span》
《/div》
《div class="items"》
《div class="item"》
《div》《input class="item-checkbox" type="checkbox" name="" id=""》《/div》
《div》
《span class="item-img"》《/span》
《/div》
《div class="item-name"》
《div》----《/div》
《div class="promotion-icons"》《span》《/span》《span》《/span》《span》《/span》《/div》
《/div》
《div class="sku"》---《/div》
《div class="price"》
《div class="price-1"》---《/div》
《div class="price-2" data-price="---"》----《/div》
《/div》
《div class="num-control"》
《span class="num-minus"》-《/span》
《input class="num" type="text" value="1"》
《span class="num-plus"》+《/span》
《/div》
《div class="item-price-total"》
《span》￥50.13《/span》
《/div》
《div class="operation"》
《div》---《/div》
《div》---《/div》
《/div》
《/div》
《/div》
《/div》
《div class="shop"》
《div class="header"》
《input type="checkbox" class="shop-checkbox"》
《span class="shop-icon"》《/span》
《span class="shop-name"》---《/span》
《span class="wangwang-icon"》《/span》
《/div》
《div class="items"》
《div class="item"》
《div》《input class="item-checkbox" type="checkbox" name="" id=""》《/div》
《div》
《span class="item-img"》《/span》
《/div》
《div class="item-name"》
《div》----《/div》
《div class="promotion-icons"》《span》《/span》《span》《/span》《span》《/span》《/div》
《/div》
《div class="sku"》---《/div》
《div class="price"》
《div class="price-1"》---《/div》
《div class="price-2" data-price="---"》---《/div》
《/div》
《div class="num-control"》
《span class="num-minus"》-《/span》
《input class="num" type="text" value="1"》
《span class="num-plus"》+《/span》
《/div》
《div class="item-price-total"》
《span》￥9.90《/span》
《/div》
《div class="operation"》
《div》移入收藏夹《/div》
《div》删除《/div》
《/div》
《/div》
《div class="item"》
《div》《input class="item-checkbox" type="checkbox" name="" id=""》《/div》
《div》
《span class="item-img"》《/span》
《/div》
《div class="item-name"》
《div》---《/div》
《div class="promotion-icons"》《span》《/span》《span》《/span》《span》《/span》《/div》
《/div》
《div class="sku"》---《/div》
《div class="price"》
《div class="price-1"》---《/div》
《div class="price-2" data-price="---"》---《/div》
《/div》
《div class="num-control"》
《span class="num-minus"》-《/span》
《input class="num" type="text" value="1"》
《span class="num-plus"》+《/span》
《/div》
《div class="item-price-total"》
《span》￥19.9《/span》
《/div》
《div class="operation"》
《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();
}
});
}

商品详情页怎么写代码

商品详情页写代码的操作方法如下：

工具/材料：Dell optiplex7050、Windows10、Apache6.4、PHP3.1。

1、首先在商品详情页面的PHP代码中，需要连接数据库，并选取相应的数据表，以供后续的操作。

2、然后在商品详情页面中，根据传入的商品ID，我们需要从数据库中查询出对应的商品信息，并展示在页面上。可以使用SQL语句来查询数据库，如下所示。在完成相关操作后，我们需要及时关闭数据库连接，释放资源。

3、除了以上的基本功能，为了提升用户体验和降低页面的加载时间，我们还可以对商品详情页面进行一些美化和功能增强。可以在商品详情页面中展示商品的图片，以便用户更直观地了解商品的外观和特点。

4、为了方便用户的购物操作，还可以在商品详情页面中加入加入购物车的功能。

5、最后为了引导用户探索更多商品，可以在商品详情页面中展示一些相关的商品推荐。可以通过查询数据库，根据商品的分类或标签来获取相似的商品，并展示在页面上。