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 内存、几…...
【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
【项目实战】通过多模态+LangGraph实现PPT生成助手
PPT自动生成系统 基于LangGraph的PPT自动生成系统，可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析：自动解析Markdown文档结构PPT模板分析：分析PPT模板的布局和风格智能布局决策：匹配内容与合适的PPT布局自动…...
（二）原型模式
原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点： 避免重复初…...
基于数字孪生的水厂可视化平台建设：架构与实践
分享大纲： 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年，数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段，基于数字孪生的水厂可视化平台的…...
SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现
摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序，以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务，提供稳定高效的数据处理与业务逻辑支持；利用 uniapp 实现跨平台前…...
TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案
一、TRS收益互换的本质与业务逻辑 （一）概念解析 TRS（Total Return Swap）收益互换是一种金融衍生工具，指交易双方约定在未来一定期限内，基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...
【决胜公务员考试】求职OMG——见面课测验1
2025最新版！！！6.8截至答题，大家注意呀！ 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:（ B ） A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...
c#开发AI模型对话
AI模型 前面已经介绍了一般AI模型本地部署，直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型，但是目前国内可能使用不多，至少实践例子很少看见。开发训练模型就不介绍了&am…...
使用LangGraph和LangSmith构建多智能体人工智能系统
现在，通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战，比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...
华为OD机考-机房布局
import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...