<!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. JDBC13 ORM02 Map封装

    用Map封装一条信息 conn=Utils.getConn(); ps=conn.prepareStatement("select Empname,birthday,salary from ...

  2. [hdu4416 Good Article Good sentence]后缀自动机SAM

    题意:给出串A和串集合B={B1,B2,...,Bn},求串A的所有不同子串中不是B中任一串的子串的数目. 思路:把A和B中所有字符串依次拼接在一起,然后构造后缀自动机,计算每个状态的R集合元素的最大 ...

  3. html5 canvas画云

    使用函数画出天空的云层图像: y 主要使用到的是数学的圆与弧度之间转换关系: 代码如下 //div对象 var parentContainer = document.getElementById(&q ...

  4. 201843 2019-2020-2 《Python程序设计》实验二报告

    201843 2019-2020-2 <Python程序设计>实验二报告 课程:<Python程序设计> 班级: 1843 姓名: 李新锐 学号:20184302 实验教师:王 ...

  5. 题解 P2421 【[NOI2002]荒岛野人】

    我的第一道数论紫题 首先,我们先看两个野人,他们相遇的充要条件是 \(C_i+P_i\times k\equiv C_j+P_j\times k\;(mod\;M)\) 其中\(k\)是第几年,且\( ...

  6. 【蓝桥杯C组】备赛基础篇之前缀和算法

    算法介绍: 设a为数组,a[i]中储存的是前i 个数(包括自己)的总和,相当于我们中学学过的前N项和,那么,弄成这样的好处是什么呢?假如我们要多次访问一段区间的总和,难道每次都加一次进行重复运算吗?? ...

  7. 复变函数-MINDMAPS-continuous updating

  8. DRF路由组件和渲染器组件

    参考博客:https://www.cnblogs.com/wupeiqi/articles/7805382.html

  9. 每次找Internet选项感到抓狂？一键打开！

    WIN+R运行,输入inetcpl.cpl,就可以打开了!

  10. 一看就懂之吐血整理的 Docker 学习笔记

    前言 随着devops的兴起,Docker 近年来越来越火,容器化概念也越来越火.此篇将带你瞬间入门Docker. Docker 概述 Docker 出现的背景 在我们的开发过程中,通常是这样的一种流 ...