原生js实现淘宝购物车功能


Posted in Javascript onJune 23, 2020

js淘宝购物车功能描述:

 1、点击“+”,单个商品数量加1,总数量加1;单个商品价格添加,总价也添加。
 2、点击“-”,单个商品数量减1,总数量减1;单个商品价格减少,总价也减少。
 当该商品数量为0时,点击依然为0;
 3、显示出总价,总数量和其中最贵的那个商品的价格。 

瞄一眼效果图:

原生js实现淘宝购物车功能

废话不多说,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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让低版本浏览器支持input的placeholder属性(js方法)
Apr 03 Javascript
用javascript为页面添加天气显示实现思路及代码
Dec 02 Javascript
页面加载完毕后滚动条自动滚动一定位置
Feb 20 Javascript
jQuery实用函数用法总结
Aug 29 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
Sep 25 Javascript
详解jQuery中的DOM操作
Dec 23 Javascript
jQuery实现列表的增加和删除功能
Jun 14 jQuery
记一次vue-webpack项目优化实践详解
Feb 17 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
May 15 Javascript
vue-element-admin 菜单标签失效的解决方式
Nov 12 Javascript
Vue监听滚动实现锚点定位(双向)示例
Nov 13 Javascript
详解Webpack抽离第三方类库以及common解决方案
Mar 30 Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 #Javascript
jQuery实现倒计时重新发送短信验证码功能示例
Jan 12 #Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 #Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
Jan 12 #Javascript
JS百度地图搜索悬浮窗功能
Jan 12 #Javascript
原生js实现焦点轮播图效果
Jan 12 #Javascript
详解能在多种前端框架下使用的表格控件
Jan 11 #Javascript
You might like
php+html5使用FormData对象提交表单及上传图片的方法
2015/02/11 PHP
PHP图像处理类库及演示分享
2015/05/17 PHP
深入解析WordPress中加载模板的get_template_part函数
2016/01/11 PHP
PHP数组实例详解
2016/06/26 PHP
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
jquery网页元素拖拽插件效果及实现
2013/08/05 Javascript
JQuery实现鼠标移动到图片上显示边框效果
2014/01/09 Javascript
javascript 寻找错误方法整理
2014/06/15 Javascript
jQuery unbind 删除绑定事件详解
2016/05/24 Javascript
原生js实现下拉框功能(支持键盘事件)
2017/01/13 Javascript
JQuery validate 验证一个单独的表单元素实例
2017/02/17 Javascript
angular内置provider之$compileProvider详解
2017/09/27 Javascript
基于 D3.js 绘制动态进度条的实例详解
2018/02/26 Javascript
vue组件(全局,局部,动态加载组件)
2018/09/02 Javascript
详解webpack打包后如何调试的方法步骤
2018/11/07 Javascript
详解iframe跨域的几种常用方法(小结)
2019/04/29 Javascript
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
vue中datepicker的使用教程实例代码详解
2019/07/08 Javascript
vue实现配置全局访问路径头(axios)
2019/11/01 Javascript
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
学习python处理python编码问题
2011/03/13 Python
用Python做一个久坐提醒小助手的示例代码
2020/02/10 Python
Python socket连接中的粘包、精确传输问题实例分析
2020/03/24 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
英国行业制服供应商:Alexandra
2019/09/14 全球购物
Servlet如何得到服务器的信息
2015/12/22 面试题
高中学生干部学习的自我评价
2014/02/21 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书
党的群众路线教育实践活动制度建设计划方案
2014/10/31 职场文书
2015年中秋节活动总结
2015/03/23 职场文书
费用申请报告范文
2015/05/15 职场文书
幼儿园大班开学寄语(2016秋季)
2015/12/03 职场文书
KVM基础命令详解
2022/04/30 Servers
如何利用python创作字符画
2022/06/25 Python