<!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;
}
.yhqbh {
background-color: blue;
color: white;
}
#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>
<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="product3">
<td>
<img src="img/pic3.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="qty3" value="1" readonly>
<button class="btn1" onclick="updateQuantity(3, 1)">
+</button>
</td>
<td >
<
div class="jg" id="jg3">¥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>
<h3>有效使用</h3>
</
div>
<
div class="yhqbh" id="yhq2">
<p>满200减30元</p>
<h3>有效使用</h3>
</
div>
<
div class="yhqbh" id="yhq3">
<p>满500减90元</p>
<h3>有效使用</h3>
</
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">￥236.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">￥236.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('.close');
// 点击按钮打开弹窗
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 = '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.querySelector('#tc #zongjia').textContent = '¥'
+ total.toFixed(2);
document.querySelector('#tc #shuliang').textContent = '-¥'
+ quantityDiscount.toFixed(2);
document.querySelector('#tc #manjian').textContent = '-¥'
+ couponDiscount.toFixed(2);
document.querySelector('#tc #yinfu').textContent = '¥'
+ payable.toFixed(2);
// 更新弹窗中的商品总数
document.getElementById('zongshu').textContent = totalItems;
}
// 修改后的 highlightCoupon 函数
function highlightCoupon(yhqId) {
// 重置所有优惠券高亮
resetCouponHighlights();
// 高亮指定优惠券
var xs = document.getElementById('yhq'
+ yhqId);
if (xs) {
xs.classList.add('active-coupon'); // 添加新的高亮类
}
}
// 修改后的 resetCouponHighlights 函数
function resetCouponHighlights() {
// 移除所有优惠券的高亮效果
for (var i = 1; i <= 3; i
++) {
var xs = document.getElementById('yhq'
+ i);
if (xs) {
xs.classList.remove('active-coupon'); // 移除高亮类
}
}
}
</script>
</body>
</
html>
请把优惠券变化改为变色及变字，代码基础化
本文分享了一次根据领导要求复刻Windows 8风格界面的经历，详细展示了从初始布局到最终成品的过程，包括HTML和CSS代码示例。
扫一扫
1958
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
