<!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购物车代码的更多相关文章

  1. JavaScript实现的购物车效果-效果好友列表

    JavaScript实现的购物车效果.当然,可以在许多地方使用这种效果.朋友的.例如,在选择.人力资源模块,工资的计算,人才选拔等..下面来看一下班似有些车效果图: watermark/2/text/ ...

  2. 基于jquery右侧悬浮加入购物车代码

    分享一款基于jquery右侧悬浮加入购物车代码.这是一款基于jQuery实现的仿天猫右侧悬浮加入购物车菜单代码. 在线预览   源码下载 实现的代码: <!--左侧产品parabola.js控制 ...

  3. 如何实现 javascript “同步”调用 app 代码

    在 App 混合开发中,app 层向 js 层提供接口有两种方式,一种是同步接口,一种一异步接口(不清楚什么是同步的请看这里的讨论).为了保证 web 流畅,大部分时候,我们应该使用异步接口,但是某些 ...

  4. 【夯实PHP系列】购物车代码说明PHP的匿名函数

    1. 定义:匿名函数(Anonymous functions),也叫闭包函数(closures),允许 临时创建一个没有指定名称的函数.最经常用作回调函数(callback)参数的值.当然,也有其它应 ...

  5. 在线运行Javascript,Jquery,HTML,CSS代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xht ...

  6. 《Secrets of the JavaScript Ninja》：JavaScript 之运行时代码

    最近,在阅读 jQuery 之父 John Resig 力作:Secrets of the JavaScript Ninja(JavaScript忍者秘籍).关于第九章提及的 JavaScript 之 ...

  7. javascript 写一段代码，判断一个字符串中出现次数最多的字符串，并统计出现的次数

    javascript 写一段代码,判断一个字符串中出现次数最多的字符串,并统计出现的次数 function test(){ var bt = document.getElementById(" ...

  8. JavaScript创建读取cookie代码示例【附：跨域cookie解决办法】

    使用JavaScript 原生存取cookie代码示例: var cookie = { set : function(name, value, expires, path, domain, secur ...

  9. （Python基础）简单购物车代码

    以下是最简单,最基础的购物车代码,一起学习,一起参考.product_list = [ ('Iphone',5800), ('Mac Pro',15800), ('car',580000), ('co ...

随机推荐

  1. burpsuite抓包无法识别POST参数问题

    直接拿一道bugkuctf中的题目进行测试 这道题目就是用POST方法上传what=flag 我们利用burpsuite进制抓包 需要更改三个部分,这样就可以解决burpsuite无法识别POST参数 ...

  2. Wfuzz使用学习

    工具用了不总结,使用命令很容易生疏,今天就把笔记梳理总结一下. 0x01 简介 WFuzz是用于Python的Web应用程序安全性模糊工具和库.它基于一个简单的概念:它将给定有效负载的值替换对FUZZ ...

  3. 我，不是说了PID要平均值吗？

    前几日写了一篇PID算法学习笔记,并幻想了一个场景进行算法仿真.经过不断探索后,博主发现,PID算法的精髓不在算法逻辑,而在于PID三个参数的值.本篇随笔将延续上次的仿真实验进行调试,总结PID调参的 ...

  4. Django之forms.Form

    django中的form组件提供了普通表单提交及验证数据的主要功能: 1.    生成页面可用的HTML标签 2.    对用户提交的数据进行验证 3.    可保留用户上次提交的数据 django中 ...

  5. Django模板之自定义过滤器/标签/组件

    自定义步骤: 1.     在settings中的INSTALLED_APPS配置当前app,不然django无法找到自定义的simple_tag. 2.     在app应用中创建templatet ...

  6. Django之urls.py路由配置(URLConf)

    urls.py路由配置(URLConf) URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调用的视图函数之间的映射表. 基本格式: Django1.x版本 ...

  7. MyBatis In的使用

    http://blog.csdn.net/unei66/article/details/17792503 MyBatis In的使用 标签: mybatisin 2014-01-03 16:23 74 ...

  8. FTP上传 -首先上传文件到的那台电脑得安装ftp

    /*↓↓↓↓ add upload ftp file 2014-03-16*/        /*↓↓↓↓ add 2014-03-16 ftp upload file*/    var $ftpse ...

  9. HDU 6047 贪心思维题

    Maximum Sequence Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  10. 前端知识点也可以当做面试题含vue

    一.webpack3.x打包工具 三大组成结构.package.json.webpack.config.js.serve.js 1.Package.json:下载目录需要的依赖包 2.Webpack. ...