<!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. 云小课 | WAF反爬虫“三板斧”：轻松应对网站恶意爬虫

    描述:反爬虫是一个复杂的过程,针对爬虫常见的行为特征,WAF反爬虫三板斧——Robot检测(识别User-Agent).网站反爬虫(检查浏览器合法性)和CC攻击防护(限制访问频率)可以全方位帮您解决业 ...

  2. [zoj3629]找规律

    题意:a[n] = ([n/1] + [n/2] + ... + [n/n]) & 1 == false,找出a数组的规律来就ok了. #pragma comment(linker, &quo ...

  3. 黑马程序员_毕向东_Java基础视频教程——赋值（随笔）

    赋值 class Test{ public static void main(String[] args) { int i = 3; // += -= *= /= %= 它们凑一块成为一个运算符 x ...

  4. 什么是 Nginx?

    Nginx (engine x) 是一款轻量级的 Web 服务器 .反向代理服务器及电子邮件(IMAP/POP3)代理服务器. 什么是反向代理? 反向代理(Reverse Proxy)方式是指以代理服 ...

  5. LTC6804读写配置寄存器

    一.写配置寄存器步骤及函数封装 写配置寄存器 1.把CSB拉低至低电平: 2.发送WRCFG命令(0x00 0x01)及其PEC(0x3D 0x6E): 3.发送配置寄存器的CFGR0字节,然后继续发 ...

  6. java新学者（二）

    一.构造方法的特点 创建新的对象 A a =new A (); 二.抽象类和抽象方法的特点是什么? .抽象类使用abstract修饰: .抽象类不能实例化,即不能使用new关键字来实例化对象: .含有 ...

  7. 取经四人组SQL

    一.表结构与数据 1.create table user1 (id int not null,user_name varchar(20) not null,over varchar(20) defau ...

  8. nodejs+express搭建小程序后台服务器

    本文使用node.js和express来为小程序搭建服务器.node.js简单说是运行在服务端的javascript:而express是node.js的一个Web应用框架,使用express可以非常简 ...

  9. 存储系列之 Linux ext2 概述

    引言:学习经典永不过时. 我们之前介绍过存储介质主要是磁盘,先介绍过物理的,后又介绍了虚拟的.保存在磁盘上的信息一般采用文件(file)为单位,磁盘上的文件必须是持久的,同时文件是通过操作系统管理的, ...

  10. Spring 基于注解的配置 简介

    基于注解的配置 从 Spring 2.5 开始就可以使用注解来配置依赖注入.而不是采用 XML 来描述一个 bean 连线,你可以使用相关类,方法或字段声明的注解,将 bean 配置移动到组件类本身. ...