CSS小计

100vh与100%

vh是Viewport Height(视口高度)的缩写。
100vh表时高度是视口高度,100%可能是视口高度,也可能是相对父元素的高度。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
好的,以下是一个简单的购物车表格的示例代码,包括加减按钮和总价小计功能: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>购物车</title> <style> table { border-collapse: collapse; width: 100%; } th, td { text-align: center; padding: 8px; border: 1px solid #ddd; } th { background-color: #f2f2f2; } .total { font-weight: bold; } </style> </head> <body> <table> <thead> <tr> <th>商品名称</th> <th>单价</th> <th>数量</th> <th>小计</th> </tr> </thead> <tbody> <tr> <td>商品1</td> <td>10.00</td> <td> <button class="reduce">-</button> <span class="amount">1</span> <button class="add">+</button> </td> <td class="subtotal">10.00</td> </tr> <tr> <td>商品2</td> <td>20.00</td> <td> <button class="reduce">-</button> <span class="amount">1</span> <button class="add">+</button> </td> <td class="subtotal">20.00</td> </tr> <tr> <th colspan="3" class="total">总价</th> <td id="totalPrice">30.00</td> </tr> </tbody> </table> <script> // 获取元素 const reduceBtns = document.querySelectorAll('.reduce'); const addBtns = document.querySelectorAll('.add'); const amountEles = document.querySelectorAll('.amount'); const subtotalEles = document.querySelectorAll('.subtotal'); const totalPriceEle = document.querySelector('#totalPrice'); // 定义变量 let totalPrice = 0; // 绑定事件 for (let i = 0; i < reduceBtns.length; i++) { reduceBtns[i].addEventListener('click', function() { let amount = parseInt(amountEles[i].textContent); if (amount > 1) { amount--; amountEles[i].textContent = amount; let price = parseFloat(subtotalEles[i].textContent) / (amount + 1); subtotalEles[i].textContent = (price * amount).toFixed(2); totalPrice = parseFloat(totalPrice) - price; totalPriceEle.textContent = totalPrice.toFixed(2); } }); } for (let i = 0; i < addBtns.length; i++) { addBtns[i].addEventListener('click', function() { let amount = parseInt(amountEles[i].textContent); amount++; amountEles[i].textContent = amount; let price = parseFloat(subtotalEles[i].textContent) / (amount - 1); subtotalEles[i].textContent = (price * amount).toFixed(2); totalPrice = parseFloat(totalPrice) + price; totalPriceEle.textContent = totalPrice.toFixed(2); }); } // 计算初始总价 for (let i = 0; i < subtotalEles.length; i++) { totalPrice += parseFloat(subtotalEles[i].textContent); } totalPriceEle.textContent = totalPrice.toFixed(2); </script> </body> </html> ``` 代码解释: 1. HTML部分:使用`<table>`标签创建表格,包括表头和表体两部分。每个商品行都有一个数量`<td>`单元格,里面包含一个减少按钮、一个显示数量的`<span>`元素和一个增加按钮。总价小计使用`<td>`标记,总价使用`<td>`标记和一个`id`属性。 2. CSS部分:设置表格样式,包括边框、对齐和背景色。 3. JavaScript部分:获取所有需要操作的元素,并定义一个变量`totalPrice`用于统计总价。为减少按钮和增加按钮绑定`click`事件,用于修改数量和小计,并更新总价。在页面加载时计算初始总价。 以上代码仅供参考,实际应用中可能需要根据实际情况进行调整和优化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

秦剑

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值