优化这段代码.pic { display: block; position: relative; margin-bottom: 3px; width: 50px; height: 50px; } .inner {overflow-y:auto;text-overflow:ellipsis;word-break:keep-all;white-space:nowrap; border: solid 3px #fff; padding: 16px 16px 0; position: absolute; } ul{list-style-type: none;} li {float: left; width: 100px; height: 100px; line-height: 18px; position: relative; border-bottom: solid 1px #e5e5e5; } li div {margin-bottom:1px;margin-left: 10px;} body,ul, li, p,img, div { margin: 0; padding: 0; list-style-type: none; font-size: 12px;} .price {padding-bottom: 3px; color: #878787; } .price_n {color: #c30; font-weight: bold; padding-right: 10px; font-family: Arial; } .price_s {color: #c30; font-family: Arial; } .price_r {color: #878787; text-decoration: line-through; padding-right: 10px; font-family: Arial; } #bookname {text-decoration:underline; color:#555555; display: block; overflow: auto; width: 200px; font-family: Arial; } #bookname:hover {color:#FF6600; } .inner a {color: #018BD3;} .inner a:hover {color:#FF6600; } .inner a:VISITED {color:#018BD3;}

<!DOCTYPE html> <html lang="zh-CN"> <style> /* 全局样式 / { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background-color: #f7eaea; color: #333; text-align: center; padding: 20px; } header h1 { font-size: 2em; color: #ff6b6b; margin-bottom: 20px; } .card { background-color: white; border-radius: 10px; padding: 20px; max-width: 400px; margin: auto; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .profile-pic { width: 100%; border-radius: 50%; margin-bottom: 20px; } button { background-color: #ff6b6b; color: white; border: none; padding: 10px 20px; cursor: pointer; border-radius: 5px; transition: all 0.3s ease-in-out; } button:hover { background-color: #ff4d4d; } </style> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>母亲节快乐</title> </head> <body>
祝妈妈母亲节快乐 ❤️
<main>
亲爱的妈妈：感谢您一直以来的关爱和支持。 <button id="playVideo">播放祝福视频</button>

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
</main>
© 2023 母亲节特别献礼
<script src="srcipt.js"></script> </body> </html> </body> </html>把妈妈的照片和播放视频改为爱心播放

position: relative; top: 50%; transform: translateY(-50%); } .heart-icon:before { content: "\2665"; /* Unicode Heart Symbol */ font-size: 80px; color: red; display: block; } 上述代码片段...

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2023610221 诸梦盈</title> <style> header{ width: 1200px; padding: 0; margin: 0 auto; box-sizing: border-box; } header h1{ text-align: center; } hr{ height: 2px; background-color: #aaaaff; border: none; } .gwc{ width: 1200px; margin: auto; } .bt{ width: 1200px; height: 50px; line-height: 50px; color:#aaaaff; font-size: 32px; } .tab{ margin-top: 20px; width: 1200px; border-collapse: collapse; } thead tr th{ height:50px; text-align: left; background-color: #aaaaff; padding-left: 10px; } thead tr th:nth-of-type(1){ width: 80px; } img{ width: 60px; height: 60px; } td{ height: 80px; padding-left: 10px; border-bottom: 2px solid #aaaaff; } .btn1{ background-color:#aaaaff; border: none; width: 20px; height: 20px; } input{ width: 18px; } .sc{ background-color: crimson; width: 50px; height: 30px; border: 0; color: white; } #yhq,#jsxx{ width: 1200px; height: 50px; line-height: 50px; color:#aaaaff; font-size: 32px; padding: 10px 0px; } .yhzc{ display: flex; flex-wrap: wrap; padding-right: 20px; margin:auto; width: 1200px; } #yhq1,#yhq2,#yhq3{ width: 380px; height: 100px; margin:auto; background-color: #aaaaff; border: 2px dotted #aa55ff; color: white; text-align: center; } .js{ width: 1200px; } .jswz{ height: 50px; background-color: #aaaaff; } .js-title{ margin: 5px; padding-right: 5px; font-size: 15px; } #zongshu,#zongjia,#shuliang,#manjian,#yinfu{ float: right; padding: 5px; } .yfje{ font-size: 20px; color: blueviolet; } #yinfu{ font-size: 20px; color: blueviolet; } #jsbtn{ margin-top: 10px; background-color: #aaaaff; width: 50px; height: 30px; color: white; float: right; } /* 弹窗 (background) / .tc { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); justify-content: center; align-items: center; } #jsxq{ font-size: 32px; font-weight: bold; padding-bottom: 20px; } .close{ float: right; font-size: 32px; } .close:hover{ color:red; } / 弹窗内容 / .tc-content { position: relative; background-color: #fefefe; margin:auto; border: 1px solid #888; width: 600px; } </style> </head> <body>
学生文具购物车

已选商品
图片商品单价数量小计操作 2B铅笔（12支笔）优质木质拖拽，书写顺畅，不粘附 ¥15.00 <button class="btn1" onclick="updateQuantity(1, -1)">-</button> <input type="text" class="quantity-input" id="qty1" value="1" readonly> <button class="btn1" onclick="updateQuantity(1, 1)">+</button> ¥15 <button class="sc" onclick="removeProduct(1)"> 删除 </button> A5笔记本优质纸张，方格设计，适合日常记录 ¥12 <button class="btn1" onclick="updateQuantity(2, -1)">-</button> <input type="text" class="quantity-input" id="qty2" value="1" readonly> <button class="btn1" onclick="updateQuantity(2, 1)">+</button> ¥12 <button class="sc" onclick="removeProduct(2)"> 删除 </button> 彩色荧光笔（5色）多彩荧光标记笔，不易洇染 ¥18.00 <button class="btn1" onclick="updateQuantity(3, -1)">-</button> <input type="text" class="quantity-input" id="qty3" value="1" readonly> <button class="btn1" onclick="updateQuantity(3, 1)">+</button> ¥18 <button class="sc" onclick="removeProduct(3)"> 删除 </button> 橡皮擦（3块装）高效擦除，不留痕迹，不易碎 ¥6.00 <button class="btn1" onclick="updateQuantity(4, -1)">-</button> <input type="text" class="quantity-input" id="qty4" value="1" readonly> <button class="btn1" onclick="updateQuantity(4, 1)">+</button> ¥6 <button class="sc" onclick="removeProduct(4)"> 删除 </button> 直尺30cm 透明刻度清晰，耐用防折断 ¥5 <button class="btn1" onclick="updateQuantity(5, -1)">-</button> <input type="text" class="quantity-input" id="qty5" value="1" readonly> <button class="btn1" onclick="updateQuantity(5, 1)">+</button> ¥5 <button class="sc" onclick="removeProduct(5)"> 删除 </button> 圆规精密绘图工具，金属材质耐用 ¥8 <button class="btn1" onclick="updateQuantity(6, -1)">-</button> <input type="text" class="quantity-input" id="qty6" value="1" readonly> <button class="btn1" onclick="updateQuantity(6, 1)">+</button> ¥8 <button class="sc" onclick="removeProduct(6)"> 删除 </button> 钢笔经典款式，流畅书写，赠送墨囊 ¥20.00 <button class="btn1" onclick="updateQuantity(7, -1)">-</button> <input type="text" class="quantity-input" id="qty7" value="1" readonly> <button class="btn1" onclick="updateQuantity(7,1)">+</button> ¥20 <button class="sc" onclick="removeProduct(7)"> 删除 </button> 文件夹 A4尺寸，可装30页纸，多色可选 ¥16.00 <button class="btn1" onclick="updateQuantity(8, -1)">-</button> <input type="text" class="quantity-input" id="qty8" value="1" readonly> <button class="btn1" onclick="updateQuantity(8, 1)">+</button> ¥16 <button class="sc" onclick="removeProduct(8)"> 删除 </button> 修正带 5mm宽度，8m长，修正精确无残留 ¥10.00 <button class="btn1" onclick="updateQuantity(9, -1)">-</button> <input type="text" class="quantity-input" id="qty9" value="1" readonly> <button class="btn1" onclick="updateQuantity(9, 1)">+</button> ¥10 <button class="sc" onclick="removeProduct(9)"> 删除 </button> 便利贴套装多色组合，3种尺寸，便于标记归类 ¥14.00 <button class="btn1" onclick="updateQuantity(10, -1)">-</button> <input type="text" class="quantity-input" id="qty10" value="1" readonly> <button class="btn1" onclick="updateQuantity(10, 1)">+</button> ¥14 <button class="sc" onclick="removeProduct(10)"> 删除 </button> 优惠券
满100减10元有效使用满200减30元有效使用满500减90元有效使用结算信息
商品总额￥236.00 数量折扣 -￥28.00 满减优惠 -￥30.00 应付金额￥178.00 <button id="jsbtn">结算</button> 结算详情 × 商品总数 20 商品总额￥236.00 数量折扣 -￥28.00 满减优惠 -￥30.00 应付金额￥178.00 <script> // 打开弹窗的按钮对象 var btn = document.getElementById("jsbtn"); // 获取元素，用于关闭弹窗 var span = document.querySelector('.close'); // 点击按钮打开弹窗 btn.onclick = function() { tc.style.display = "block"; } // 点击 (x), 关闭弹窗 span.onclick = function() { tc.style.display = "none"; } // 删除商品 function removeProduct(productId) { const productRow = document.getElementById(product${productId}); productRow.style.display = 'none'; // 重置数量为0 const quantityInput = document.getElementById(qty${productId}); quantityInput.value = 0; // 重新计算总价 calculateTotal(); } // 更新商品数量 function updateQuantity(productId, change) { // 获取商品行 var productRow = document.getElementById('product' + productId); if (!productRow) return; // 获取数量输入框 var qtyInput = productRow.querySelector('.quantity-input'); if (!qtyInput) return; // 获取当前数量 var currentQty = parseInt(qtyInput.value); // 更新数量（不能小于0） var newQty = currentQty + change; if (newQty < 0) newQty = 0; // 更新页面显示 qtyInput.value = newQty; // 更新小计 updateSubtotal(productId); // 重新计算总价 calculateTotal(); } // 更新商品小计 function updateSubtotal(productId) { // 获取商品行 var productRow = document.getElementById('product' + productId); if (!productRow) return; // 获取价格元素 var priceElement = productRow.querySelector('.original-price'); if (!priceElement) return; // 获取价格（去掉¥符号） var price = parseFloat(priceElement.textContent.replace('¥', '')); // 获取数量输入框 var qtyInput = productRow.querySelector('.quantity-input'); if (!qtyInput) return; // 获取当前数量 var quantity = parseInt(qtyInput.value); // 计算折扣（2件9折，3件及以上8折） var discount = 1.0; if (quantity >= 3) { discount = 0.8; // 3件及以上8折 } else if (quantity === 2) { discount = 0.9; // 2件9折 } // 计算小计 var subtotal = price quantity * discount; // 更新小计显示 var subtotalElement = productRow.querySelector('.jg'); if (subtotalElement) { subtotalElement.textContent = '¥' + subtotal.toFixed(2); } } // 计算总价和应用优惠券 function calculateTotal() { // 商品总额 var total = 0; // 数量折扣总额 var quantityDiscount = 0; // 商品总数 var totalItems = 0; // 遍历所有商品行（1到10） for (var i = 1; i <= 10; i++) { var productRow = document.getElementById('product' + i); // 如果商品行不存在（已被删除），跳过 if (!productRow) continue; // 获取价格元素 var priceElement = productRow.querySelector('.original-price'); if (!priceElement) continue; // 获取价格（去掉¥符号） var price = parseFloat(priceElement.textContent.replace('¥', '')); // 获取数量输入框 var qtyInput = productRow.querySelector('.quantity-input'); if (!qtyInput) continue; // 获取当前数量 var quantity = parseInt(qtyInput.value); // 计算折扣（2件9折，3件及以上8折） var discount = 1.0; if (quantity >= 3) { discount = 0.8; } else if (quantity === 2) { discount = 0.9; } // 计算原价小计 var originalSubtotal = price * quantity; // 计算折扣后小计 var discountedSubtotal = originalSubtotal * discount; // 累加到总额 total += discountedSubtotal; // 累加数量折扣 quantityDiscount += (originalSubtotal - discountedSubtotal); // 累加商品总数 totalItems += quantity; } // 应用优惠券 var couponDiscount = 0; // 按阈值从大到小检查优惠券 if (total >= 500) { couponDiscount = 90; // 满500减90 highlightCoupon(3); } else if (total >= 200) { couponDiscount = 30; // 满200减30 highlightCoupon(2); } else if (total >= 100) { couponDiscount = 10; // 满100减10 highlightCoupon(1); } else { // 没有适用的优惠券，重置所有优惠券高亮 resetCouponHighlights(); } // 计算应付金额 var payable = total - couponDiscount; // 更新结算信息 document.getElementById('zongjia').textContent = '¥' + total.toFixed(2); document.getElementById('shuliang').textContent = '-¥' + quantityDiscount.toFixed(2); document.getElementById('manjian').textContent = '-¥' + couponDiscount.toFixed(2); document.getElementById('yinfu').textContent = '¥' + payable.toFixed(2); // 更新弹窗中的商品总数 document.getElementById('zongshu').textContent = totalItems; } // 高亮显示激活的优惠券 function highlightCoupon(couponId) { // 重置所有优惠券高亮 resetCouponHighlights(); // 高亮指定优惠券 var couponElement = document.getElementById('yhq' + couponId); if (couponElement) { couponElement.classList.add('active-coupon'); } } // 重置所有优惠券高亮 function resetCouponHighlights() { // 移除所有优惠券的高亮效果 for (var i = 1; i <= 3; i++) { var couponElement = document.getElementById('yhq' + i); if (couponElement) { couponElement.classList.remove('active-coupon'); } } } </script> </body> </html> 这段代码哪里有问题，比如id名字没对上，以及为什么弹窗里的价格不会更新

这段代码实现了一个学生文具购物车的功能，包括商品数量的增减、删除商品、计算总价、应用优惠券以及弹窗结算详情。然而，代码中存在一些问题，导致弹窗中的价格不会更新。 --- ### 代码解析 #### 1. **问题一：...

写一个作品展示的html，首先要有导航栏，然后中间有一个九宫格放图片，图片下面有文字介绍，页脚有回到顶部，最后要有版权提示的html5+css3的页面

margin-bottom: 10px; } .back-to-top a { display: inline-block; padding: 10px; background-color: #333; color: #fff; text-decoration: none; } .back-to-top a:hover { background-color: #fff; ...

【税会实务】Excel文字输入技巧.doc

中职计算机教学大纲(1).docx

【税会实务】Excel学习：日期函数.doc

langchain4j-community-vearch-1.0.0-beta4.jar中文文档.zip

1、压缩文件中包含：中文文档、jar包下载地址、Maven依赖、Gradle依赖、源代码下载地址。 2、使用方法：解压最外层zip，再解压其中的zip包，双击【index.html】文件，即可用浏览器打开、进行查看。 3、特殊说明：（1）本文档为人性化翻译，精心制作，请放心使用；（2）只翻译了该翻译的内容，如：注释、说明、描述、用法讲解等；（3）不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码等。 4、温馨提示：（1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）；（2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件。 5、本文件关键字： jar中文文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册。

《Spring-in-china》Seasons-PPT课件【品质课件PPT】.pptx

langchain4j-community-vearch-spring-boot-starter-1.0.0-beta3.jar中文文档.zip

1、压缩文件中包含：中文文档、jar包下载地址、Maven依赖、Gradle依赖、源代码下载地址。 2、使用方法：解压最外层zip，再解压其中的zip包，双击【index.html】文件，即可用浏览器打开、进行查看。 3、特殊说明：（1）本文档为人性化翻译，精心制作，请放心使用；（2）只翻译了该翻译的内容，如：注释、说明、描述、用法讲解等；（3）不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码等。 4、温馨提示：（1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）；（2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件。 5、本文件关键字： jar中文文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册。

南街小学教育信息化建设评价与激励制度(1).doc

《四通八达的交通》多样的交通和通信PPT下载.pptx

【税会实务】excel中小数点快速录入技巧汇总.doc

《七彩靓衣》网站策划方案.doc

相关推荐

优化算法的代码

优化代码

代码优化方式

网页制作代码+课程总结

jquery六屏自动切换焦点图代码

深入解析js轮播插件核心代码的实现过程

写一个作品展示的html，首先要有导航栏，然后中间有一个九宫格放图片，图片下面有文字介绍，页脚有回到顶部，最后要有版权提示的html5+css3的页面

【税会实务】Excel文字输入技巧.doc

中职计算机教学大纲(1).docx

【税会实务】Excel学习：日期函数.doc

langchain4j-community-vearch-1.0.0-beta4.jar中文文档.zip

《Spring-in-china》Seasons-PPT课件【品质课件PPT】.pptx

langchain4j-community-vearch-spring-boot-starter-1.0.0-beta3.jar中文文档.zip

南街小学教育信息化建设评价与激励制度(1).doc

《四通八达的交通》多样的交通和通信PPT下载.pptx

【税会实务】excel中小数点快速录入技巧汇总.doc

《七彩靓衣》网站策划方案.doc

大家在看

Unity3D 实战视频教程 保卫萝卜 2D 游戏开发

纯电动汽车百公里电耗计算

波恩癫痫脑电5种类.zip

fortran77源程序转C工具包

Kvaser CANLIB API.pdf

最新推荐

NetFPGA-1G-CML： Kintex-7 FPGA开发板 用户手册.pdf

git 一个可以提高开发效率的命令：cherry-pick详解

【税会实务】Excel文字输入技巧.doc

C++实现的DecompressLibrary库解压缩GZ文件

【数据融合技术】：甘肃土壤类型空间分析中的专业性应用

VM ware如何查看软件版本信息

数据库课程设计报告：常用数据库综述

【空间分布规律】：甘肃土壤类型与农业生产的关联性研究

在halcon中，卡尺测量和二维测量谁的精度高

掌握牛顿法解方程：切线与割线的程序应用

Unity3D 实战视频教程保卫萝卜 2D 游戏开发

NetFPGA-1G-CML： Kintex-7 FPGA开发板用户手册.pdf