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 ...
随机推荐
- 武装你的WEBAPI-OData便捷查询
本文属于OData系列 目录(可能会有后续修改) 武装你的WEBAPI-OData入门 武装你的WEBAPI-OData便捷查询 武装你的WEBAPI-OData分页查询 武装你的WEBAPI-ODa ...
- Algorithms - Quicksort - 快速排序算法
相关概念 快速排序法 Quicksort 也是一个分治思想的算法. 对一个子数组 A[p: r] 进行快速排序的三步分治过程: 1, 分解. 将数组 A[p : r] 被划分为两个子数组(可能为空) ...
- 【雕爷学编程】Arduino动手做（3）---微波雷达感应开关模块
37款传感器和模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器与模块,依照实践(动手试试)出真知的理念,以学习和交流为目的,这里准备 ...
- vue组件试错
[Vue warn]: Property or method "child1" is not defined on the instance but referenced duri ...
- Selenium RemoteWebDriver 利用CDP修改User-Agent
地球人都知道,如果使用selenium时要修改user-agent可以在启动浏览器时添加配置项,如chromeOptions.addArguments("user-agent=xxx&quo ...
- SpringAOP注解报错：java.lang.IllegalArgumentException: error at ::0 can't find referenced pointcut selectAll
原因 我使用的aspectjweaver.jar版本是1.5.1,版本过低,导致报错. 需要下载高本版的aspectjweaver.jar. 解决办法 在这里下载:https://mvnreposit ...
- C# 使用RestClient 调用接口
最近做项目使用RestClient 向第三方接口推送数据.不废话直接贴代码 /// <summary> /// 获取Token /// </summary> /// <r ...
- JPA EntityManager 在没有实体类的情况下返回Map
JPA entityManager.createNativeQuery()执行原生的SQL,当我们查询结果没有对应的实体类时,query.getResultList()返回的是一个List<Ob ...
- vue项目中关闭eslint的方法
非常简单的操作方法!不用再去为了烦人的代码标准报错而苦恼了! 方法一:在项目根目录下增加 vue.config.js 文件 添加以下代码: module.exports = { lintOnSave: ...
- 第二篇-用Flutter手撸一个抖音国内版，看看有多炫
前言 继上一篇使用Flutter开发的抖音国际版 后再次撸一个国内版抖音,大部分功能已完成,主要是Flutter开发APP速度很爽, 先看下图 项目主要结构介绍 这次主要的改动在api.dart 及 ...