js实现简单购物车模块
本文实例为大家分享了js实现简单购物车模块的具体代码，供大家参考，具体内容如下
主要功能
- 输入框正则判断，两位数小数，开头可以为0
- 如果商品名字相同，自动数量+1，如果名字相同，价格不同，以最新价格为准（有bug，多个商品无法操作。程序混乱，随后在改）
- 选住商品，或添加减少数量，都会自动更新右下角的价格和数量
- 结算过的商品自动消失
源码：
1.html
<body>
<div id="head" align="center">
<form>
<span class="font1">名称：</span><input type="text" id="name">
<span class="font1">单价：</span><input type="text" id="price">
<input id="add1" type="button" value="添加">
<input id="pay1" type="button" value="结算">
<input id="set1" type="reset" value="重置">
</form>
</div>
<div>
<table border="1" id="t" >
<thead>
<tr align="center">
<td><input type="checkbox" style='cursor: pointer'></td>
<td>商品名称</td>
<td>价格</td>
<td>数量</td>
<td>操作</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div align="right" id="b">
<span>总价：</span>
<span id="Total" style="color: red">0</span>
<span>商品数量：</span>
<span id="TotalNum" style="color: red">0</span>
</div>
</body>
2.css
<style>
body{
background-color: coral;
}
#head{
margin:30px auto 10px auto;
}
#name,#price{
background-color: aquamarine;
}
#add1,#pay1,#set1{
color: red;
font-weight: bold;
background-color: gold;
cursor: pointer;
}
.font1{
font-weight: bold;
font-size: large;
}
#t,#b{
border-collapse: collapse;
margin: 30px auto;
width: 600px;
}
#t thead{
border: 3px solid gold;
color: white;
background-color: blue;
}
#t tbody{
color: #1414bf;
background-color: white;
}
</style>
js部分
<script src="../lib/jquery-3.3.1.js"></script>
<script>
//初始化按钮
function initButton(){
$("input[name=j1]").off();
$("input[name=x1]").off();
//添加数量按钮
$("input[name=j1]").on("click", function (){
var num = parseInt($(this).prev().val());
if (num > 1){
$(this).prev().prev().attr("disabled",false);
}
if (num > 9){
$(this).attr("disabled","disabled");
return;
}
num++;
if (num > 1){
$(this).prev().prev().attr("disabled",false);
}
if (num > 9){
$(this).attr("disabled","disabled");
}
$(this).prev().val(num);
$("#Total").text(cal());
$("#TotalNum").text(calNum());
}
)
//减少数量按钮
$($("input[name=x1]")).click(function (){
var num = parseInt($(this).next().val());
if (num-1 < 10){
$("#add1").prop("disabled",false);
}
num--;
if (num < 10){
$(this).next().next().prop("disabled",false);
}
if (num == 1){
$(this).prop("disabled","disabled");
}
$(this).next().val(num);
$("#Total").text(cal());
$("#TotalNum").text(calNum());
});
}
//初始化删除
function initdelete(){
$(".delete").on("click",function (){
$(this).parent().parent().remove();
$("#Total").text(cal());
$("#TotalNum").text(calNum());
});
}
//全选或全不选功能
$("thead input[type=checkbox]").on("click",function (){
$("tbody input[type=checkbox]").each(function (index,element){
$(this).prop("checked",$("thead input[type=checkbox]").prop("checked"));
$("#Total").text(cal());
$("#TotalNum").text(calNum());
});
})
//初始化每个选框选中的方法
function initCheckBox(){
$("tbody input[type=checkbox]").off();
$("tbody input[type=checkbox]").on("change",function (){
$("#Total").text(cal());
$("#TotalNum").text(calNum());
});
}
//计算总价
function cal(){
var price = null;
$("tbody input[type=checkbox]:checked").each(function (){
var priceByOne = parseFloat($(this).parent().next().next().text());
var num = parseFloat($(this).parent().next().next().next().find("input[name='num']").val());
var totalMoneyByone = priceByOne * num;
price+= totalMoneyByone ;
});
return price;
}
//计算总的数量
function calNum(){
var totalNum = null;
$("tbody input[type=checkbox]:checked").each(function (){
var num = parseInt($(this).parent().next().next().next().find("input[name='num']").val());
totalNum+=num;
});
return totalNum;
}
//结算
$("#pay1").on("click",function (){
alert("一共消费："+cal());
$("thead input[type=checkbox]:checked").prop("checked",false);
$("tbody input[type=checkbox]:checked").parent().parent().remove();
});
//添加
$("#add1").on("click",function (){
var name = $("#name").val();
var price = $("#price").val();
var priceZ = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/
if ((name == "" || price == "") ||(!priceZ.test(price)) ){
alert("输入错误！");
}else {
var GameArr = [];
var flag = false;
var repeat = null;
//得到名字数组
$("tbody").each(function (){
var finds = $(this).find(".goodsName");
for (let i = 0; i < finds.length; i++) {
GameArr.push(finds.eq(i).text());
}
});
for (let i = 0; i < GameArr.length; i++) {
if (name == GameArr[i]){
repeat = i;
flag = true;
break;
}}
//如果有相同名字，改数量和价格
if (flag == true){
var totalNum = parseInt($("tbody:eq(" + repeat + ")").find("input[name='num']").val())+1;
if (totalNum > 9){
$(this).attr("disabled","disabled");
}
$("tbody:eq(" + repeat + ")").find("input[name='num']").val(totalNum);
$("tbody:eq(" + repeat + ")").find(".goodsPrice").text(price);
//否则拼接表格
}else {
var goods = "<tr>"+
"<td><input type='checkbox' style='cursor: pointer'></td>"+
"<td class='goodsName'>"+name+"</td>"+
"<td class='goodsPrice'>"+price+"</td>"+
"<td>"+
"<input type='button' value='-' name='x1' style='cursor: pointer'> "+
"<input type='text' value='1' name='num'> "+
"<input type='button' value='+' name='j1' style='cursor: pointer'>"
+"</td>"+
'<td><a href="" class=" rel="external nofollow" delete" style="color:red">删除</a></td>' +
"</tr>"
$("tbody").append(goods);
//每次添加完，绑定事件
initButton();
initdelete();
initCheckBox();
}}
});
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript编写一个简易购物车功能
网上关于购物车实现的代码非常多,今天看了一些知识点,决定自己动手写写,于是写了一个简易购物车,接下来讲解一下具体的实现. 1.用html实现内容: 2.用css修饰外观: 3.用js(jq)设计动效. 第一步:首先是进行html页面的设计,我用一个大的div将所有商品包含,然后用不同的div将不同的商品进行封装,商品列表中我用了ul li实现,具体实现代码如下(代码中涉及到的商品都是网上随便copy的,不具有参考价值): <div id="goods"> <div c
-
js实现仿购物车加减效果
效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } body{ overflow-y: auto; } ul{ margin-top: 20px; border-top: 1px solid #666; } h1{ widt
-
Javascript操纵Cookie实现购物车程序
复制代码 代码如下: /***************************************************************************************************** Name 购物车 Version 1.1 Author Vanni(凡林) url:www.27sea.com QQ:303590170 CreateDate 2005-05-31 Description 此类是基于JavaScript和客户端Cookie,请保证客户端开
-
简单的前端js+ajax 购物车框架(入门篇)
今天在公司实在没有事做,突然就想到写下商城的购物车的前端框架,当然我这里只有购物车的增删改查,也许写的并不是那么完善,但最重要的是一个入门,也希望js达人给些建议,好让我更上一个台阶. HOHO~~~开始咯: Js: 复制代码 代码如下: //为了省事,就没写自己的js ajax了 用了jquery的,当然你也可以添加到jquery的扩展方法内,哈哈,我太懒了,所以就写这里了. var _$ = { AJAX: function (urlparm, d, beforecall, successc
-
Jsp+Servlet实现购物车功能
本文实例为大家分享了Servlet实现购物车功能的具体代码,供大家参考,具体内容如下 (1)用servlet实现简单的购物车系统,项目结构例如以下:(新建web Project项目 仅仅须要AddItemServlet , ListItemServlet.exam403.jsp三个文件就可以.其它的不用管) (2)exam403.jsp代码例如以下: <%@ page contentType="text/html; charset=gb2312" language="
-
js购物车实现思路及代码(个人感觉不错)
复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServer
-
vuejs手把手教你写一个完整的购物车实例代码
由于我们公司是主营业务是海淘,所以每个项目都是类似淘宝天猫之类的商城,那么购物车就是一个重点开发功能模块.介于之前我都是用jq来写购物车的,这次就用vuejs来写一个购物车.下面我就从全选,数量控制器,运费,商品金额计算等方法来演示一下一个能用在实际场景的购物车是怎么做出来的以及记录一下这次用vuejs踩过的坑. 1.一层数据结构-全选 下面这段代码和vuejs官网里面checkbox绑定很像.不明白的可以直接上vuejs官网看看. <!DOCTYPE html> <html lang=
-
原生js模拟淘宝购物车项目实战
本文实例讲述了原生js模拟淘宝购物车实现代码.分享给大家供大家参考.具体如下: 通过JavaScript实现类似与淘宝的购物车效果,包括商品的单选.全选.删除.修改数量.价格计算.数目计算.预览等功能的实现.实现的效果图: 相应的代码: shoppingCart.html <!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>JavaScript实现购物车项
-
js实现简单的购物车有图有代码
如图: 全选按钮的实现为: 复制代码 代码如下: <input type="checkbox" name="all" onclick="checkAll()" />全选<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> <input t
-
Javascript实现购物车功能的详细代码
我们肯定都很熟悉商品购物车这一功能,每当我们在某宝某东上购买商品的时候,看中了哪件商品,就会加入购物车中,最后结算.购物车这一功能,方便消费者对商品进行管理,可以添加商品,删除商品,选中购物车中的某一项或几项商品,最后商品总价也会随着消费者的操作随着变化. 现在,笔者对购物车进行了简单实现,能够实现真实购物车当中的大部分功能.在本示例当中,用到了javascript中BOM操作,DOM操作,表格操作,cookie,json等知识点,同时,采用三层架构方式对购物车进行设计,对javascript的