原生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 相关文章推荐
Javascript 面向对象(二)封装代码
May 23 Javascript
js获取height和width的方法说明
Jan 06 Javascript
JS文本框默认值处理详解
Jul 10 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
Aug 21 Javascript
jQuery中prependTo()方法用法实例
Jan 08 Javascript
javascript实现自动输出文本(打字特效)
Aug 27 Javascript
FullCalendar日历插件应用之数据展现(一)
Dec 23 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
Jul 15 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
Jul 30 Javascript
浅谈vue项目,访问路径#号的问题
Aug 14 Javascript
openlayers4实现点动态扩散
Aug 17 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判断浏览器的类型和语言的函数代码
2013/02/28 PHP
php中cookie的使用方法
2014/03/29 PHP
不使用php api函数实现数组的交换排序示例
2014/04/13 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
Prototype使用指南之selector.js说明
2008/10/26 Javascript
javascript encodeURI和encodeURIComponent的比较
2010/04/03 Javascript
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
Google Maps API地图应用示例分享
2014/10/23 Javascript
JSON字符串和对象之间的转换详解
2015/05/26 Javascript
提高jQuery性能优化的技巧
2015/08/03 Javascript
javascript中判断json的方法总结
2015/08/27 Javascript
JavaScript计划任务后台运行的方法
2015/12/18 Javascript
json传值以及ajax接收详解
2016/05/24 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
2016/05/30 Javascript
AngularJS基础 ng-keyup 指令简单示例
2016/08/02 Javascript
javascript中json基础知识详解
2017/01/19 Javascript
js 实现watch监听数据变化的代码
2019/10/13 Javascript
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
Python构造自定义方法来美化字典结构输出的示例
2016/06/16 Python
简单的python协同过滤程序实例代码
2018/01/31 Python
opencv python统计及绘制直方图的方法
2019/01/21 Python
Python二叉树的镜像转换实现方法示例
2019/03/06 Python
Python 使用元类type创建类对象常见应用详解
2019/10/17 Python
python常用数据重复项处理方法
2019/11/22 Python
python 如何实现遗传算法
2020/09/22 Python
如何在存储过程中使用Loop
2016/01/05 面试题
工作会议欢迎词
2014/01/16 职场文书
工作决心书范文
2014/03/11 职场文书
会计个人实习计划书
2014/08/15 职场文书
音乐之声观后感
2015/06/04 职场文书
二十年同学聚会致辞
2015/07/28 职场文书
幼儿园教师心得体会范文
2016/01/21 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python
Python中的min及返回最小值索引的操作
2021/05/10 Python
JPA 通过Specification如何实现复杂查询
2021/11/23 Java/Android
pytest实现多进程与多线程运行超好用的插件
2022/07/15 Python