<!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. 设计模式之GOF23中介者模式

    中介者模式Mediator 场景:公司中各个部门需要交互,通过中介总经理进行交互 核心: 如果一个系统中对象之间的联系成网状结构,对象之间多对多,将导致关系极其复杂,这些对象统称为“同事关系” 我们可 ...

  2. [hdu5399 Too Simple]YY

    题意:m个{1,2...n}→{1,2...,n}的函数,有些已知有些未知,求对任意i∈{1,2,...,n},f1(f2(...(fm(i)))=i的方案总数,为了方便简记为F(i) 思路:如果存在 ...

  3. Elasticsearch系列---几个高级功能

    概要 本篇主要介绍一下搜索模板.映射模板.高亮搜索和地理位置的简单玩法. 标准搜索模板 搜索模板search tempalte高级功能之一,可以将我们的一些搜索进行模板化,使用现有模板时传入指定的参数 ...

  4. dedecms_v5.7的apache文件名解析漏洞的学习

    0x00 Apache文件名解析漏洞 Apache是一个Web服务器,可以提供web服务.配合java中间件.PHP实现动态页面访问. Apache和PHP通过接口接入后,Apache接受用户的请求, ...

  5. spring mvc json返回防止乱码

    乱码问题 乱码一直是编程的常见问题,spring mvc 返回json数据时可能导致乱码,需要在controller中添加如下代码: @RequestMapping("/test" ...

  6. 使用反射模拟struts2属性注入功能

    1.在项目开发中,如果没有使用框架进行数据绑定与封装,则可能会写大量的类似下面的代码: String value=request.getParameter("v"); if(nul ...

  7. Postman学习之Authorization

    前言:本章将学习Postman当中的授权——Authorization 一.简介 Authorization顾名思义就是授权的意思,那是给谁授权呢?又有多少种授权的方式呢?Authorization是 ...

  8. 树莓派ssh总掉线

    之前入手了一个树莓派,但是远程ssh连接经常掉线,开始以为是电源不行,导致机器重启,后面加了一个显示器,观察了一段时间,发现机器并没有重启,应该是WiFi掉线了,在网上发现,树莓派如果一段网络没有流量 ...

  9. React:form

    表单控件: input 文档在介绍控件之前,先提到了react组件自身的一个特点:状态由state掌控,改变组件状态只能用setState方法. 而在html的表单里,input.radio.chec ...

  10. storm-redis 详解

    多的不说,先来代码分析,再贴我自己写的代码.如果代码有错误,求更正.. 导入两个关键包,其他项目需要的包,大家自己导入了,我pom下的包太多,不好一下扔上来. <dependency> & ...