基础购物车(Javascript)

使用Javascript写一个基础购物车,其中包含商品数量加加减减,下面的总价和总数量跟着商品数量变动,还可以自己添加需要的商品。

基础购物车的结构样式如下:

  HTML代码:

<body><table border="1px" cellpadding="20px" style="border-collapse: collapse;"><thead><tr><th>商品名称</th><th>商品价格</th><th>商品数量</th><th>商品操作</th></tr></thead><tbody id="goods"><tr><td>风扇</td><td>24.8¥</td><td><button>-</button> 0 <button>+</button></td><td><button>修改</button> <button>删除</button></td></tr></tbody><footer id="total"><tr><td>总价</td><td id="gross"></td><td>总数量</td><td id="qty"></td></tr></footer></table><button class="addition">添加</button><br /><!-- 点击添加显示 --><div class="inp" style="display: none;"><input class="des" type="text" placeholder="请输入商品名称" /><input class="cost" type="number" placeholder="请输入商品价格" /><input class="mag" type="number" placeholder="请输入商品数量" /><br /><button class="append">添加</button><button class="cancel">取消</button></div><!-- 点击修改显示 --><div class="amend" style="display: none;"><input class="dess" type="text" placeholder="请输入商品名称" /><input class="costs" type="number" placeholder="请输入商品价格" /><input class="mags" type="number" placeholder="请输入商品数量" /><br /><button onclick="appends()">确定</button><button onclick="cancels()">取消</button></div><script src="js/basics.js"></script></body>

 css代码:

<style>tr,td {text-align: center;}</style>

js代码:

// let声明一个变量 为data
let data;
// 声明一个最大的id
let maxid;
// 声明一个变量 为内容下标的id
let a;
// 创建 XMLHttpRequest 对象
let xhr = new XMLHttpRequest();
// 使用 open 方法指定要请求的地址、类型和方式
xhr.open('get', 'js/basics.json', true);
// 发送数据
xhr.send();
// 绑定 onreadystatechange 事件,判断 readyState 和 status 的状态
xhr.onreadystatechange = function() {// 第一个判断到哪一步,交互流程,有 5 个阶段 从0开始 4表示交互流程完毕 200是状态请求成功if (xhr.readyState == 4 && xhr.status == 200) {let text = xhr.responseText;console.log(text);// 将JSON中的数据转化为对象 接收服务器数据 一般为字符串data = JSON.parse(text);console.log(data);// 调用函数basic(data);// for循环遍历数组for (let i = 0; i < data.length; i++) {// 判断 当最大的id大于商品最大的id时 最大的id=商品的idif (maxid > data[i].id) {maxid = data[i].id}}}
};
// 封装函数
function basic(d) {let str = '';// let 声明一个变量 total为总价 总价从零开始let total = 0;// let 声明一个变量 amount为总数量 总数量从零开始let amount = 0;// let声明变量为gross 通过id名在文档中找到grosslet gross = document.getElementById('gross');// let声明变量为qty 通过id名在文档中找到qtylet qty = document.getElementById('qty');for (let i = 0; i < data.length; i++) {// +=是先算在等于// 总价等于元素的数量*所对应的价格相加total += data[i].num * data[i].price;// 总数量等于所有数据的数量 并转为整数amount += parseInt(data[i].num);// str拼接str += `<tr><td>${data[i].name}</td><td>${data[i].price}</td><td><button onclick="minus(${i})">-</button> ${data[i].num} <button onclick="add(${i})">+</button></td><td><button onclick="alter(${i})">修改</button> <button onclick="del(${i})">删除</button></td></tr>`;}// 元素.innerHTML=内容 改变总价的内容 gross.innerHTML = total;// 元素.innerHTML=内容 改变总数量的内容qty.innerHTML = amount;// 渲染数据document.getElementById('goods').innerHTML = str;
};// 数量按钮减1
// 减号事件绑定点击事件 传参
function minus(i) {// 当商品数量大于0时if (data[i].num > 0) {// 商品数量减一data[i].num--;} else {// 否则弹窗提示不能为空alert("商品数量不能为负")};// 调用函数basic(data);
};// 数量加1
function add(i) {data[i].num++;// 调用函数basic(data);
};// 商品删除
// 点击删除按钮 传参 
function del(i) {data.splice(i, 1)// 调用函数basic(data);
};// 获取添加按钮
let addition = document.getElementsByClassName('addition')[0];
console.log('addition');
// 获取下面的输入框
let inp = document.getElementsByClassName('inp')[0];
console.log('inp');
// 给添加按钮绑定点击事件
addition.onclick = function() {// 当点击添加按钮时,下面的输入框出现inp.style = "display:block"
};// 点击取消按钮输入框隐藏
// 获取取消按钮
let cancel = document.getElementsByClassName('cancel')[0];
console.log('cancel');
// 给取消按钮绑定点击事件
cancel.onclick = function() {// 点击取消按钮 下面的三个输入框隐藏并清空inp.style = "display:none";des.value = null;cost.value = null;mag.value = null;
};// 添加事件
// 获取向上添加的添加按钮
let append = document.getElementsByClassName('append')[0];
console.log('append');
// 获取三个输入框
let des = document.getElementsByClassName('des')[0];
console.log('des');
let cost = document.getElementsByClassName('cost')[0];
console.log('cost');
let mag = document.getElementsByClassName('mag')[0];
console.log('mag');
// 给添加绑定点击事件
append.onclick = function() {console.log(data);// 判断内容都不为空且价格大于零 数量大于等于零 并且数量为整数if (des.value != '' && cost.value != '' && mag.value != '' && cost.value > 0 && mag.value >= 0 && mag.value %1 === 0) {// 通过数组尾部添加添加新的内容data.push({"id": ++maxid,"name": des.value,"price": parseFloat(cost.value),"num": parseInt(mag.value)})// 添加上以后下面的输入框隐藏并清空inp.style = "display:none";des.value = '';cost.value = '';mag.value = '';console.log(data);basic(data);} else {alert("信息填写完整")};
};// 修改事件
// 获取修改隐藏的输入框
// 给修改按钮添加点击事件
let amend = document.getElementsByClassName('amend')[0];
// 获取三个输入框
let dess = document.getElementsByClassName('dess')[0];
console.log('dess');
let costs = document.getElementsByClassName('costs')[0];
console.log('costs');
let mags = document.getElementsByClassName('mags')[0];
console.log('mags');
// 给添加绑定点击事件 点击添加出现编辑弹窗
function alter(index) {console.log(index);amend.style.display = "block";// 数据回显dess.value = data[index].name;costs.value = data[index].price;mags.value = data[index].num;// a等于数据下标的ida = data[index].id;
};
// 编辑添加
// 点击下面输入框里的添加 
function appends() {// 判断三个输入框任意一个为空或价格小于0或数量小于0时 提示信息有误if (dess.value == '' || costs.value == '' || mags.value == '' || costs.value < 0 || mags.value < 0) {alert("信息有误");// 否则for循环遍历数组} else {for (let i = 0; i < data.length; i++) {// if判断用户输入的id等于内容的id时 内容修改if (data[i].id == a) {data[i].name = dess.value;data[i].price = costs.value;data[i].num = mags.value;// 修改完成 输入框隐藏 调用渲染函数alert("确认修改");amend.style.display = "none";basic(data);return;}}// 否则提示没有找到相应的数据 输入框隐藏amend.style.display = 'none';};
};
// 编辑取消
function cancels() {// 点击取消,编辑的输入框隐藏,数据重新渲染amend.style = "display:none";basic(data);
};

json假数据:

[{"id":1,"name":"风扇","price":"24.8","num":0},{"id":2,"name":"南街村拌面","price":"5","num":0},{"id":3,"name":"甜美风小裙子","price":"99.8","num":0},{"id":4,"name":"空调","price":"1688","num":0},{"id":5,"name":"维达纸巾","price":"2.5","num":0},{"id":6,"name":"衬衣","price":"50","num":0
}]

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/359389.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode26. 删除有序数组中的重复项题解

LeetCode26. 删除有序数组中的重复项题解 题目链接&#xff1a; https://leetcode.cn/problems/remove-duplicates-from-sorted-array 题目描述&#xff1a; 给你一个 非严格递增排列 的数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使每个元素 只出现一…

JavaWeb——Mysql的启动/登录/卸载

目录 1.Mysql服务器 2.Mysql的简单使用 2.1 启动Mysql&#xff1a; 2.2 登录Mysql 2.3 退出 3. 连接别人的数据库 4.卸载mqsql 1.Mysql服务器 安装了Mysql的计算机都成为Mysql服务器 2.Mysql的简单使用 2.1 启动Mysql&#xff1a; 第一种方法&#xff1a;搜索服务&am…

一文读懂交换机MAC地址表:五大关键点,图解21步

HCIA 新班开课了华为HCIA课程介绍苏州面授班 | 全国直播班循环开班&#xff0c;免费重学前言 什么是MAC地址表?MAC地址表有什么作用&#xff1f;MAC地址表里面包含了哪些要素&#xff1f;今天带你好好唠唠。 我们以一个案例为例&#xff1a; 如上图&#xff1a;PC1和PC2通…

2024.6.24 IDEA中文乱码问题(服务器 控制台 TOMcat)实测已解决

1.问题产生原因&#xff1a; 1.文件编码不一致&#xff1a;如果文件的编码方式与IDEA设置的编码方式不一致&#xff0c;就会产生乱码。确保文件和IDEA使用相同的编码&#xff0c;通常是UTF-8。2.IDEA设置问题&#xff1a;检查IDEA的全局编码设置和项目编码设置是否正确。3.终端…

adb 查看哪些应用是双开的

adb shell pm list users 得到 这 里有 user 0 ,11,999 其中0是系统默认的&#xff0c;11是平行空间的&#xff0c;999是双开用户 pm list packages --user 999 -3 得到了999用户安装第三方应用的包名 pm list packages --user 11 -3 得到了隐私空间用户安装第三方应用的…

Windows环境如何ssh远程连接本地局域网内的Archcraft系统

文章目录 前言1. 本地SSH连接测试2. Archcraft安装Cpolar3. 配置 SSH公网地址4. 公网远程SSH连接小结 5. 固定SSH公网地址6. SSH固定地址连接 前言 本文主要介绍如何在Archcraft系统中安装Cpolar内网穿透工具,并以实现Windows环境ssh远程连接本地局域网Archcraft系统来说明使用…

React+TS 从零开始教程(2):简中简 HelloWolrd

源码链接&#xff1a;https://pan.quark.cn/s/c6fbc31dcb02 这一节&#xff0c;我们来见识ReactTS的威力&#xff0c;开始上手开发第一个组件&#xff0c;什么组件呢&#xff1f; 当然是简中简的 HelloWolrd组件啦。 在src下创建一个components&#xff0c;然后新建Hello.tsx …

mp4转换成mp3怎么转?教你几种值得收藏的转换方法!

mp4转换成mp3怎么转&#xff1f;MP4&#xff0c;这一深入人心的数字多媒体容器格式&#xff0c;无疑在当今数字世界中占据了一席之地&#xff0c;那么&#xff0c;它究竟有何过人之处呢&#xff1f;首先&#xff0c;MP4的跨平台兼容性是其一大亮点&#xff0c;不论是在Windows的…

MySQL字典数据库设计与实现 ---项目实战

软件准备✍&#xff1a;Mysql与Navicat可视化命令大全 ----项目实战 文章前言部分 目录 一.摘要 二.设计内容 三.项目实现 一.摘要 本项目关注于字典数据库表结构的设计和数据管理。通过现有的sql文件&#xff0c;实现system_dict_type和system_dict_data两个数据表。随后…

文本批量高效编辑神器:空格秒变分隔符,提升工作效率

在信息爆炸的时代&#xff0c;文本处理已成为我们日常工作中不可或缺的一部分。然而&#xff0c;面对海量的文本数据&#xff0c;如何高效、准确地进行编辑和整理&#xff0c;成为了我们面临的难题。今天&#xff0c;我要向大家介绍一款文本批量高效编辑神器——首助编辑高手&a…

微信小程序轮播图

效果图 详情可见 微信小程序 参照&#xff1a;swiper | uni-app官网 代码&#xff1a; <!--轮播图-- > <swiper interval"2000" autoplay"true" circular"true" style"height: 300px;"><swiper-item style&qu…

Redis—String数据类型及其常用命令详解

文章目录 Redis概述1.Redis-String数据类型概述2.常用命令2.1 SET&#xff1a;添加或者修改已经存在的一个String类型的键值对2.2 GET&#xff1a;根据key获取String类型的value2.3 MSET&#xff1a;批量添加多个String类型的键值对2.4 MGET&#xff1a;根据多个key获取多个Str…

前后端分离项目面试总结

一&#xff1a;是否登录状态 服务端登录的时候&#xff0c;给分配一个session用于存储数据&#xff0c;同时将sessionID返回给浏览器&#xff0c;浏览器通过cookie把sessionID存储起来&#xff0c;下次访问时携带上&#xff0c;服务端就可以通过sessionID来确定用户是否登录。 …

pdf压缩大小,PDF压缩大小不影响清晰度

你是否曾为PDF文件过大而烦恼&#xff1f;想要分享或上传文件时&#xff0c;却因为它的体积而束手无策&#xff1f;别担心&#xff0c;今天我将为大家分享一些简单实用的 PDF 压缩技巧&#xff0c;让你的文件轻松压缩pdf。 打开“轻云处理pdf官网”&#xff0c; 的网站。然后上…

安徽理工大学2计算机考研情况,招收计算机专业的学院和联培都不少!

安徽理工大学&#xff08;Anhui University of Science and Technology&#xff09;&#xff0c;位于淮南市&#xff0c;是安徽省和应急管理部共建高校&#xff0c;安徽省高等教育振兴计划“地方特色高水平大学”建设高校&#xff0c;安徽省高峰学科建设计划特别支持高校&#…

海外注册 | 一分钟看懂英国医疗器械注册

英国医疗器械市场因其独特的地域划分而与其他国家有所不同。分为大不列颠市场&#xff08;包括&#xff1a;英格兰、苏格兰和威尔士&#xff09;和北爱尔兰市场&#xff0c;它们在法规要求上存在细微差别。 以下是针对这两个市场的基本要求概览&#xff1a; 监管机构&#xf…

ONLYOFFICE 编辑器8.1,一个功能全面的编辑器

目录 官网地址&#xff1a;ONLYOFFICE - 企业在线办公应用软件 | ONLYOFFICE 一、PDF编辑 二、PPT播放 1. 多样化的幻灯片样式与布局 2. 强大的文本编辑与格式化功能 3. 丰富的图形与图表插入功能 4. 灵活的过渡效果与动画设置 5. 舒适的呈现与演讲辅助功能 6. 便捷的团…

都说HCIE“烂大街”了,说难考都是假的?

在网络技术领域&#xff0c;华为认证互联网专家&#xff08;HCIE&#xff09;长期以来被视为一项高端认证&#xff0c;代表着专业技能和知识水平。 然而&#xff0c;近几年来&#xff0c;考证的重视度直线上升&#xff0c;考HCIE的人越来越多了&#xff0c;考过的人好像也越来越…

禁用/屏蔽 Chrome 默认快捷键

Chrome 有一些内置的快捷键&#xff0c;但是它并没有像其他软件一样提供管理快捷键的界面。在某些时候&#xff0c;当我们因为个人需求希望禁用 Chrome 某些快捷键时&#xff0c;又无从下手。 好在有开发者开发了 Chrome 插件&#xff0c;可以禁用 Chrome 快捷键的插件&#x…

ogg格式怎么转换为mp3?这四种转换方法非常好用!

ogg格式怎么转换为mp3&#xff1f;在当今数字化时代&#xff0c;音频文件格式的转换已经成为确保音频内容在各种设备和平台上无缝播放的至关重要的一环&#xff0c;尽管OGG格式拥有支持多声道的优势&#xff0c;但由于其使用率相对较低&#xff0c;这可能会在某些情况下导致兼容…