JavaScript实现html购物车代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<title>购物车</title>
<style>
input{
width:25px;
}
</style>
</head>
<body>
<div>
<table border="1" cellspacing="0" cellpadding="10px">
<thead>
<th><input type='checkbox'></th>
<th>商品</th>
<th>数量</th>
<th>单价</th>
<th>状态</th>
<th>库存</th>
<th>小计</th>
</thead>
<tbody>
<tr>
<td><input type='checkbox'></td>
<td>语音电子红外体温计枪</td>
<td>
<button class="jian">-</button>
<input type="number" maxlength="2" value="0" disabled>
<button class="jia">+</button>
</td>
<td>
69.00
</td>
<td>
有货
</td>
<td>20</td>
<td class="xiaoji"></td>
</tr>
<tr>
<td><input type='checkbox'></td>
<td>儿童防晒衣</td>
<td>
<button class="jian">-</button>
<input type="number" maxlength="2" value="0" disabled>
<button class="jia">+</button>
</td>
<td>
109.00
</td>
<td>
有货
</td>
<td>20</td>
<td class="xiaoji"></td>
</tr>
<tr>
<td><input type='checkbox'></td>
<td>小黄鸭玩具</td>
<td>
<button class="jian">-</button>
<input type="number" maxlength="2" value="0" disabled>
<button class="jia">+</button>
</td>
<td>
9.90
</td>
<td>
有货
</td>
<td>20</td>
<td class="xiaoji"></td>
</tr>
<tr>
<td><input type='checkbox'></td>
<td>儿童滑板车</td>
<td>
<button class="jian">-</button>
<input type="number" maxlength="2" value="0" disabled>
<button class="jia">+</button>
</td>
<td>
169.00
</td>
<td>
有货
</td>
<td>20</td>
<td class="xiaoji"></td>
</tr>
<tr>
<td><input type='checkbox'></td>
<td>轻薄长裤</td>
<td>
<button class="jian">-</button>
<input type="number" maxlength="2" value="0" disabled>
<button class="jia">+</button>
</td>
<td>
39.00
</td>
<td>
有货
</td>
<td>20</td>
<td class="xiaoji"></td>
</tr>
<tr>
<td><input type='checkbox'></td>
<td>儿童防蚊裤</td>
<td>
<button class="jian">-</button>
<input type="number" maxlength="2" value="0" disabled>
<button class="jia">+</button>
</td>
<td>
29.00
</td>
<td>
有货
</td>
<td>20</td>
<td class="xiaoji"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5"></td>
<td>总计</td>
<td class="total"></td>
</tr>
</tfoot>
</table>
</div>
<script type="text/javascript">
$(".jia").click(function () {
var num = $(this).prev().val();
if(num==20){
return;
}
$(this).prev().val(parseInt(++num));
$(this).parent().next().next().next().text(20-num)
if ($(this).parent().next().next().next().text()==0) {
$(this).parent().next().next().text('无货')
}
money ()
})
$(".jian").click(function () {
var num = $(this).next().val();
if(num==0){
return;
}
$(this).next().val(parseInt(--num));
$(this).parent().next().next().next().text(20-num)
$(this).parent().next().next().text('有货')
money ()
})
function money () {
var price=$('.jia').parent().next();
var num= $('.jia').prev();
var xiaoji = $('.xiaoji');
var sum = 0.0;
for (var i=0;i<price.length;i++) {
var price1 = parseFloat(price.eq(i).text());
var num1 = parseFloat(num.eq(i).val());
// alert(price1*num1)
xiaoji.eq(i).text((price1*num1).toFixed(2))
sum+=price1*num1;
}
$('.total').text(sum.toFixed(2));
}
</script>
</body>
</html>
JavaScript实现html购物车代码的更多相关文章
- JavaScript实现的购物车效果-效果好友列表
JavaScript实现的购物车效果.当然,可以在许多地方使用这种效果.朋友的.例如,在选择.人力资源模块,工资的计算,人才选拔等..下面来看一下班似有些车效果图: watermark/2/text/ ...
- 基于jquery右侧悬浮加入购物车代码
分享一款基于jquery右侧悬浮加入购物车代码.这是一款基于jQuery实现的仿天猫右侧悬浮加入购物车菜单代码. 在线预览 源码下载 实现的代码: <!--左侧产品parabola.js控制 ...
- 如何实现 javascript “同步”调用 app 代码
在 App 混合开发中,app 层向 js 层提供接口有两种方式,一种是同步接口,一种一异步接口(不清楚什么是同步的请看这里的讨论).为了保证 web 流畅,大部分时候,我们应该使用异步接口,但是某些 ...
- 【夯实PHP系列】购物车代码说明PHP的匿名函数
1. 定义:匿名函数(Anonymous functions),也叫闭包函数(closures),允许 临时创建一个没有指定名称的函数.最经常用作回调函数(callback)参数的值.当然,也有其它应 ...
- 在线运行Javascript,Jquery,HTML,CSS代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xht ...
- 《Secrets of the JavaScript Ninja》：JavaScript 之运行时代码
最近,在阅读 jQuery 之父 John Resig 力作:Secrets of the JavaScript Ninja(JavaScript忍者秘籍).关于第九章提及的 JavaScript 之 ...
- javascript 写一段代码，判断一个字符串中出现次数最多的字符串，并统计出现的次数
javascript 写一段代码,判断一个字符串中出现次数最多的字符串,并统计出现的次数 function test(){ var bt = document.getElementById(" ...
- JavaScript创建读取cookie代码示例【附：跨域cookie解决办法】
使用JavaScript 原生存取cookie代码示例: var cookie = { set : function(name, value, expires, path, domain, secur ...
- （Python基础）简单购物车代码
以下是最简单,最基础的购物车代码,一起学习,一起参考.product_list = [ ('Iphone',5800), ('Mac Pro',15800), ('car',580000), ('co ...
随机推荐
- Centos ps命令
输出格式(ps -aux) USER PID %CPU %MEM VSZ RSS TTY STAT START TIME COMMAND VSZ:占用的虚拟内存大小() RSS: COMMAND: 执 ...
- abp(net core)+easyui+efcore实现仓储管理系统——入库管理之十二(四十八)
abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...
- java实例化对象的几种方式
这里一共整理了四种方法 ①用类的new ()创建 ②用clone方法创建, 需要类实现 Cloneable 接口 ③通过反射机制创建 ④将一个对象实例化后,进行序列化,再反序列化 下面是实现代码 1) ...
- PAT1027 Colors in Mars (20分) 10进制转13进制
题目 People in Mars represent the colors in their computers in a similar way as the Earth people. That ...
- vue v-for 渲染input 输入有问题 解决方案
v-for循环input标签的时候输入信息两个输入框一同显示输入信息 解决方案: <input :placeholder="items.title" v-model = &q ...
- python操作excel----openpyxl模块
openpyxl模块支持.xls和.xlsx格式的excel创建,但是只支持.xlsx格式的读取操作,不支持.xls的读取(可以使用xlrd模块来读取,写入操作也可使用xlwt模块),也可使用pand ...
- 5.2 Go 包与函数
5.2 Go 包与函数 在多个包中相互调用函数,需要用到Go包的知识. 代码组织如下: 思路: 1.定义功能函数calc放入到utils.go,将utils.go放在utils文件夹/包中,当其他文件 ...
- kubernetes flannel pod CrashLoopBackoff解决
背景 某环境客户部署了一个kubernetes集群,发现flannel的pod一直重启,始终处于CrashLoopBackOff状态. 排查 对于始终CrashLoopBackOff的pod,一般是应 ...
- jQuery根据元素值删除数组元素的方法
http://www.jb51.net/article/68349.htm 本文实例讲述了jQuery根据元素值删除数组元素的方法.分享给大家供大家参考.具体如下: 例如删除C这个元素 ,前提不知道C ...
- Redis设计原理简介
学完MySQL InnoDB之后,又开始学习和研究Redis. 首先介绍下书:<Redis设计与实现>第二版 黄健宏著,机械工业出版社,388页,基于redis3.0版本.版本有点低,这个 ...