<!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. go多种uuid生成方式

    package main import ( "fmt" "github.com/chilts/sid" "github.com/kjk/betterg ...

  2. video 全屏，播放，隐藏控件。

    requestFullscreen全屏具体实现 1.进入全屏 function full(ele) { if (ele.requestFullscreen) { ele.requestFullscre ...

  3. Vue+Vuex实现自动登录 升级版

    Vue+Vuex实现自动登录 升级版 之前实现的版本在这里:Vue+Vuex实现自动登录       在之前实现的版本中,如果你进行测试,可以看到在浏览器的local Storage中,确实里面有了我 ...

  4. scrapy五大核心组件

    scrapy五大核心组件 引擎(Scrapy)用来处理整个系统的数据流处理, 触发事务(框架核心) 调度器(Scheduler)用来接受引擎发过来的请求, 压入队列中, 并在引擎再次请求的时候返回. ...

  5. 重学 Java 设计模式：实战工厂方法模式

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获!

  6. springmvc+mybatis 实现登录、注册、邮件激活等功能

    原创作品, 转载请注明来源

  7. codeforce 436 D贪心思维题Make a Permutation!

    D. Make a Permutation! time limit per test 2 seconds memory limit per test 256 megabytes input stand ...

  8. poj3764字典树路径最大异或和

    The xor-longest Path Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 6853   Accepted: 1 ...

  9. freemark+dom4j实现自动化word导出

    导出word我们常用的是通过POI实现导出.POI最擅长的是EXCEL的操作.word操作起来样式控制还是太繁琐了.今天我们介绍下通过FREEMARK来实现word模板导出. 目录 开发准备 模板准备 ...

  10. openxl模块从excel里面读取数据

    #excel读取数据 from openpyxl import load_workbook class Do_Excel: def __init__(self,file,work_space,inde ...