HTML和JavaScript实现商品购物系统
下面是一个更全面的商品购物系统示例，包含新增商品、商品的增加删除以及结算找零的功能。这个系统使用HTML和JavaScript实现。
1.功能说明：
这个应用程序使用纯HTML和JavaScript实现。
- 包含一个商品列表和一个购物车区域。
- 商品列表中有几个示例商品，每个商品都有一个“加入购物车”按钮。
- 点击“加入购物车”按钮后，商品会被添加到购物车中，并更新购物车显示。
- 购物车中列出了所有已添加的商品，并计算总价。
- 每个购物车项都有一个“移除”按钮，可以移除该商品。
- 结算部分包含一个支付金额输入框和一个结算按钮。
- 输入支付金额后点击结算按钮，会计算找零并弹出提示框显示结算信息，然后清空购物车。
- 新增商品部分包含输入框用于输入新的商品名称和价格，以及一个“新增商品”按钮。
- 点击“新增商品”按钮后，新的商品会被添加到商品列表中。
2.代码展示
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>商品购物系统</title><style>body {font-family: Arial, sans-serif;background-color: #f4f4f9;margin: 0;padding: 20px;}.container {display: flex;justify-content: space-between;}.product-list, .cart {width: 45%;background-color: white;padding: 20px;border-radius: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}h1 {text-align: center;}.product-item, .cart-item {display: flex;justify-content: space-between;align-items: center;padding: 10px;border-bottom: 1px solid #eee;}.product-item:last-child, .cart-item:last-child {border-bottom: none;}.product-item button, .cart-item button {padding: 5px 10px;background-color: #007bff;color: white;border: none;border-radius: 5px;cursor: pointer;}.product-item button:hover, .cart-item button:hover {background-color: #0056b3;}.total {margin-top: 20px;font-size: 18px;font-weight: bold;}.checkout-section {margin-top: 20px;}.checkout-section input[type="number"] {width: 100px;padding: 5px;border: 1px solid #ccc;border-radius: 5px;margin-right: 10px;}.checkout-section button {padding: 5px 10px;background-color: #28a745;color: white;border: none;border-radius: 5px;cursor: pointer;}.checkout-section button:hover {background-color: #218838;}.add-product-section {margin-top: 20px;}.add-product-section input[type="text"], .add-product-section input[type="number"] {width: 150px;padding: 5px;border: 1px solid #ccc;border-radius: 5px;margin-right: 10px;}.add-product-section button {padding: 5px 10px;background-color: #ffc107;color: white;border: none;border-radius: 5px;cursor: pointer;}.add-product-section button:hover {background-color: #e0a800;}</style>
</head>
<body><div class="container"><div class="product-list"><h1>商品列表</h1><div id="product-items"></div><div class="add-product-section"><input type="text" id="new-product-name" placeholder="商品名称" required><input type="number" id="new-product-price" placeholder="价格" min="0" step="any" required><button onclick="addNewProduct()">新增商品</button></div></div><div class="cart"><h1>购物车</h1><div id="cart-items"></div><div class="total" id="total-price">总价: ¥0.00</div><div class="checkout-section"><input type="number" id="payment" placeholder="支付金额" min="0" step="any" required><button onclick="checkout()">结算</button></div></div></div><script>let products = [{ name: '苹果', price: 5 },{ name: '香蕉', price: 3 },{ name: '橙子', price: 4 }];let cart = [];function updateProductList() {const productItemsDiv = document.getElementById('product-items');productItemsDiv.innerHTML = '';products.forEach((product, index) => {const itemDiv = document.createElement('div');itemDiv.className = 'product-item';itemDiv.innerHTML = `<span>${product.name}</span><span>¥${product.price.toFixed(2)}</span><button οnclick="addToCart('${product.name}', ${product.price})">加入购物车</button>`;productItemsDiv.appendChild(itemDiv);});}function addToCart(name, price) {const item = { name, price };cart.push(item);updateCartDisplay();}function updateCartDisplay() {const cartItemsDiv = document.getElementById('cart-items');cartItemsDiv.innerHTML = '';let totalPrice = 0;cart.forEach((item, index) => {const itemDiv = document.createElement('div');itemDiv.className = 'cart-item';itemDiv.innerHTML = `<span>${item.name}</span><span>¥${item.price.toFixed(2)}</span><button οnclick="removeFromCart(${index})">移除</button>`;cartItemsDiv.appendChild(itemDiv);totalPrice += item.price;});document.getElementById('total-price').textContent = `总价: ¥${totalPrice.toFixed(2)}`;}function removeFromCart(index) {cart.splice(index, 1);updateCartDisplay();}function checkout() {if (cart.length === 0) {alert('购物车为空，请先添加商品！');return;}const payment = parseFloat(document.getElementById('payment').value);const totalPrice = cart.reduce((sum, item) => sum + item.price, 0);if (isNaN(payment) || payment < totalPrice) {alert('支付金额不足，请重新输入！');return;}const change = payment - totalPrice;alert(`结算成功！总价: ¥${totalPrice.toFixed(2)}\n支付金额: ¥${payment.toFixed(2)}\n找零: ¥${change.toFixed(2)}`);cart = [];updateCartDisplay();document.getElementById('payment').value = '';}function addNewProduct() {const newName = document.getElementById('new-product-name').value.trim();const newPrice = parseFloat(document.getElementById('new-product-price').value);if (!newName || isNaN(newPrice) || newPrice <= 0) {alert('请输入有效的商品名称和价格！');return;}products.push({ name: newName, price: newPrice });updateProductList();document.getElementById('new-product-name').value = '';document.getElementById('new-product-price').value = '';alert(`商品 "${newName}" 已成功添加`);}// 初始化商品列表updateProductList();</script>
</body>
</html>3.效果展示
相关文章：
HTML和JavaScript实现商品购物系统
下面是一个更全面的商品购物系统示例，包含新增商品、商品的增加删除以及结算找零的功能。这个系统使用HTML和JavaScript实现。 1.功能说明： 这个应用程序使用纯HTML和JavaScript实现。 包含一个商品列表和一个购物车区域。商品列表中有几个示例商品&a…...
深度学习中的激活函数
激活函数(activation function)是应用于网络中各个神经元输出的简单变换，为其引入非线性属性，使网络能够对更复杂的数据进行建模，使其能够学习更复杂的模式。如果没有激活函数，神经元只会对输入进行枯燥的线性数学运算。这意味着&…...
编写php项目所需环境
需要编写php项目，需要看到编写的代码展现的效果，这里我选择用xampp来展现 准备工作： https://learncodingfast.com/how-to-install-xampp-and-brackets/#Installing_and_Running_XAMPP xampp下载地址：https://www.apachefriends.…...
华为机试HJ108 求最小公倍数
首先看一下题 描述 正整数A和正整数B 的最小公倍数是指 能被A和B整除的最小的正整数值，设计一个算法，求输入A和B的最小公倍数。 数据范围： 1≤a,b≤100000 输入描述： 输入两个正整数A和B。 输出描述： 输出A和B的最小公…...
【Python技术】同花顺wencai涨停分析基础上增加连板分析
周末，有读者加我， 说 之前的涨停分析 是否可以增加连板分析。 这个可以加上。 先看效果 这里附上完整代码： import streamlit as st import pywencai import pandas as pd from datetime import datetime, timedelta import plotly.graph_o…...
《拉依达的嵌入式\驱动面试宝典》—C/CPP基础篇(五)
《拉依达的嵌入式\驱动面试宝典》—C/CPP基础篇(五) 你好，我是拉依达。 感谢所有阅读关注我的同学支持，目前博客累计阅读 27w，关注1.5w人。其中博客《最全Linux驱动开发全流程详细解析（持续更新）-CSDN博客》已经是 Linux驱动 相关内容搜索的推荐首位，感谢大家支持。 《拉…...
【LeetCode】3356、零数组变换 II
【LeetCode】3356、零数组变换 II 文章目录 一、数据结构-差分-一维差分、二分1.1 数据结构-差分-一维差分、二分1.1.1 题意复述1.1.2 思路1.1.3 手写二分1.1.4 sort.Search() 二分1.1.5 sort.Find() 二分 二、多语言解法 一、数据结构-差分-一维差分、二分 1.1 数据结构-差分…...
Vue 子组件修改父组件传过来的值的三种方式
方式1：子组件发送emit，触发父组件修改 父组件 <template><div><son :count"count" updateCount"updateCount" /></div> </template><script> import son from "./son"; export def…...
4.Python 数字类型
Python 数字类型总结 文章目录 Python 数字类型总结1. 数字类型概述特点 2. 数字类型的创建与赋值3. 数字类型转换4. 数学运算与函数math 模块cmath 模块 5. 随机数生成6. 三角函数7. 数学常量 总结 Python 提供了多种数字类型来存储和操作数值数据。这些类型包括整数、浮点数、…...
MacOs 日常故障排除troubleshooting
1. 关闭开机自启动 app X macOs 15.1 System settings -> General -> Login Items & Extensions->Open at Login -> Select app X and click -...
（补）算法刷题Day19：BM55 没有重复项数字的全排列
题目链接 给出一组数字，返回该组数字的所有排列 例如： [1,2,3]的所有排列如下 [1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2], [3,2,1]. （以数字在数组中的位置靠前为优先级，按字典序排列输出。） 思路： 使用回…...
golang中的值传递与引用传递，如何理解结构体的方法？
先从一个例子说起 type Counter struct {count int }func (c Counter) Inc() {c.count }func test1() {c : Counter{}do : func() {for i : 0; i < 10; i {c.count}fmt.Println("done")}go do()go do()time.Sleep(3 * time.Second)fmt.Println(c.count) }func te…...
linux部署ansible自动化运维
ansible自动化运维 1，编写ansible的仓库（比赛已经安装，无需关注） 1、虚拟机右击---设置---添加---CD/DVD驱动器---完成---确定 2、将ansible.iso的光盘连接上（右下角呈绿色状态） 3、查看光盘挂载信息 df -h…...
docker—私有仓库搭建
docker—私有仓库搭建 HTTP 部署 docker run -d \-p 5000:5000 \--restartalways \--name registry \-v /opt/data/registry:/var/lib/registry \registry:2使用官方的 registry 镜像来启动私有仓库。默认情况下，仓库会被创建在容器的 /var/lib/registry 目录…...
【SpringAOP】深入浅出SpringAOP从原理到源码
AOP对象是如何创建的 对于熟悉Spring IOC流程源码的同学来说，一定了解bean的整个生命周期，也就是从实例化、属性填充、初始化三个过程。那么对于Bean 工厂来说，是如何保证需要创建代理的对象创建代理的呢。 从图中可以看到，本质…...
Java 从查询超时到性能提升 （实战讲解）
目录 1. 问题所示2. 原理分析3. 解决方法3.1 代码优化3.2 索引优化3.3 删数据 1. 问题所示 查询返回速度慢，导致前端页面无数据显示 前端和后端均未报错，但后端未能在合理时间内返回结果到前端 后端没有报错日志 2. 原理分析 单独分析代码中的对算法…...
《C 语言携手 PaddlePaddle C++ API：开启深度学习开发新征程》
在深度学习领域，PaddlePaddle 作为一款强大的深度学习框架，为开发者提供了丰富的功能和高效的计算能力。而 C 语言，凭借其高效性和广泛的应用场景，与 PaddlePaddle 的 C API 相结合，能够为深度学习开发带来独特的优势。…...
Mysql之存储过程
MySQL 存储过程（Stored Procedure） 1. 概念 存储过程是一组预编译的 SQL 语句集合，可以通过调用名称来执行。存储过程可以接收参数，并支持复杂的业务逻辑（如条件语句、循环、异常处理等）。它们可以提高代…...
XV6 开发环境搭建
Step 1 搭建ubuntu 20.04 虚拟机 注意：一定要使用ubuntu 20.04，该版本可以直接通过deb安装gnu编译工具链。 安装完虚拟机后，换apt源。 ubuntu20.04镜像下载链接 设置root账户密码: sudo passwd root Step 2 下载解压qemu 5.1.0 wget ht…...
Windows 系统下 Python 环境安装
一、引言 Python 作为一种广泛应用的编程语言，在数据分析、人工智能等领域发挥着重要作用。本文将详细介绍在 Windows 系统上安装 Python 环境的步骤。 二、安装前准备 系统要求 Windows 7 及以上版本一般都能支持 Python。硬件方面，通常 2GB 内存、几…...
《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》
引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...
在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能
下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能，包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...
Go 语言接口详解
Go 语言接口详解 核心概念 接口定义 在 Go 语言中，接口是一种抽象类型，它定义了一组方法的集合： // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的： // 矩形结构体…...
汽车生产虚拟实训中的技能提升与生产优化
在制造业蓬勃发展的大背景下，虚拟教学实训宛如一颗璀璨的新星，正发挥着不可或缺且日益凸显的关键作用，源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例，汽车生产线上各类…...
MVC 数据库
MVC 数据库 引言 在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...
江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命
在华东塑料包装行业面临限塑令深度调整的背景下，江苏艾立泰以一场跨国资源接力的创新实践，重新定义了绿色供应链的边界。 跨国回收网络：废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点，将海外废弃包装箱通过标准…...
Python Ovito统计金刚石结构数量
大家好，我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构，但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法，可以持续统计各步的金刚石结构，具体代码如下： from ovito…...
uniapp 小程序 学习（一）
利用Hbuilder 创建项目 运行到内置浏览器看效果 下载微信小程序 安装到Hbuilder 下载地址 ：开发者工具默认安装 设置服务端口号 在Hbuilder中设置微信小程序 配置 找到运行设置，将微信开发者工具放入到Hbuilder中， 打开后出现 如下 bug 解…...
消息队列系统设计与实践全解析
文章目录 🚀 消息队列系统设计与实践全解析🔍 一、消息队列选型1.1 业务场景匹配矩阵1.2 吞吐量/延迟/可靠性权衡💡 权衡决策框架 1.3 运维复杂度评估🔧 运维成本降低策略 🏗️ 二、典型架构设计2.1 分布式事务最终一致…...
【深尚想】TPS54618CQRTERQ1汽车级同步降压转换器电源芯片全面解析
1. 元器件定义与技术特点 TPS54618CQRTERQ1 是德州仪器（TI）推出的一款 汽车级同步降压转换器（DC-DC开关稳压器），属于高性能电源管理芯片。核心特性包括： 输入电压范围：2.95V–6V，输…...