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

HTML和JavaScript实现商品购物系统

news 2026/2/10 22:40:28

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

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

编程新知 2026/2/8 6:37:38

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

编程新知 2025/9/14 7:59:52

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

编程新知 2026/2/9 15:41:39

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

编程新知 2026/1/23 4:15:03

【位运算】消失的两个数字（hard）

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

编程新知 2025/11/15 16:18:24

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

编程新知 2026/2/1 1:50:03

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

编程新知 2026/2/6 9:48:02

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

编程新知 2025/9/9 5:38:23

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

编程新知 2026/1/29 17:54:05

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

编程新知 2026/2/1 6:36:36