JS实现购物车功能

最新推荐文章于 2024-06-18 11:26:21 发布
最新推荐文章于 2024-06-18 11:26:21 发布
阅读量5.7k 收藏 15
点赞数 5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bafangcio/article/details/80503271
版权 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>操作当当购物车页面</title>
    <link type="text/css" rel="stylesheet" href="css/cartStyle.css" />
</head>
<body>
<div class="content">
    <div class="logo">
        <img src="images/dd_logo.jpg"><span οnclick="close_plan();">关闭</span>
    </div>
    <div class="cartList" id="cartList">
        <ul>
            <li>商品图片</li>
            <li>商品信息</li>
            <li>单价</li>
            <li>数量</li>
            <li>总价</li>
            <li>操作</li>
        </ul>
        <ul>
            <li><img src="images/dog.jpg"></li>
            <li>我和狗狗活下来了</li>
            <li>¥<input type="text" name="price" value="21.90"></li>
            <li><input type="button" name="minus" value="-" οnclick="minus(0);"><input type="text" name="amount" value="1" id="one"><input type="button" name="plus" value="+" οnclick="plus(0);"></li>
            <li id="price0">21.90</li>
            <li><p  οnclick="collection();">移入收藏</p><p id="del0" οnclick="del(0)">删除</p></li>
        </ul>
        <ul>
            <li><img src="images/mai.jpg"></li>
            <li>灰霾来了怎么办</li>
            <li>¥<input type="text" name="price" value="24.00"></li>
            <li><input type="button" name="minus" value="-" οnclick="minus(1);"><input type="text" name="amount" value="1" id="two"><input type="button" name="plus" value="+" οnclick="plus(1);"></li>
            <li id="price1">24.00</li>
            <li><p  οnclick="collection();">移入收藏</p><p id="del1" οnclick="del(1)">删除</p></li>
        </ul>
        <ol>
            <li id="totalPrice">商品总计：<span id="total"></span></li>
            <li><span>结 算</span></li>
        </ol>
    </div>
</div>
</body>
<script>
	var one=document.getElementById("one");
	var two=document.getElementById("two");
	var price0=document.getElementById("price0");
	var price1=document.getElementById("price1");
	var total=document.getElementById("total");
	var del0=document.getElementById("del0");
	var del1=document.getElementById("del1");
//	左减
	function minus(num){
		switch(num){
			case 0:
				var value=one.value;
				if(0<one.value){
					value--;
					one.value=value;
				}
				price0.innerText=12.90*parseInt(value);//单件商品总价
				total.innerText=parseInt(price0.innerText)+parseInt(price1.innerText);//多件商品总价
				break;
			case 1:
				var value=two.value;
				if(0<two.value){
					value--;
					two.value=value;
				}
				price1.innerText=24.00*parseInt(value);//单件商品总价
				total.innerText=parseInt(price0.innerText)+parseInt(price1.innerText);//多件商品总价
				break;
		}
	}
//	右加
	function plus(num){
		switch(num){
			case 0:
				var value=one.value;
				if(one.value>=0){
					value++;
					 one.value=value;
				}
				price0.innerText=12.90*parseInt(value);//单件商品总价
				total.innerText=parseInt(price0.innerText)+parseInt(price1.innerText);//多件商品总价
				break;
			case 1:
				var value=two.value;
				if(two.value>=0){
					value++;
					 two.value=value;
				}
				price1.innerText=24.00*parseInt(value);//单件商品总价
				total.innerText=parseInt(price0.innerText)+parseInt(price1.innerText);//多件商品总价
				break;
		}
	}//删除
	function del(num){
		switch(num){
			case 0:
				(del0.parentNode).parentNode.remove();
				break;
			case 1:
				(del1.parentNode).parentNode.innerText="";
				break;
		}
	}
</script>
</html>

owplace
关注
  • 5
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
javascript购物车详解实现购物车完整功能(附效果图，完整代码)
笨鸟学飞的博客
08-11 4万+
我们肯定都很熟悉商品购物车这一功能，每当我们在某宝某东上购买商品的时候，看中了哪件商品，就会加入购物车中，最后结算。购物车这一功能，方便消费者对商品进行管理，可以添加商品，删除商品，选中购物车中的某一项或几项商品，最后商品总价也会随着消费者的操作随着变化。
利用js实现购物车相关功能
weixin_63489869的博客
06-22 4721
利用js实现购物车相关功能
JS实现简单的购物车
dxn16638400024的博客
06-30 3405
中是否已经有该产品，有的话数量加一并更新，没有则创建一个新对象并添加到购物车列表中。同时，每次添加或删除购物车物品后都需要更新购物车总计。最后，点击结算按钮后将购物车清空并重置总金额。作为购物车中的物品，它的键是产品 ID，值是包含产品信息的对象。添加至购物车时，首先检查。由于是实现基本的功能，就不弄得多复杂了，代码可以直接Ctrl+c/v，大家可以试一试！这个简单的购物车实现使用了一个对象。
当当购物车页面_当当购物车页面_html网页购物车_js当当购物车_
10-01
当当购物车页面123123123651328156545156412354561654156
js小项目完善当当购物车页面《完善当当购物车页面计算总价》
haolan53的博客
06-18 288
【代码】js小项目完善当当购物车页面《完善当当购物车页面计算总价》
js实现购物车
m0_73481765的博客
06-30 3896
我们也添加了一个加入购物车的按钮，当这个按钮被点击时，我们会调用一个名为addToCart的函数。当用户点击“加入购物车”按钮时，商品将被添加到购物车中，并且购物车中商品的数量和总价将显示在HTML页面上。接下来，我们需要显示商品列表。我们将使用JavaScript循环遍历商品数组，并将每个商品的名称、价格和图片添加到HTML页面中。这个函数首先清空购物车HTML中的内容，然后遍历购物车数组，并将每个购物车物品的名称、价格和数量添加到HTML中。这个函数将从商品数组中取出商品，并将它添加到购物车数组中。
用JS实现购物车
热门推荐
小葵坤_易安的博客
05-13 1万+
一、原理 将商品加入购物车，实际上是将所选商品信息加入购物车的表里，我们所建的页面表是读取数据库里购物车的数据表，里面加了谁，就将其对应的数据获取出来放到建的页面表中 二、功能实现： 1.点“全选”前的复选框，将商品全部选择；再点一次，则取消选择 2.点”-“或”+“按钮，对所选商品数量进行增减 三、代码块 四、遇到的问题及解决方法 1.问题：点第一个“全选”按钮时，第二个“全选”按钮自动打钩，反...
JS实现购物车
qq_40513088的博客
12-24 719
JS实现购物车 1.实现思路： （1）在body中定义一个id="list",将所有商品存放在一个列表中，当进入购物车时如果有两个商品被勾选了，需要计算出总共的价钱和商品的件数以及最贵的商品价格； （2）在JS中获取元素属性，分别把它们存放在数组中； （3）点击加号进行商品添加，点击减号进行商品移除； （4）将上一步用两个点击函数来实现添加和移除； （5）在JS中用for循环来计算总价...
JS实现购物车动态功能
weixin_30933531的博客
05-25 5705
整理了一下当时学js写的一些案例，觉得购物车功能在一般网站比较常见且基础，现在把它整理出来，需要的小伙伴可以参考一下。 该案例购物车主要功能如下： 1、 商品单选、全选、反选功能 2、 商品添加、删除功能 3、 商品价格自动计算 具体效果： 打开效果 添加商品数量（自动计算价格）： 取消选择： 删除商品： 商品显示与隐藏： 做这个案例呢我用了之前自己封装的框架，所以需要的小伙伴，要到我的...
js实现购物车功能
10-18
JavaScript 实现购物车功能是网页应用中常见的需求，主要用于模拟现实世界中购物车的行为，如添加商品、删除商品、更新商品数量以及结算等。这里我们将探讨三种不同的实现方式，并通过具体的JS代码示例来理解其工作...
原生js实现购物车功能
01-18
本文实例为大家分享了js实现购物车功能的具体代码，供大家参考，具体内容如下 使用html配合原生js实现购物车功能 * 实现购物车商品数量的加减，注意数量最少为1，数量输入仅能为数字 * 实现购物车商品的移除 * 可以...
JavaScript实现购物车功能
04-11
在JavaScript实现购物车功能的过程中，会涉及到多个关键知识点，这些技术是前端开发中不可或缺的部分。以下将详细阐述这些知识点： 1. **购物车计算价格**：这是购物车的核心功能之一，需要对每件商品的价格与数量...
基于JavaScript实现购物车功能
10-20
在JavaScript实现购物车功能时，我们通常会涉及到前端交互、数据存储、动态更新以及计算等核心知识点。以下是对这些知识点的详细说明： 1. **前端交互**：在本例中，用户通过点击“我的购物车”按钮（`#btAdd`）来...
js实现购物车基本功能
m0_71606684的博客
05-28 399
js实现购物车加、减、单选、全选、删除、价格总汇、数量总汇；
纯JS实现购物车&jQuery实现购物车
m0_74315688的博客
03-29 2244
JavaScript购物车。
【学习笔记46】JavaScript购物车的实现
yizhiyang
11-28 7366
JavaScript购物车的实现
【JavaScript】实现简易购物车
浅陌繁星的博客
01-19 6427
本文主要分享一个简易的使用JavaScript编写的购物车。功能实现了：全选、清空购物车、删除单条商品、数据渲染、总价格计算、删除选中物品、添加和减少商品数量并且实现了操作数据后在浏览器本地永久存储。
chromedriver-mac-arm64_126.0.6474.0.zip
最新发布
07-31
chromedriver-mac-arm64_126.0.6474.0.zip
用js实现购物车功能代码
06-08
好的，以下是一个简单的用 JavaScript 实现购物车功能的示例代码： HTML: ```html <div id="item-list"> <h3>商品列表</h3> <ul> <li data-id="1" data-name="商品1" data-price="10">商品1 - 10元</li> <li data-id="2" data-name="商品2" data-price="20">商品2 - 20元</li> <li data-id="3" data-name="商品3" data-price="30">商品3 - 30元</li> </ul> </div> <div id="cart"> <h3>购物车</h3> <ul id="cart-items"></ul> <p id="total-price">总价：0元</p> </div> ``` JavaScript: ```javascript // 获取商品列表和购物车元素 const itemList = document.getElementById('item-list'); const cart = document.getElementById('cart'); const cartItems = document.getElementById('cart-items'); const totalPrice = document.getElementById('total-price'); // 初始化购物车数据 let cartData = []; // 监听商品列表的点击事件 itemList.addEventListener('click', e => { // 获取点击的商品元素 const item = e.target.closest('li'); if (!item) return; // 获取商品的 id、名称和价格 const id = item.dataset.id; const name = item.dataset.name; const price = +item.dataset.price; // 查找购物车中是否已经存在该商品 const cartItem = cartData.find(item => item.id === id); if (cartItem) { // 如果购物车中已经存在该商品，则增加数量 cartItem.quantity++; cartItem.price += price; cartItems.querySelector(`li[data-id="${id}"]`).textContent = `${name} x ${cartItem.quantity} - ${cartItem.price}元`; } else { // 如果购物车中不存在该商品，则添加到购物车 const newCartItem = { id, name, price, quantity: 1, }; cartData.push(newCartItem); const newCartItemElement = document.createElement('li'); newCartItemElement.dataset.id = id; newCartItemElement.textContent = `${name} x 1 - ${price}元`; cartItems.appendChild(newCartItemElement); } // 更新总价 const cartTotalPrice = cartData.reduce((total, item) => total + item.price, 0); totalPrice.textContent = `总价：${cartTotalPrice}元`; }); ``` 以上代码实现了一个简单的购物车功能，用户可以点击商品列表中的商品添加到购物车中，购物车中显示添加的商品名称、数量和价格，总价也会实时更新。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值