原生js模拟购物车功能
使用html配合原生js实现购物车功能，供大家参考，具体内容如下
* 实现购物车商品数量的加减，注意数量最少为1，数量输入仅能为数字
* 实现购物车商品的移除
* 可以在同一页面再设计几个商品信息，每个商品有价格，图片，名称，以及添加至购物车按钮，点击按钮后添加至购物车
* 实现购物车商品的总价计算
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品</title>
<style>
html,body{ margin: 0;}
.row{
width:100%;
height:300px;
}
.col{
width:200px;
height:216px;
margin: 0px 1px 0px 1px; padding-top: 2px;
border:solid black 1px;
float:left;
text-align:center;
}
.col img { width: 150px;}
</style>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
function calculate() {
var tbody = document.getElementById("tb");
var prices = tbody.querySelectorAll("td:nth-child(4)");
var numbers = tbody.querySelectorAll("td:nth-child(5)>input[type=number]");
var checkboxes = tbody.querySelectorAll("th:nth-child(1)>input");
//console.log(prices);
//console.log(numbers);
//console.log(checkboxes);
var total=0;
for(var i = 0; i < prices.length; i++) {
console.log("价格：" +parseInt(prices[i].innerText)+" 数量："+parseInt(numbers[i].value) + "是否勾选:" + checkboxes[i].checked);
if(checkboxes[i].checked){
total += parseInt(prices[i].innerText)*parseInt(numbers[i].value);
}
}
console.log("总价格：" + total);
document.getElementById("total").innerText = total;
}
// 移除商品
function del(me) {
var tr = me.parentNode.parentNode;
var tbody = tr.parentNode;
tbody.removeChild(tr);
calculate();
}
// 增加商品数量
function jia(me) {
var td = me.parentNode;
var inputs = td.getElementsByTagName("input"); // 找到此td下所有input标签
// inputs[1].value = inputs[1].value - 0 + 1; // 用-0的办法转为数字
// parseInt 将字符串转整数 parseFloat 将字符串转小数
inputs[1].value = parseInt(inputs[1].value) + 1;
calculate();
}
// 减少商品数量
function jian(me) {
var td = me.parentNode;
var num = td.querySelector("input[type=number]");// 只查找有type=number属性的input标签
var r = num.value - 1;
if( r >= 1) { // 只有减得的结果是大于等于1的情况下才需要改变文本框的值
num.value = r;
calculate();
}
}
// 改变复选框的选中状态
function check(me) {
var tbody = document.getElementById("tb");
var inputs = tbody.querySelectorAll("th input");
for(var i = 0; i <inputs.length; i++) {
inputs[i].checked = me.checked; // 根据me的checked状态去修改下面的每个checked状态
}
calculate();
}
// 添加商品至购物车
function add(me) {
var tbody = document.getElementById("tb");
var div = me.parentNode;
var spans = div.getElementsByTagName("span"); // 获得商品名字和价格的span
var name = spans[0].innerText; // 获得商品名字
var col_1 = tbody.querySelectorAll("td:nth-child(2)"); // nth-child 作为第几个孩子
var found = null; // found 变量代表购物车中找到的td
for(var i = 0; i<col_1.length; i++) {
if( col_1[i].innerText == name) {
found = col_1[i];
break;
}
}
if(found != null) { //商品名字存在
// 修改数量 found 是找到的td
var tr = found.parentNode;
var input = tr.querySelector("td:nth-child(5)>input:last-child");
console.log(input);
jia(input);
} else { //商品名字不存在
// 添加商品
var tr = document.createElement("tr");
var th = document.createElement("th");
th.innerHTML = '<input type="checkbox" checked onclick="calculate()">';
var td1 = document.createElement("td");
td1.innerText = spans[0].innerText;
var td2 = document.createElement("td");
var img = document.createElement("img");
img.src = div.getElementsByTagName("img")[0].src;
img.width = "100";
td2.appendChild(img);
var td3 = document.createElement("td");
td3.innerText = spans[1].innerText;
var td4 = document.createElement("td");
td4.innerHTML = '<input type="button" value="-" onclick="jian(this)"><input type="number" value="1"><input type="button" value="+" onclick="jia(this)">';
var td5 = document.createElement("td");
td5.innerHTML = '<input type="button" value="移除" onclick="del(this)">';
tr.appendChild(th);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
tr.appendChild(td5);
tbody.appendChild(tr);
calculate();
}
}
</script>
</head>
<body>
<!--这里写购物车代码-->
<div>
<table border="1" width="100%">
<thead>
<tr>
<th><input type="checkbox" onclick="check(this)"></th>
<th>图片</th>
<th>名称</th>
<th>价格</th>
<th>数量</th>
<th>移除</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<th><input type="checkbox" onclick="calculate()"></th>
<td>商品1</td>
<td><img src="images/5a0cf6bfN92a5a597.jpg" width="100"></td>
<td>3000.00</td>
<td>
<input type="button" value="-" onclick="jian(this)">
<input type="number" value="1">
<input type="button" value="+" onclick="jia(this)">
</td>
<td><input type="button" value="移除" onclick="del(this)"></td>
</tr>
<tr>
<th><input type="checkbox" onclick="calculate()"></th>
<td>商品2</td>
<td><img src="images/5a0cf672N3c785b7a.jpg" width="100"></td>
<td>2000.00</td>
<td>
<input type="button" value="-" onclick="jian(this)">
<input type="number" value="1">
<input type="button" value="+" onclick="jia(this)">
</td>
<td><input type="button" value="移除" onclick="del(this)"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6">总价<span id="total">0</span> 元</td>
</tr>
</tfoot>
</table>
</div>
<!-- 商品列表 -->
<div class="row">
<div class="col">
<p><span>商品1</span>价格:<span>3000.00</span></p>
<img src="images/5a0cf6bfN92a5a597.jpg">
<input type="button" value="添加至购物车" onclick="add(this)">
</div>
<div class="col">
<p><span>商品2</span>价格:<span>2000.00</span></p>
<img src="images/5a0cf672N3c785b7a.jpg">
<input type="button" value="添加至购物车" onclick="add(this)">
</div>
<div class="col">
<p><span>商品3</span>价格:<span>4000.00</span></p>
<img src="images/5a1f5ed3Nfa577958.jpg">
<input type="button" value="添加至购物车" onclick="add(this)">
</div>
<div class="col">
<p><span>商品4</span>价格:<span>3500.00</span></p>
<img src="images/5a1f5664Nfa934fac.jpg">
<input type="button" value="添加至购物车" onclick="add(this)">
</div>
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js实现购物车功能
本文实例为大家分享了js实现购物车功能的具体代码,供大家参考,具体内容如下 购物车实现3种方式 1.利用cookie 优点:不占用服务器资源,可以永远保存,不用考虑失效的问题 缺点: 对购买商品的数量是有限制的,存放数据的大小 不可以超过2k,用户如果禁用cookie那么就木有办法购买商品,卓越网实现了用户当用户禁用cookie,也可以购买. 2.利用 session 优点:用户禁用cookie,也可以购物 缺点:占用服务器资源,要考虑session失效的问题 3.利用数据库 优点:可以记录用户
-
Javascript操纵Cookie实现购物车程序
复制代码 代码如下: /***************************************************************************************************** Name 购物车 Version 1.1 Author Vanni(凡林) url:www.27sea.com QQ:303590170 CreateDate 2005-05-31 Description 此类是基于JavaScript和客户端Cookie,请保证客户端开
-
Jsp+Servlet实现购物车功能
本文实例为大家分享了Servlet实现购物车功能的具体代码,供大家参考,具体内容如下 (1)用servlet实现简单的购物车系统,项目结构例如以下:(新建web Project项目 仅仅须要AddItemServlet , ListItemServlet.exam403.jsp三个文件就可以.其它的不用管) (2)exam403.jsp代码例如以下: <%@ page contentType="text/html; charset=gb2312" language="
-
简单的前端js+ajax 购物车框架(入门篇)
今天在公司实在没有事做,突然就想到写下商城的购物车的前端框架,当然我这里只有购物车的增删改查,也许写的并不是那么完善,但最重要的是一个入门,也希望js达人给些建议,好让我更上一个台阶. HOHO~~~开始咯: Js: 复制代码 代码如下: //为了省事,就没写自己的js ajax了 用了jquery的,当然你也可以添加到jquery的扩展方法内,哈哈,我太懒了,所以就写这里了. var _$ = { AJAX: function (urlparm, d, beforecall, successc
-
vuejs手把手教你写一个完整的购物车实例代码
由于我们公司是主营业务是海淘,所以每个项目都是类似淘宝天猫之类的商城,那么购物车就是一个重点开发功能模块.介于之前我都是用jq来写购物车的,这次就用vuejs来写一个购物车.下面我就从全选,数量控制器,运费,商品金额计算等方法来演示一下一个能用在实际场景的购物车是怎么做出来的以及记录一下这次用vuejs踩过的坑. 1.一层数据结构-全选 下面这段代码和vuejs官网里面checkbox绑定很像.不明白的可以直接上vuejs官网看看. <!DOCTYPE html> <html lang=
-
js实现简单的购物车有图有代码
如图: 全选按钮的实现为: 复制代码 代码如下: <input type="checkbox" name="all" onclick="checkAll()" />全选<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> <input t
-
JavaScript编写一个简易购物车功能
网上关于购物车实现的代码非常多,今天看了一些知识点,决定自己动手写写,于是写了一个简易购物车,接下来讲解一下具体的实现. 1.用html实现内容: 2.用css修饰外观: 3.用js(jq)设计动效. 第一步:首先是进行html页面的设计,我用一个大的div将所有商品包含,然后用不同的div将不同的商品进行封装,商品列表中我用了ul li实现,具体实现代码如下(代码中涉及到的商品都是网上随便copy的,不具有参考价值): <div id="goods"> <div c
-
js购物车实现思路及代码(个人感觉不错)
复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServer
-
原生js模拟淘宝购物车项目实战
本文实例讲述了原生js模拟淘宝购物车实现代码.分享给大家供大家参考.具体如下: 通过JavaScript实现类似与淘宝的购物车效果,包括商品的单选.全选.删除.修改数量.价格计算.数目计算.预览等功能的实现.实现的效果图: 相应的代码: shoppingCart.html <!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>JavaScript实现购物车项
-
Javascript实现购物车功能的详细代码
我们肯定都很熟悉商品购物车这一功能,每当我们在某宝某东上购买商品的时候,看中了哪件商品,就会加入购物车中,最后结算.购物车这一功能,方便消费者对商品进行管理,可以添加商品,删除商品,选中购物车中的某一项或几项商品,最后商品总价也会随着消费者的操作随着变化. 现在,笔者对购物车进行了简单实现,能够实现真实购物车当中的大部分功能.在本示例当中,用到了javascript中BOM操作,DOM操作,表格操作,cookie,json等知识点,同时,采用三层架构方式对购物车进行设计,对javascript的