<!DOC
TYPE html>
<
html>
<head>
<meta charset
="utf-8">
<title>202
3610221 诸梦盈</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;
}
.yhqbh {
background-color: blue;
color: white;
}
#yhq1,#yhq2,#yhq
3{
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>
<header>
<h1>学生文具购物车</h1>
<hr />
</header>
<section class
="gwc">
<div class
="bt">
<span>已选商品</span>
<hr />
</div>
<table class
="tab">
<thead>
<tr>
<th>图片</th>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr id
="product1">
<td>
<img src
="img/pic1.jpg"/>
</div>
</td>
<td>
<div class
="ms-name">2B铅笔（12支笔）</div>
<div class
="ms1">优质木质拖拽，书写顺畅，不粘附</div>
</td>
<td >
<span class
="original-price">¥15.00</span>
</td>
<td >
<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>
</td>
<td >
<div class
="jg" id
="jg1">¥15</div>
</td>
<td >
<button class
="sc" onclick
="removeProduct(1)">
删除
</button>
</td>
</tr>
<tr id
="product2">
<td>
<img src
="img/pic2.jpg"/>
</div>
</td>
<td>
<div class
="ms-name">A5笔记本</div>
<div class
="ms1">优质纸张，方格设计，适合日常记录<div>
</td>
<td >
<span class
="original-price">¥12</span>
</td>
<td >
<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>
</td>
<td >
<div class
="jg" id
="jg2">¥12</div>
</td>
<td >
<button class
="sc" onclick
="removeProduct(2)">
删除
</button>
</td>
</tr>
<tr id
="product
3">
<td>
<img src
="img/pic
3.jpg"/>
</div>
</td>
<td>
<div class
="ms-name">彩色荧光笔（5色）</div>
<div class
="ms1">多彩荧光标记笔，不易洇染</div>
</td>
<td >
<span class
="original-price">¥18.00</span>
</td>
<td >
<button class
="btn1" onclick
="updateQuantity(
3, -1)">-</button>
<input
type="
text" class
="quantity-input" id
="qty
3" value
="1" readonly>
<button class
="btn1" onclick
="updateQuantity(
3, 1)">+</button>
</td>
<td >
<div class
="jg" id
="jg
3">¥18</div>
</td>
<td >
<button class
="sc" onclick
="removeProduct(
3)">
删除
</button>
</td>
</tr>
<tr id
="product4">
<td>
<img src
="img/pic4.jpg"/>
</div>
</td>
<td>
<div class
="ms-name">橡皮擦（
3块装）</div>
<div class
="ms1">高效擦除，不留痕迹，不易碎</div>
</td>
<td >
<span class
="original-price">¥6.00</span>
</td>
<td >
<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>
</td>
<td >
<div class
="jg" id
="jg4">¥6</div>
</td>
<td >
<button class
="sc" onclick
="removeProduct(4)">
删除
</button>
</td>
</tr>
<tr id
="product5">
<td>
<img src
="img/pic5.jpg"/>
</div>
</td>
<td>
<div class
="ms-name">直尺
30cm</div>
<div class
="ms1">透明刻度清晰，耐用防折断</div>
</td>
<td >
<span class
="original-price">¥5</span>
</td>
<td >
<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>
</td>
<td >
<div class
="jg" id
="jg5">¥5</div>
</td>
<td >
<button class
="sc" onclick
="removeProduct(5)">
删除
</button>
</td>
</tr>
<tr id
="product6">
<td>
<img src
="img/pic6.jpg"/>
</div>
</td>
<td>
<div class
="ms-name">圆规</div>
<div class
="ms1">精密绘图工具，金属材质耐用</div>
</td>
<td >
<span class
="original-price">¥8</span>
</td>
<td >
<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>
</td>
<td >
<div class
="jg" id
="jg6">¥8</div>
</td>
<td >
<button class
="sc" onclick
="removeProduct(6)">
删除
</button>
</td>
</tr>
<tr id
="product7">
<td>
<img src
="img/pic7.jpg"/>
</div>
</td>
<td>
<div class
="ms-name">钢笔</div>
<div class
="ms1">经典款式，流畅书写，赠送墨囊</div>
</td>
<td >
<span class
="original-price">¥20.00</span>
</td>
<td >
<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>
</td>
<td >
<div class
="jg" id
="jg7">¥20</div>
</td>
<td >
<button class
="sc" onclick
="removeProduct(7)">
删除
</button>
</td>
</tr>
<tr id
="product8">
<td>
<img src
="img/pic8.jpg"/>
</div>
</td>
<td>
<div class
="ms-name">文件夹</div>
<div class
="ms1">A4尺寸，可装
30页纸，多色可选</div>
</td>
<td >
<span class
="original-price">¥16.00</span>
</td>
<td >
<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>
</td>
<td >
<div class
="jg" id
="jg8">¥16</div>
</td>
<td >
<button class
="sc" onclick
="removeProduct(8)">
删除
</button>
</td>
</tr>
<tr id
="product9">
<td>
<img src
="img/pic9.jpg"/>
</div>
</td>
<td>
<div class
="ms-name">修正带</div>
<div class
="ms1">5mm宽度，8m长，修正精确无残留</div>
</td>
<td >
<span class
="original-price">¥10.00</span>
</td>
<td >
<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>
</td>
<td >
<div class
="jg" id
="jg9">¥10</div>
</td>
<td >
<button class
="sc" onclick
="removeProduct(9)">
删除
</button>
</td>
</tr>
<tr id
="product10">
<td>
<img src
="img/pic10.jpg"/>
</div>
</td>
<td>
<div class
="ms-name">便利贴套装</div>
<div class
="ms1">多色组合，
3种尺寸，便于标记归类</div>
</td>
<td >
<span class
="original-price">¥14.00</span>
</td>
<td >
<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>
</td>
<td >
<div class
="jg" id
="jg10">¥14</div>
</td>
<td >
<button class
="sc" onclick
="removeProduct(10)">
删除
</button>
</td>
</tr>
</tbody>
</table>
<div class
="yh">
<div id
="yhq">优惠券</div>
<hr />
<div class
="yhzc">
<div class
="yhqbh" id
="yhq1">
<p>满100减10元</p>
<h
3>有效使用</h
3>
</div>
<div class
="yhqbh" id
="yhq2">
<p>满200减
30元</p>
<h
3>有效使用</h
3>
</div>
<div class
="yhqbh" id
="yhq
3">
<p>满500减90元</p>
<h
3>有效使用</h
3>
</div>
</div>
</div>
<div class
="js">
<div id
="jsxx">结算信息</div>
<hr />
<div class
="jsxx1">
<div class
="jswz">
<span class
="js-title">商品总额</span>
<span id
="zongjia">￥2
36.00</span>
</div>
<div class
="jswz">
<span class
="js-title">数量折扣</span>
<span id
="shuliang">-￥28.00</span>
</div>
<div class
="jswz">
<span class
="js-title">满减优惠</span>
<span id
="manjian">-￥
30.00</span>
</div>
<div class
="jswz">
<span class
="yfje">应付金额</span>
<span id
="yinfu">￥178.00</span>
</div>
<button id
="jsbtn">结算</button>
</div>
</div>
<!-- 弹窗 -->
<div id
="tc" class
="tc">
<!-- 弹窗内容 -->
<div class
="tc-content">
<span id
=jsxq>结算详情</span>
<span class
="close">×</span>
<div id
="nr">
<div class
="jswz">
<span class
="js-title">商品总数</span>
<span id
="zongshu">20</span>
</div>
<div class
="jswz">
<span class
="js-title">商品总额</span>
<span id
="zongjia">￥2
36.00</span>
</div>
<div class
="jswz">
<span class
="js-title">数量折扣</span>
<span id
="shuliang">-￥28.00</span>
</div>
<div class
="jswz">
<span class
="js-title">满减优惠</span>
<span id
="manjian">-￥
30.00</span>
</div>
<div class
="jswz">
<span class
="yfje">应付金额</span>
<span id
="yinfu">￥178.00</span>
</div>
</div>
</div>
</div>
<script>
// 打开弹窗的按钮对象
var btn
= document.getElementById("jsbtn");
// 获取 <span> 元素，用于关闭弹窗
var span
= document.querySelector(&#
39;.close&#
39;);
// 点击按钮打开弹窗
btn.onclick
= function() {
tc.
style.display
= "block";
}
// 点击 <span> (x), 关闭弹窗
span.onclick
= function() {
tc.
style.display
= "none";
}
// 删除商品
function removeProduct(productId) {
const productRow
= document.getElementById(`product${productId}`);
productRow.
style.display
= &#
39;none&#
39;;
// 重置数量为0
const quantityInput
= document.getElementById(`qty${productId}`);
quantityInput.value
= 0;
// 重新计算总价
calculateTotal();
}
// 更新商品数量
function updateQuantity(productId, change) {
// 获取商品行
var productRow
= document.getElementById(&#
39;product&#
39; + productId);
if (!productRow) return;
// 获取数量输入框
var qtyInput
= productRow.querySelector(&#
39;.quantity-input&#
39;);
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(&#
39;product&#
39; + productId);
if (!productRow) return;
// 获取价格元素
var priceElement
= productRow.querySelector(&#
39;.original-price&#
39;);
if (!priceElement) return;
// 获取价格（去掉¥符号）
var price
= parseFloat(priceElement.
textContent.replace(&#
39;¥&#
39;, &#
39;&#
39;));
// 获取数量输入框
var qtyInput
= productRow.querySelector(&#
39;.quantity-input&#
39;);
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(&#
39;.jg&#
39;);
if (subtotalElement) {
subtotalElement.
textContent
= &#
39;¥&#
39; + 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(&#
39;product&#
39; + i);
// 如果商品行不存在（已被删除），跳过
if (!productRow) continue;
// 获取价格元素
var priceElement
= productRow.querySelector(&#
39;.original-price&#
39;);
if (!priceElement) continue;
// 获取价格（去掉¥符号）
var price
= parseFloat(priceElement.
textContent.replace(&#
39;¥&#
39;, &#
39;&#
39;));
// 获取数量输入框
var qtyInput
= productRow.querySelector(&#
39;.quantity-input&#
39;);
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(&#
39;zongjia&#
39;).
textContent
= &#
39;¥&#
39; + total.toFixed(2);
document.getElementById(&#
39;shuliang&#
39;).
textContent
= &#
39;-¥&#
39; + quantityDiscount.toFixed(2);
document.getElementById(&#
39;manjian&#
39;).
textContent
= &#
39;-¥&#
39; + couponDiscount.toFixed(2);
document.getElementById(&#
39;yinfu&#
39;).
textContent
= &#
39;¥&#
39; + payable.toFixed(2);
document.querySelector(&#
39;#tc #zongjia&#
39;).
textContent
= &#
39;¥&#
39; + total.toFixed(2);
document.querySelector(&#
39;#tc #shuliang&#
39;).
textContent
= &#
39;-¥&#
39; + quantityDiscount.toFixed(2);
document.querySelector(&#
39;#tc #manjian&#
39;).
textContent
= &#
39;-¥&#
39; + couponDiscount.toFixed(2);
document.querySelector(&#
39;#tc #yinfu&#
39;).
textContent
= &#
39;¥&#
39; + payable.toFixed(2);
// 更新弹窗中的商品总数
document.getElementById(&#
39;zongshu&#
39;).
textContent
= totalItems;
}
// 修改后的 highlightCoupon 函数
function highlightCoupon(yhqId) {
// 重置所有优惠券高亮
resetCouponHighlights();
// 高亮指定优惠券
var xs
= document.getElementById(&#
39;yhq&#
39; + yhqId);
if (xs) {
xs.classList.add(&#
39;active-coupon&#
39;); // 添加新的高亮类
}
}
// 修改后的 resetCouponHighlights 函数
function resetCouponHighlights() {
// 移除所有优惠券的高亮效果
for (var i
= 1; i <
= 3; i++) {
var xs
= document.getElementById(&#
39;yhq&#
39; + i);
if (xs) {
xs.classList.remove(&#
39;active-coupon&#
39;); // 移除高亮类
}
}
}
</script>
</body>
</
html>
请把优惠券变化改为变色及变字，代码基础化
本文介绍了在HTML中应用CSS样式的三种常见方法：内部引用，通过style标签在HTML头部定义样式；外部引用，利用link标签链接外部CSS文件；以及内联引用，直接在HTML元素中定义CSS样式。每种方法的特点和适用场景都有所不同，内部引用方便管理，外部引用保持页面结构清晰，内联引用则适用于特定样式需求。
扫一扫
3263
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
