当前位置： 首页 > news >正文

HTML和JavaScript实现商品购物系统

news 2026/4/4 18:15:56

下面是一个更全面的商品购物系统示例，包含新增商品、商品的增加删除以及结算找零的功能。这个系统使用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实现商品购物系统

下面是一个更全面的商品购物系统示例&#xff0c;包含新增商品、商品的增加删除以及结算找零的功能。这个系统使用HTML和JavaScript实现。 1.功能说明&#xff1a; 这个应用程序使用纯HTML和JavaScript实现。 包含一个商品列表和一个购物车区域。商品列表中有几个示例商品&a…...

编程日记 2024/12/16 9:03:19

深度学习中的激活函数

激活函数(activation function)是应用于网络中各个神经元输出的简单变换&#xff0c;为其引入非线性属性&#xff0c;使网络能够对更复杂的数据进行建模&#xff0c;使其能够学习更复杂的模式。如果没有激活函数&#xff0c;神经元只会对输入进行枯燥的线性数学运算。这意味着&…...

编程日记 2024/12/16 9:01:16

编写php项目所需环境

需要编写php项目&#xff0c;需要看到编写的代码展现的效果&#xff0c;这里我选择用xampp来展现 准备工作&#xff1a; https://learncodingfast.com/how-to-install-xampp-and-brackets/#Installing_and_Running_XAMPP xampp下载地址&#xff1a;https://www.apachefriends.…...

编程日记 2024/12/16 8:58:12

华为机试HJ108 求最小公倍数

首先看一下题 描述 正整数A和正整数B 的最小公倍数是指 能被A和B整除的最小的正整数值&#xff0c;设计一个算法&#xff0c;求输入A和B的最小公倍数。 数据范围&#xff1a; 1≤a,b≤100000 输入描述&#xff1a; 输入两个正整数A和B。 输出描述&#xff1a; 输出A和B的最小公…...

编程日记 2024/12/16 8:55:07

【Python技术】同花顺wencai涨停分析基础上增加连板分析

周末&#xff0c;有读者加我&#xff0c; 说 之前的涨停分析 是否可以增加连板分析。 这个可以加上。 先看效果 这里附上完整代码&#xff1a; import streamlit as st import pywencai import pandas as pd from datetime import datetime, timedelta import plotly.graph_o…...

编程日记 2024/12/16 8:53:01

《拉依达的嵌入式\驱动面试宝典》—C/CPP基础篇(五)

《拉依达的嵌入式\驱动面试宝典》—C/CPP基础篇(五) 你好，我是拉依达。 感谢所有阅读关注我的同学支持，目前博客累计阅读 27w，关注1.5w人。其中博客《最全Linux驱动开发全流程详细解析（持续更新）-CSDN博客》已经是 Linux驱动 相关内容搜索的推荐首位，感谢大家支持。 《拉…...

编程日记 2024/12/16 8:52:00

【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 数据结构-差分…...

编程日记 2024/12/16 8:50:59

Vue 子组件修改父组件传过来的值的三种方式

方式1&#xff1a;子组件发送emit&#xff0c;触发父组件修改 父组件 <template><div><son :count"count" updateCount"updateCount" /></div> </template><script> import son from "./son"; export def…...

编程日记 2024/12/16 8:47:55

4.Python 数字类型

Python 数字类型总结 文章目录 Python 数字类型总结1. 数字类型概述特点 2. 数字类型的创建与赋值3. 数字类型转换4. 数学运算与函数math 模块cmath 模块 5. 随机数生成6. 三角函数7. 数学常量 总结 Python 提供了多种数字类型来存储和操作数值数据。这些类型包括整数、浮点数、…...

编程日记 2024/12/16 8:45:52

MacOs 日常故障排除troubleshooting

1. 关闭开机自启动 app X macOs 15.1 System settings -> General -> Login Items & Extensions->Open at Login -> Select app X and click -...

编程日记 2024/12/16 8:39:41

（补）算法刷题Day19：BM55 没有重复项数字的全排列

题目链接 给出一组数字&#xff0c;返回该组数字的所有排列 例如&#xff1a; [1,2,3]的所有排列如下 [1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2], [3,2,1]. &#xff08;以数字在数组中的位置靠前为优先级&#xff0c;按字典序排列输出。&#xff09; 思路&#xff1a; 使用回…...

编程日记 2024/12/16 8:38:40

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…...

编程日记 2024/12/16 8:36:37

linux部署ansible自动化运维

ansible自动化运维 1&#xff0c;编写ansible的仓库&#xff08;比赛已经安装&#xff0c;无需关注&#xff09; 1、虚拟机右击---设置---添加---CD/DVD驱动器---完成---确定 2、将ansible.iso的光盘连接上&#xff08;右下角呈绿色状态&#xff09; 3、查看光盘挂载信息 df -h…...

编程日记 2024/12/16 8:33:33

docker—私有仓库搭建

docker—私有仓库搭建 HTTP 部署 docker run -d \-p 5000:5000 \--restartalways \--name registry \-v /opt/data/registry:/var/lib/registry \registry:2使用官方的 registry​ 镜像来启动私有仓库。默认情况下&#xff0c;仓库会被创建在容器的 /var/lib/registry​ 目录…...

编程日记 2024/12/16 8:32:30

【SpringAOP】深入浅出SpringAOP从原理到源码

AOP对象是如何创建的 对于熟悉Spring IOC流程源码的同学来说&#xff0c;一定了解bean的整个生命周期&#xff0c;也就是从实例化、属性填充、初始化三个过程。那么对于Bean 工厂来说&#xff0c;是如何保证需要创建代理的对象创建代理的呢。 从图中可以看到&#xff0c;本质…...

编程日记 2024/12/16 8:30:29

Java 从查询超时到性能提升 （实战讲解）

目录 1. 问题所示2. 原理分析3. 解决方法3.1 代码优化3.2 索引优化3.3 删数据 1. 问题所示 查询返回速度慢&#xff0c;导致前端页面无数据显示 前端和后端均未报错&#xff0c;但后端未能在合理时间内返回结果到前端 后端没有报错日志 2. 原理分析 单独分析代码中的对算法…...

编程日记 2024/12/16 8:29:27

《C 语言携手 PaddlePaddle C++ API：开启深度学习开发新征程》

在深度学习领域&#xff0c;PaddlePaddle 作为一款强大的深度学习框架&#xff0c;为开发者提供了丰富的功能和高效的计算能力。而 C 语言&#xff0c;凭借其高效性和广泛的应用场景&#xff0c;与 PaddlePaddle 的 C API 相结合&#xff0c;能够为深度学习开发带来独特的优势。…...

编程日记 2024/12/16 8:28:26

Mysql之存储过程

MySQL 存储过程&#xff08;Stored Procedure&#xff09; 1. 概念 存储过程是一组预编译的 SQL 语句集合&#xff0c;可以通过调用名称来执行。存储过程可以接收参数&#xff0c;并支持复杂的业务逻辑&#xff08;如条件语句、循环、异常处理等&#xff09;。它们可以提高代…...

编程日记 2024/12/16 8:27:25

XV6 开发环境搭建

Step 1 搭建ubuntu 20.04 虚拟机 注意&#xff1a;一定要使用ubuntu 20.04&#xff0c;该版本可以直接通过deb安装gnu编译工具链。 安装完虚拟机后&#xff0c;换apt源。 ubuntu20.04镜像下载链接 设置root账户密码: sudo passwd root Step 2 下载解压qemu 5.1.0 wget ht…...

编程日记 2024/12/16 8:25:23

Windows 系统下 Python 环境安装

一、引言 Python 作为一种广泛应用的编程语言&#xff0c;在数据分析、人工智能等领域发挥着重要作用。本文将详细介绍在 Windows 系统上安装 Python 环境的步骤。 二、安装前准备 系统要求 Windows 7 及以上版本一般都能支持 Python。硬件方面&#xff0c;通常 2GB 内存、几…...

编程日记 2024/12/16 8:24:22

从特征多项式到行列式：揭秘矩阵特征值之积的几何意义

1. 特征多项式&#xff1a;打开矩阵奥秘的钥匙 我第一次接触特征多项式时&#xff0c;完全被这个抽象的概念搞晕了。直到有一天&#xff0c;我的导师用了一个简单的比喻&#xff1a;"特征多项式就像是矩阵的DNA检测报告&#xff0c;它能告诉我们这个矩阵最本质的特性。&qu…...

编程新知 2026/4/4 18:15:54

达摩院CAM++说话人识别模型实战：5分钟搞定Modelscope部署与中文测试

达摩院CAM说话人识别模型实战&#xff1a;5分钟搞定Modelscope部署与中文测试 语音技术正在重塑人机交互的边界&#xff0c;而说话人识别作为其中的核心能力之一&#xff0c;已经从实验室走向工业级应用。达摩院开源的CAM模型以其卓越的准确率和计算效率&#xff0c;正在成为开…...

编程新知 2026/4/4 17:51:50

技术深度解析：如何通过Turbo Boost动态控制优化Mac系统性能与散热管理

技术深度解析&#xff1a;如何通过Turbo Boost动态控制优化Mac系统性能与散热管理 【免费下载链接】Turbo-Boost-Switcher Turbo Boost disabler / enable app for Mac OS X 项目地址: https://gitcode.com/gh_mirrors/tu/Turbo-Boost-Switcher Turbo Boost Switcher是一…...

编程新知 2026/4/4 17:05:03

Steam Achievement Manager终极指南：如何完全掌控你的Steam成就系统

Steam Achievement Manager终极指南&#xff1a;如何完全掌控你的Steam成就系统 【免费下载链接】SteamAchievementManager A manager for game achievements in Steam. 项目地址: https://gitcode.com/gh_mirrors/st/SteamAchievementManager Steam Achievement Manage…...

编程新知 2026/4/4 16:36:42

YimMenu全面指南：GTA V游戏体验的终极优化方案

YimMenu全面指南&#xff1a;GTA V游戏体验的终极优化方案 【免费下载链接】YimMenu YimMenu, a GTA V menu protecting against a wide ranges of the public crashes and improving the overall experience. 项目地址: https://gitcode.com/GitHub_Trending/yi/YimMenu …...

编程新知 2026/4/4 15:27:34

TensorFlow开发中用到的一些第三方库

本节介绍下后面开发要用到的辅助库&#xff0c;并做一些简单的代码实例和效果演示&#xff0c;当然我们都是为了最终目标TensorFlow开发做准备的&#xff0c;用到的也是这些库的简单的api&#xff0c;这里做简单的介绍为后面TensorFlow开发做准备&#xff0c;对于这些库的深入研…...

编程新知 2026/4/4 15:15:17

AnimateDiff终极指南：3步将静态图片变生动动画的免费神器

AnimateDiff终极指南&#xff1a;3步将静态图片变生动动画的免费神器 【免费下载链接】animatediff 项目地址: https://ai.gitcode.com/hf_mirrors/ai-gitcode/animatediff 你是否曾经幻想过&#xff0c;只需一行文字描述&#xff0c;就能让静态图片"活"起来…...

编程新知 2026/4/4 14:50:58

VSCode CLine插件深度配置：灵活切换OpenAI GPT与Claude 3.5模型进行智能编程

1. 为什么开发者需要多模型切换能力 在当今的AI辅助编程领域&#xff0c;OpenAI的GPT系列和Anthropic的Claude系列无疑是两大主流选择。我在实际项目中发现&#xff0c;不同模型在代码生成、错误修复和文档解释等方面各有千秋。比如GPT-4o擅长处理复杂算法逻辑&#xff0c;而Cl…...

编程新知 2026/4/4 12:57:37

双向互转｜IEC104↔Modbus 工业网关，电力 / 工业现场一键通联

一、产品核心定位三格电子推出SG-IEC104-TCP与SG-TCP-IEC104两款工业级网关&#xff0c;专为电力、能源、智能制造场景打造&#xff0c;实现IEC104 与 Modbus 双向协议转换&#xff0c;兼容 DLT645 电表采集&#xff0c;支持 MQTT 上云&#xff0c;打通电力主站与现场设备的数据…...

编程新知 2026/4/4 11:54:14

小白也能玩转Qwen3-TTS：一键部署多语言语音生成，实测效果惊艳

小白也能玩转Qwen3-TTS&#xff1a;一键部署多语言语音生成&#xff0c;实测效果惊艳 1. 为什么选择Qwen3-TTS 作为一个语音生成领域的从业者&#xff0c;我测试过市面上大多数TTS&#xff08;文本转语音&#xff09;模型&#xff0c;Qwen3-TTS-12Hz-1.7B-VoiceDesign给我留下…...

编程新知 2026/4/4 11:42:09