简单的购物车功能

最新推荐文章于 2024-06-10 21:57:03 发布
最新推荐文章于 2024-06-10 21:57:03 发布
阅读量91 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/TTTK/p/6208971.html
版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车</title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
a {
color: #666;
text-decoration: none;
}
body {
padding: 20px;
color: #666;
}
.fl{
float: left;
}
.fr {
float: right;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 0;
text-align: center;
width: 937px;
}
th, td {
border: 1px solid #CADEFF;
}
th {
background: #e2f2ff;
border-top: 3px solid #a7cbff;
height: 30px;
}
td {
padding: 10px;
color: #444;
}
tbody tr:hover {
background: RGB(238,246,255);
}
.checkbox {
width: 60px;
}
.goods {
width: 300px;
}
.goods span {
width: 180px;
margin-top: 20px;
text-align: left;
float: left;
}
.price {
width: 130px;
}
.count {
width: 90px;
}
.count .add, .count input, .count .reduce {
float: left;
margin-right: -1px;
position: relative;
z-index: 0;
}
.count .add, .count .reduce {
height: 23px;
width: 17px;
border: 1px solid #e5e5e5;
background: #f0f0f0;
text-align: center;
line-height: 23px;
color: #444;
}
.count .add:hover, .count .reduce:hover {
color: #f50;
z-index: 3;
border-color: #f60;
cursor: pointer;
}
.count input {
width: 50px;
height: 15px;
line-height: 15px;
border: 1px solid #aaa;
color: #343434;
text-align: center;
padding: 4px 0;
background-color: #fff;
z-index: 2;
}
.subtotal {
width: 150px;
color: red;
font-weight: bold;
}
.operation {
width: 80px;
}
.operation span:hover, a:hover {
cursor: pointer;
color: red;
text-decoration: underline;
}
img {
width: 100px;
height: 80px;
/*border: 1px solid #ccc;*/
margin-right: 10px;
float: left;
}

.foot {
width: 935px;
margin-top: 10px;
color: #666;
height: 48px;
border: 1px solid #c8c8c8;
background-color: #eaeaea;
background-image:linear-gradient(RGB(241,241,241),RGB(226,226,226));
position: relative;
z-index: 8;
}
.foot div, .foot a {
line-height: 48px;
height: 48px;
}
.foot .select-all {
width: 100px;
height: 48px;
line-height: 48px;
padding-left: 5px;
color: #666;
}
.foot .closing {
border-left: 1px solid #c8c8c8;
width: 100px;
text-align: center;
color: #000;
font-weight: bold;
background: RGB(238,238,238);
cursor: pointer;
}
.foot .total{
margin: 0 20px;
cursor: pointer;
}
.foot #priceTotal, .foot #selectedTotal {
color: red;
font-family: "Microsoft Yahei";
font-weight: bold;
}
.foot .selected {
cursor: pointer;
}
.foot .selected .arrow {
position: relative;
top:-3px;
margin-left: 3px;
}
.foot .selected .down {
position: relative;
top:3px;
display: none;
}
.show .selected .down {
display: inline;
}
.show .selected .up {
display: none;
}
.foot .selected:hover .arrow {
color: red;
}
.foot .selected-view {
width: 935px;
border: 1px solid #c8c8c8;
position: absolute;
height: auto;
background: #ffffff;
z-index: 9;
bottom: 48px;
left: -1px;
display:none;
}
.show .selected-view {
display: block;
}
.foot .selected-view div{
height: auto;
}
.foot .selected-view .arrow {
font-size: 16px;
line-height: 100%;
color:#c8c8c8;
position: absolute;
right: 330px;
bottom: -9px;
}
.foot .selected-view .arrow span {
color: #ffffff;
position: absolute;
left: 0px;
bottom: 1px;
}
#selectedViewList {
padding: 20px;
margin-bottom: -20px;
}
#selectedViewList div{
display: inline-block;
position: relative;
width: 100px;
height: 80px;
border: 1px solid #ccc;
margin: 10px;
}
#selectedViewList div span {
display: none;
color: #ffffff;
font-size: 12px;
position: absolute;
top: 0px;
right: 0px;
width: 60px;
height: 18px;
line-height: 18px;
text-align: center;
background: RGBA(0,0,0,.5);
cursor: pointer;
}
#selectedViewList div:hover span {
display: block;
}
</style>
<body>
<table id="cartTable">
<thead>
<tr>
<th><label><input class="check-all check" type="checkbox"/>&nbsp;全选</label></th>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td class="checkbox"><input class="check-one check" type="checkbox"/></td>
<td class="goods"><img src="img/psb.jpg" alt=""/><span>Casio/卡西欧 EX-TR350</span></td>
<td class="price">5999.88</td>
<td class="count">
<span class="reduce"></span>
<input class="count-input" type="text" value="1"/>
<span class="add">+</span></td>
<td class="subtotal">5999.88</td>
<td class="operation"><span class="delete">删除</span></td>
</tr>
<tr>
<td class="checkbox"><input class="check-one check" type="checkbox"/></td>
<td class="goods"><img src="img/psb.jpg" alt=""/><span>Canon/佳能 PowerShot SX50 HS</span></td>
<td class="price">3888.50</td>
<td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td>
<td class="subtotal">3888.50</td>
<td class="operation"><span class="delete">删除</span></td>
</tr>
<tr>
<td class="checkbox"><input class="check-one check" type="checkbox"/></td>
<td class="goods"><img src="img/psb.jpg" alt=""/><span>Sony/索尼 DSC-WX300</span></td>
<td class="price">1428.50</td>
<td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td>
<td class="subtotal">1428.50</td>
<td class="operation"><span class="delete">删除</span></td>
</tr>
<tr>
<td class="checkbox"><input class="check-one check" type="checkbox"/></td>
<td class="goods"><img src="img/psb.jpg" alt=""/><span>Fujifilm/富士 instax mini 25</span></td>
<td class="price">640.60</td>
<td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td>
<td class="subtotal">640.60</td>
<td class="operation"><span class="delete">删除</span></td>
</tr>
</tbody>
</table>

<div class="foot" id="foot">
<label class="fl select-all"><input type="checkbox" class="check-all check"/>&nbsp;全选</label>
<a class="fl delete" id="deleteAll" href="javascript:;">删除</a>
<div class="fr closing">结 算</div>
<div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
<div class="fr selected" id="selected">已选商品
<span id="selectedTotal">0</span>件
<span class="arrow up">︽</span>
<span class="arrow down">︾</span>
</div>
<div class="selected-view">
<div id="selectedViewList" class="clearfix">
<!--<div><img src="images/1.jpg"><span>取消选择</span></div>-->
</div>
<span class="arrow">◆<span>◆</span></span>
</div>
</div>
<script>
window.onload = function () {
if (!document.getElementsByClassName) {
document.getElementsByClassName = function (cls) {
var ret = [];
var els = document.getElementsByTagName('*');
for (var i = 0, len = els.length; i < len; i++) {
if (els[i].className === cls
|| els[i].className.indexOf(cls + ' ') >= 0
|| els[i].className.indexOf(' ' + cls + ' ') >= 0
|| els[i].className.indexOf(' ' + cls) >= 0) {
ret.push(els[i]);
}
}
return ret;
}
}

var cartTable = document.getElementById('cartTable');
var tr = cartTable.children[1].rows;
var checkInputs = document.getElementsByClassName('check');
var checkAllInputs = document.getElementsByClassName('check-all');
var selectedTotal = document.getElementById('selectedTotal');
var priceTotal = document.getElementById('priceTotal');
var selected = document.getElementById('selected');
var foot = document.getElementById('foot');
var selectedViewList = document.getElementById('selectedViewList');
var deleteAll = document.getElementById('deleteAll');

//计算
function getTotal() {
var seleted = 0;
var price = 0;
var HTMLstr = '';
for (var i = 0, len = tr.length; i < len; i++) {
if (tr[i].getElementsByTagName('input')[0].checked) {
tr[i].className = 'on';
seleted += parseInt(tr[i].getElementsByTagName('input')[1].value);
price += parseFloat(tr[i].cells[4].innerHTML);
HTMLstr += '<div><img src="' + tr[i].getElementsByTagName('img')[0].src + '"><span class="del" index="' + i + '">取消选择</span></div>'
}
else {
tr[i].className = '';
}
}

selectedTotal.innerHTML = seleted;
priceTotal.innerHTML = price.toFixed(2);
selectedViewList.innerHTML = HTMLstr;

if (seleted == 0) {
foot.className = 'foot';
}
}

//小计
function getSubTotal(tr) {
var tds = tr.cells;
var price = parseFloat(tds[2].innerHTML);
var count = parseInt(tr.getElementsByTagName('input')[1].value);
var SubTotal = parseFloat(price * count);
tds[4].innerHTML = SubTotal.toFixed(2);
}

for (var i = 0 , len = checkInputs.length; i < len; i++) {
checkInputs[i].onclick = function () {
if (this.className === 'check-all check') {
for (var j = 0; j < checkInputs.length; j++) {
checkInputs[j].checked = this.checked;
}
}
if (this.checked == false) {
for (var k = 0; k < checkAllInputs.length; k++) {
checkAllInputs[k].checked = false;
}
}
getTotal();
}
}

selected.onclick = function () {
if (foot.className == 'foot') {
if (selectedTotal.innerHTML != 0) {
foot.className = 'foot show';
}
}
else {
foot.className = 'foot';
}
}

selectedViewList.onclick = function (e) {
e = e || window.event;
var el = e.srcElement;
if (el.className == 'del') {
var index = el.getAttribute('index');
var input = tr[index].getElementsByTagName('input')[0];
input.checked = false;
input.onclick();
}
}

for (var i = 0; i < tr.length; i++) {
tr[i].onclick = function (e) {
e = e || window.event;
var el = e.srcElement;
var cls = el.className;
var input = this.getElementsByTagName('input')[1];
var val = parseInt(input.value);
var reduce = this.getElementsByTagName('span')[1];
switch (cls) {
case 'add':
input.value = val + 1;
reduce.innerHTML = '-';
getSubTotal(this);
break;
case 'reduce':
if (val > 1) {
input.value = val - 1;
}
if (input.value <= 1) {
reduce.innerHTML = '';
}
getSubTotal(this);
break;
case 'delete':
var conf = confirm('确定要删除吗？');
if (conf) {
this.parentNode.removeChild(this);
}
break
default :
break;
}
getTotal();
}
tr[i].getElementsByTagName('input')[1].onkeyup = function () {
var val = parseInt(this.value);
var tr = this.parentNode.parentNode
var reduce = tr.getElementsByTagName('span')[1];
if (isNaN(val) || val < 1) {
val = 1;
}
this.value = val;
if (val <= 1) {
reduce.innerHTML = '';
}
else {
reduce.innerHTML = '-';
}
getSubTotal(tr);
getTotal();
}
}

deleteAll.onclick = function () {
if (selectedTotal.innerHTML != '0') {
var conf = confirm('确定删除吗？');
if (conf) {
for (var i = 0; i < tr.length; i++) {
var input = tr[i].getElementsByTagName('input')[0];
if (input.checked) {
tr[i].parentNode.removeChild(tr[i]);
i--;
}
}
}
}
}

checkAllInputs[0].checked = true;
checkAllInputs[0].onclick();
}

</script>
</body>
</html>

转载于:https://www.cnblogs.com/TTTK/p/6208971.html

weixin_30260399
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue实现简易购物车功能
YY的博客
11-22 8399
Vue实现简易购物车功能
jQuery实现简单购物车功能
m0_57202083的博客
09-01 2823
<!DOCTYPE html> <html> <head> <title>购物车</title> <meta charset="utf-8" /> <style type="text/css"> h1 { text-align:center; } table { margin:0 auto; width:6...
JS实现购物车特效
weixin_30443747的博客
03-15 107
学习通过JavaScript实现类似于淘宝的购物车效果，包括商品的单选、全选、删除、修改数量、价格计算、数目计算、预览等功能。 1. 实现兼容低版本IE的getElementsByClassName()方法 2. JS表格操作 3. 通过parseInt()，parseFloat()把字符串转换成数字 4. 通过toFixed()把数字格式化成指定位数的小数 5. 事件代理的运用 效果...
javascript项目实战之原生js模拟淘宝购物车
小平果的欢乐谷
10-05 7076
通过JavaScript实现类似与淘宝的购物车效果，包括商品的单选、全选、删除、修改数量、价格计算、数目计算、预览等功能的实现。实现的效果图： 相应的代码： shoppingCart.html <!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>JavaScript实现购物车项目实战</title>
购物车
qq_43665021的博客
07-16 89
代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css" /> <scri...
【Android】实现简易购物车功能（附源码）
butterfly_new的博客
01-27 1487
android实现简易的购物车
js购物车功能php,JS实现简单购物车功能代码分析
weixin_35457966的博客
03-12 492
这次给大家带来JS实现简单购物车功能代码分析，JS实现简单购物车功能的注意事项有哪些，下面就是实战案例，一起来看一下。我们肯定都很熟悉商品购物车这一功能，每当我们在某宝某东上购买商品的时候，看中了哪件商品，就会加入购物车中，最后结算。购物车这一功能，方便消费者对商品进行管理，可以添加商品，删除商品，选中购物车中的某一项或几项商品，最后商品总价也会随着消费者的操作随着变化。现在，笔者对购物车进行了简...
javascript实现简单购物车功能（有图）
热门推荐
Of_the的博客
08-09 3万+
Js实现淘宝购物车类似功能： 主要有添加商品 增加和减少商品数量 根据增加、减少或选择的商品获取金额 实现商品价格的计算 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;购物车&lt;/title&
Vue之简单购物车功能
a271720559的博客
08-06 2万+
                                          Vue之购物车功能 今天来看看vue怎么实现简单的购物车功能。 效果图：  我们都知道vue是数据驱动和组件化的模式。意思就是只要绑定的数据改变其他的变化由vue去完成，无须再去操作dom。 我们来看看简单的购物车功能怎么实现： 1.先完成数据绑定 代码： html： &lt;tr v-for=...
JSP+Servlet实现简易购物车功能
11-14
通过JSP加Servlet技术实现简易的购物车功能，适合初学JSP的程序猿参考该代码理解JSP与客户端页面相结合的强大功能
Android实现简单购物车功能
01-06
本文实例为大家分享了Android实现购物车功能的具体代码，供大家参考，具体内容如下 MainActivity布局： <?xml version=1.0 encoding=utf-8?> android:layout_width=match_parent android:layout_height=...
Python Django实现简单购物车功能
06-26
Python Django实现简单购物车功能
JavaScript编写一个简易购物车功能
12-28
网上关于购物车实现的代码非常多，今天看了一些知识点，决定自己动手写写，于是写了一个简易购物车，接下来讲解一下具体的实现。  1、用html实现内容；  2、用css修饰外观；  3、用js(jq)设计动效。 第一步：...
vue 实现一个简单购物车 功能
lyinshaofeng的博客
07-31 191
vue 实现一个简单购物车 功能
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 320
在vue.config.js中配置关闭Uncaught runtime errors显示。
JS中一个dom元素能绑定多少事件
最新发布
ggq53219的博客
06-10 499
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
前端性能优化：提升网站加载速度的终极指南
喔的嘛呀的博客
06-07 1059
综上所述，通过以上优化方案和具体措施，我们可以有效地提升网站的加载速度，改善用户体验，提高转化率，从而在激烈的市场竞争中脱颖而出，取得更好的业绩和口碑。作为前端工程师，我们应该不断学习和探索，不断优化和提升网站性能，为用户创造更好的上网体验。
自制植物大战僵尸：HTML5与JavaScript实现的简单游戏
m0_73367097的博客
06-08 1912
自制植物大战僵尸
Android Studio 实现简单购物车功能
06-01
要实现简单的购物车功能，你需要完成以下几个步骤： 1. 创建一个购物车界面，用于展示用户已选的商品和总价。 2. 创建一个商品列表界面，用于展示所有商品的信息和价格。 3. 在商品列表中添加“加入购物车”按钮，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值