您好!欢迎访问网站!
全国咨询热线:
热门关键词:
优化心得
您的位置: 首页 >> 优化心得 >> 正文内容

html简单网页代码,用HTML+CSS和jq写简易购物车代码

作者:Zbk7655 浏览量:21 时间:2025-05-06 16:05:00

用HTML+CSS和jq写简易购物车代码

以下是一个简易购物车的HTML+CSS和jQuery代码示例:

HTML部分:

<div class="cart-container">

<h2>购物车</h2>

<ul class="cart-items">

<li class="cart-item">

<img src="item1.jpg" alt="商品1">

<span class="item-name">商品1</span>

<span class="item-price">100元</span>

<input type="number" class="item-quantity" value="1">

<button class="remove-btn">删除</button>

</li>

<li class="cart-item">

<img src="item2.jpg" alt="商品2">

<span class="item-name">商品2</span>

<span class="item-price">200元</span>

<input type="number" class="item-quantity" value="1">

<button class="remove-btn">删除</button>

</li>

</ul>

<p class="total-price">总价:<span>300元</span></p>

</div>

CSS部分:

.cart-container{

width: 400px;

border: 1px solid#ccc;

padding: 20px;

}

.cart-items{

list-style-type: none;

padding: 0;

margin: 0;

}

.cart-item{

display: flex;

align-items: center;

margin-bottom: 10px;

}

.cart-item img{

width: 80px;

height: 80px;

margin-right: 10px;

}

.item-name,.item-price{

flex: 1;

}

.item-quantity{

width: 50px;

margin-right: 10px;

}

.remove-btn{

background-color:#ccc;

border: none;

padding: 5px 10px;

cursor: pointer;

}

.total-price{

margin-top: 20px;

text-align: right;

}

jQuery部分:

$(document).ready(function(){

//计算初始总价

updateTotalPrice();

//删除商品按钮点击事物

$('.remove-btn').click(function(){

$(this).parent().remove();

updateTotalPrice();

});

//商品数量输入框变化事物

$('.item-quantity').change(function(){

updateTotalPrice();

});

//更新总价函数

function updateTotalPrice(){

var total= 0;

$('.cart-item').each(function(){

var price= parseInt($(this).find('.item-price').text());

var quantity= parseInt($(this).find('.item-quantity').val());

total+= price* quantity;

});

$('.total-price span').text(total+'元');

}

});

该示例中,使用了HTML和CSS来构建购物车的界面,使用jQuery来实现购物车的逻辑。购物车中的每个商品都包含了商品名称、商品图片、商品价格、商品数量和删除按钮,当点击删除按钮时,对应的商品会从购物车中删除并重新计算总价;当商品数量变化时,总价也会自动更新。

如何制作商城网站

网站怎么样建设?今天将网站的常规建设步骤和内容讲解一下:

1、注册域名、域名注册要简短、有代表性、而且易被顾客记住的

2、租用服务器、服务器租用要稳定、安全、速度快、而且有及时的售后服务

3、使用成熟的CMS系统:pageadmin CMS、discuz cms模板多、操作简单、使用方便、直接下载就能找到用、官网有完善的功能插件、提供给顾客下载使用的、方便顾客日后扩展网站

4、域名注册提交资料做实名制、服务器开通后提交资料做网站备案

5、cms系统通过FTP软件上传到服务器部署、服务器绑定域名、域名解析到服务器IP上

6、网站上线。