js淘宝购物车功能描述:
1、点击“+”,单个商品数量加1,总数量加1;单个商品价格添加,总价也添加。
2、点击“-”,单个商品数量减1,总数量减1;单个商品价格减少,总价也减少。
当该商品数量为0时,点击依然为0;
3、显示出总价,总数量和其中最贵的那个商品的价格。
瞄一眼效果图:
废话不多说,LU代码
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> *{padding:0;margin:0;} #list,p{list-style:none;width:600px;margin:0 auto;} #list li {width:600px;height:50px;line-height:50px;margin-top:20px;font-size:20px;} #list li input{width:60px;height:40px;line-height:40px;} .highlight{color:red;font-size:30px;font-weight:bold;} </style> <script> window.onload = function () { var oUl = $('list'); var totalNumber = $('totalNum'); var totalPrice = $('totalPrice'); var mostExpensive = $('mostExpensive'); var aLi = oUl.getElementsByTagName('li'); var maxPrice = [0]; for ( var i = 0; i < aLi.length; i++ ) { price(aLi[i]); } function price(oLi) { var aBtn = oLi.getElementsByTagName('input'); var oStrong = oLi.getElementsByTagName('strong')[0]; var oEm = oLi.getElementsByTagName('em')[0]; var oSpan = oLi.getElementsByTagName('span')[0]; aBtn[0].onclick = function () { var num = Number(oStrong.innerHTML); var price = parseFloat(oEm.innerHTML); var numbers = Number(totalNumber.innerHTML); var prices = parseFloat(totalPrice.innerHTML); num--; if (num === 0) { // 如果该商品数量为0,,那么就得把它的价格从价格表中清除 var index = maxPrice.indexOf(price); if (index > -1) maxPrice.splice(index, 1); } else if (num < 0) { num = 0; return; } numbers--; oStrong.innerHTML = num; oSpan.innerHTML = num * price + '元'; totalNumber.innerHTML = numbers; totalPrice.innerHTML = prices - (num + 1) * price; mostExpensive.innerHTML = maxPrice[0]; } aBtn[1].onclick = function () { var num = Number(oStrong.innerHTML); var price = parseFloat(oEm.innerHTML); var numbers = Number(totalNumber.innerHTML); var prices = parseFloat(totalPrice.innerHTML); num++; numbers++; if (maxPrice.indexOf(price) < 0) { maxPrice.push(price) maxPrice.sort(function (a,b) {return b - a}); } oStrong.innerHTML = num; oSpan.innerHTML = num * price + '元'; totalNumber.innerHTML = numbers; totalPrice.innerHTML = prices + num * price; mostExpensive.innerHTML = maxPrice[0]; } } function $(id) {return document.getElementById(id);} } </script> </head> <body> <ul id="list"> <li> <input type="button" value="-" /> <strong>0</strong> <input type="button" value="+" /> 单价:<em>12.5元</em> 小计:<span class="highlight">0元</span> </li> <li> <input type="button" value="-" /> <strong>0</strong> <input type="button" value="+" /> 单价:<em>10.5元</em> 小计:<span class="highlight">0元</span> </li> <li> <input type="button" value="-" /> <strong>0</strong> <input type="button" value="+" /> 单价:<em>8.5元</em> 小计:<span class="highlight">0元</span> </li> <li> <input type="button" value="-" /> <strong>0</strong> <input type="button" value="+" /> 单价:<em>8元</em> 小计:<span class="highlight">0元</span> </li> <li> <input type="button" value="-" /> <strong>0</strong> <input type="button" value="+" /> 单价:<em>14.5元</em> 小计:<span class="highlight">0元</span> </li> </ul> <p> 商品合计共:<span class="highlight" id="totalNum">0</span>件, 共花费了:<span class="highlight" id="totalPrice">0</span>元<br /> 其中最贵的商品单是:<span class="highlight" id="mostExpensive">0</span>元 </p> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。
本文向大家介绍原生js模拟淘宝购物车项目实战,包括了原生js模拟淘宝购物车项目实战的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了原生js模拟淘宝购物车实现代码。分享给大家供大家参考。具体如下: 通过JavaScript实现类似与淘宝的购物车效果,包括商品的单选、全选、删除、修改数量、价格计算、数目计算、预览等功能的实现。实现的效果图: 相应的代码: shoppingCart.html s
本文向大家介绍vue实现的仿淘宝购物车功能详解,包括了vue实现的仿淘宝购物车功能详解的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了vue实现的仿淘宝购物车功能。分享给大家供大家参考,具体如下: 下面是一张众所周知的淘宝购物车页面,今天要讲解的案例就是用vue.js做一个类似的页面 首先简单介绍一下可能会用到的一些vue.js的用法: v-bind,绑定属性;例如v-bind:class
本文向大家介绍jQuery模拟淘宝购物车功能,包括了jQuery模拟淘宝购物车功能的使用技巧和注意事项,需要的朋友参考一下 首先我们要实现的内容的需求有如下几点: 1.在购物车页面中,当选中“全选”复选框时,所有商品前的复选框被选中,否则所有商品的复选框取消选中。 2.当所有商品前的复选框选中时,“全选”复选框被选中,否则“全选”复选框取消选中。 3.单击图标-的时候数量减一而且不能让物品小于0并
本文向大家介绍js实现购物车功能,包括了js实现购物车功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js实现购物车功能的具体代码,供大家参考,具体内容如下 购物车实现3种方式 1、利用cookie 优点:不占用服务器资源,可以永远保存,不用考虑失效的问题 缺点: 对购买商品的数量是有限制的,存放数据的大小 不可以超过2k,用户如果禁用cookie那么就木有办法购买商品,卓越网实
本文向大家介绍原生js+cookie实现购物车功能的方法分析,包括了原生js+cookie实现购物车功能的方法分析的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了原生js+cookie实现购物车功能的方法。分享给大家供大家参考,具体如下: 这里使用js+cookie实现简单的购物车功能。 首先是简单的HTML结构,只是为了演示下功能。 下面的代码是实现点击添加按钮时,把商品信息加入cook
本文向大家介绍纯jquery实现模仿淘宝购物车结算,包括了纯jquery实现模仿淘宝购物车结算的使用技巧和注意事项,需要的朋友参考一下 这篇文章里,将会提到购物车里的所有功能。包括全选、单选金额改变。在增加数量时金额也会相应改变。 效果图展示: 说下大致的思路吧: 1、首先是计算一行的价格。这个功能在上篇博客里有提到,这里就不列举出来了。 2、遍历选中的几行,将每行的数值相加。 3、将值赋给总金额