需求
使用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. laravel redis 删除指定前缀的 key

    // 前缀 $prefix = 'abc'; // 需要在前面连接上应用的缓存前缀 $keys = app('redis')->keys(config('cache.prefix') . $pr ...

  2. vue2.0 之文本渲染-v-html、v-text

    vue2.0 之文本渲染-v-html.v-text 1.index.html代码 <!DOCTYPE html> <html> <head> <meta c ...

  3. Python字符编码以及循环机制介绍

    Python字符编码以及循环机制介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 身为一名运维人员就得不断的学习,那么如何身为运维的你是否已经嗅探已经很火的Python编程啦?大 ...

  4. JAVA锁的优化和膨胀过程

    转自:https://www.cnblogs.com/dsj2016/p/5714921.html https://cloud.tencent.com/developer/article/103675 ...

  5. 宕机不等于关机，阴魂不散的vm

    今天早上刚到公司,就发现研发环境的机器连不上了. 公司研发环境的部署比较简单,物理机上装VMware Esxi 6 ,然后在esxi上装虚机. 检查发现:esxi ping不通,客户端也连不上:物理机 ...

  6. 收集服务器网卡和IP信息

    收集服务器网卡和IP信息 Python2环境 #!/usr/bin/python2 # -*- coding:utf-8 -*- import os,sys import socket, fcntl, ...

  7. DNS缓存欺骗攻击

    1.受影响的无线网络设备 一些D-link.TP-Link.Belkin.Linksys及IPTime等品牌无线路由器存在安全隐患. 2.漏洞描述 攻击者向DNS服务器注入非法网络域名地址,如果服务器 ...

  8. JS——页面倒计时跳转

    Js几秒后倒计时跳转 <html><head><title>出错啦~~~</title><link href="css/login1.c ...

  9. tessaract ocr简介

    Tesseract的历史Tesseract是一个开源的OCR引擎,惠普公司的布里斯托尔实验室在1984-1994年开发完成.起初作为惠普的平板扫描仪的文字识别引擎.Tesseract在1995年UNL ...

  10. Java SE关键字-static

    一. static代表着什么 在Java中并不存在全局变量的概念,但是我们可以通过static来实现一个“伪全局”的概念,在Java中static表示“全局”或者“静态”的意思,用来修饰成员变量和成员 ...