需求
使用JS实现购物车功能02

具体代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>购物车02</title>

</head>

<body>

<table align="center" border="2" id = "shop">

<tr>

<th colspan="4" align="center">商品列表<input id="add" type="button" value="一键上架"></th>

</tr>

<tr>

<th>商品序号</th>

<th>商品名称</th>

<th>出售价格</th>

<th>操作</th>

</tr>

</table>

<br>

<br>

<br>

<br>

<br>

<table align="center" border="2" id = "cart">

<tr>

<th colspan="4" align="center">购物车<input id="clear" type="button" value="一键清空"></th>

</tr>

<tr>

<th>商品名称</th>

<th>商品价格</th>

<th>商品数量</th>

<th>操作</th>

</tr>

</table>

<h3 id="total" align="center">总价: ￥0.0</h3>

<script type="text/javascript">

var goods_name = ["阿尔卑斯棒棒糖","耳机","北京糖葫芦","智能扫地机器人"];

var goods_price = ["1.5","30","5","258"];

//一键上架

var add = document.getElementById("add");

add.onclick = function(){

var shop =  document.getElementById("shop");

for(var i = 0; i< goods_name.length;i++){

var row = shop.insertRow();

row.insertCell().innerHTML = i + 1;

row.insertCell().innerHTML = goods_name[i];

row.insertCell().innerHTML = "￥" + goods_price[i];

row.insertCell().innerHTML = "<button id='" + i + "' onclick='addCart(this);'>加入购物车</button>";

}

this.setAttribute("disabled", true);

}

var cartData = {

}

var index = 0;

//准备加入购物车的数据

function addCart(btn) {

var gname = goods_name[btn.id];

var gobj = cartData[gname];

if(!gobj){//没有数据

//新增一条数据

cartData[goods_name[btn.id]] = {

id:btn.id,

count:1,

index:index++

}

}else{

cartData[goods_name[btn.id]].count++;

}

//console.log(cartData);

showCart(cartData);

}

//加入购物车

function showCart(obj){

clearCart();

getTotal(obj);

var cart = document.getElementById("cart");

for(var k in obj){

var row = cart.insertRow();

row.insertCell().innerHTML = k;

row.insertCell().innerHTML = "￥" + goods_price[obj[k].id];

row.insertCell().innerHTML = obj[k].count;

row.insertCell().innerHTML = "<button id='" + k + "' onclick='deleteRow(this);'>删除</button>";

}

}

//清空购物车

var clear = document.getElementById("clear");

clear.onclick = function(){

clearCart();

cartData = {};

}

//清空购物车的方法

function clearCart(){

var cart = document.getElementById("cart");

var rows = cart.rows;

for(var i = rows.length - 1 ; i > 1 ; i--){

cart.deleteRow(i);

}

total = 0.0;

//更新总价

document.getElementById("total").innerHTML = "总价:￥" + total;

}

var total = 0.0;

//得到总价

function getTotal(obj){

for(var k in obj){

var subTotal = goods_price[obj[k].id] * obj[k].count;

total += subTotal;

}

//更新总价

document.getElementById("total").innerHTML = "总价:￥" + total;

}

//删除整行

function deleteRow(btn){

var cart = document.getElementById("cart");

var rowIndex = btn.parentNode.parentNode.rowIndex;

cart.deleteRow(rowIndex);

delete cartData[btn.id];

total = 0.0;

getTotal(cartData);

} 

</script>

</body>

</html>

效果图
样式比较丑，不要介意哈

JS实现购物车02的更多相关文章

  1. 原生JS实现购物车结算功能代码+zepto版

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

  2. JS膏集02

    JS膏集02 1.复习 函数也是对象 2.贪食蛇案例 <!DOCTYPE html> <html lang="en"> <head> <m ...

  3. JS自学笔记02

    JS自学笔记02 1.复习 js是一门解释性语言,遇到一行代码就执行一行代码 2.查阅mdn web文档 3.提示用户输入并接收,相比之下,alert只有提示的作用: prompt(字符串) 接收: ...

  4. JS实现购物车01

    需求 使用JS实现购物车功能01 具体代码 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  5. vue.js实现购物车功能

    购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新. 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3 ...

  6. 用vue.js实现购物车功能

    购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新. 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3 ...

  7. js实现购物车数量的增加与减少，js实现购物车数量的自增与自减

    js实现购物车数量的增加与减少,js实现购物车数量的自增与自减 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

  8. 原生JS实现购物车功能

    html <div class="catbox"> <table id="cartTable"> <thead> <t ...

  9. vue.js插件使用(02) vue-router

    概述 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的 ...

随机推荐

  1. linux 一些命令(2)

    1.查看centos版本 # lsb_release -a 2.查找大于1000M的文件 find / -type f -size +1000M -print0 | xargs -0 du –h

  2. 利用ansible-playbook从测试环境获取tomcat中java项目新版本发布到生产环境

    一.环境描述 安装有ansible的服务器:192.168.13.45 测试环境服务器:192.168.13.49 /home/app/api-tomcat/webapps/api.war为测试环境新 ...

  3. java生成二维码（最初版）

    研究了2个小时,发现自己竟然智障,用原先的图片覆盖另一个图片 package com.tz.util; import java.awt.Color;import java.awt.Graphics2D ...

  4. HDU3613 Manacher//EXKMP//KMP

    http://acm.hdu.edu.cn/showproblem.php?pid=3613 每个字符都有一个权值,将一个字符串分成两半,如果某一半是回文串就把所有的字符权值加起来,否则当0来处理,问 ...

  5. SpringBoot使用redis缓存List<Object>

    一.概述 最近在做性能优化,之前有一个业务是这样实现的: 1.温度报警后第三方通讯管理机直接把报警信息保存到数据库 2.我们在数据库中添加触发器,(BEFORE INSERT)根据这条报警信息处理业务 ...

  6. Study 6 —— while循环

    语法while 条件: 执行代码... 1. #从0打印到100,每循环一次 +1 count = 0 while count <= 100 : print('Loop: ', count) c ...

  7. hashmap和hashtable异同

    (一)继承的历史不同 Hashtable是继承自Dictionary类的,而HashMap则是Java 1.2引进的Map接口的一个实现. public class Hashtable extends ...

  8. Python异常处理和进程线程-day09

    写在前面 上课第九天,打卡: 最坏的结果,不过是大器晚成: 一.异常处理 - 1.语法错误导致的异常 - 这种错误,根本过不了python解释器的语法检测,必须在程序运行前就修正: - 2.逻辑上的异 ...

  9. webuploader 百度上传，一个页面多个上传按钮

    需求:列表里每条数据需加文件上传 html: <div> <ul class="SR_wrap_pic"></ul> <button ty ...

  10. 虚拟机centos7系统下安装hadoop ha和yarn ha（详细）

    一:基础环境准备 (一):虚拟机新建五个centos7系统(复制文件夹的方式) (二):角色分配 (三)按照角色分配表配置 (1)更改主机ip(自行查找),如果只是个人搭建玩一玩,可选择安装cento ...