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 ...
随机推荐
- 【漫画】JAVA并发编程 J.U.C Lock包之ReentrantLock互斥锁
在如何解决原子性问题的最后,我们卖了个关子,互斥锁不仅仅只有synchronized关键字,还可以用什么来实现呢? J.U.C包中还提供了一个叫做Locks的包,我好歹英语过了四级,听名字我就能马上大 ...
- fork...join的用法
如果希望在仿真的某一时刻同时启动多个任务,可以使用fork....join语句.例如,在仿真开始的 100 ns 后,希望同时启动发送和接收任务,而不是发送完毕后再进行接收,如下所示: initial ...
- Windows10系统优化（批处理）
经历过XP.Win7.Vista.Win8之后,Win10有了很大的改变,虽然Win10刚出时,非常糟糕,甚至很长一段时间被认为没有Win7,但是随着Win10的不断优化不断更新,已经慢慢的变得更好了 ...
- IDC预测2020云服务逆势增长!云服务器已成上云首选
IDC预测2020云服务逆势增长!云服务器已成上云首选 据IDC最新预测指出,2020年IT基础设施支出今年将增长约4%,达到2370亿美元,驱动力主要来源于云服务. 受疫情的影响,不少企业开源节流, ...
- 【clear linux】intel clear linux 电源状态命令
# 重启系统 $ sudo systemctl reboot # 关闭系统,切断电源 $ sudo systemctl poweroff # CPU停止工作 $ sudo systemctl halt ...
- Zabbix-部署
目录 一. apt安装 Zabbix 部署结构图和主机环境 1.1 Zabbix-server 安装配置 1.1.1 安装zabbix仓库 1.1.2 安装Zabbix server.web前端.ag ...
- 【遗传编程/基因规划】Genetic Programming
目录 背景介绍 程序表示 初始化 (Initialization) Depth定义 Grow方法 Full方法 Ramped half-and-half方法 适应度(Fitness)与选择(Selec ...
- 汉语分词工具包jieba
#分词pip install jieba import jieba str="你真的真不知道我是谁吗?" res1=jieba.cut(str) print(list(res1)) ...
- BZOJ 1070 拆点 费用流
1070: [SCOI2007]修车 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 5860 Solved: 2487[Submit][Status] ...
- 博客管理与文章发布系统-第三方模块及其用法Part1
写个帖子记录一下自己写的第一个express完整项目. 所需第三方模块及其用法. 一.先把所需文件和准备工作写一下 写项目前的准备 1.创建所需文件夹 public 静态资源 model 数据库操作 ...