原生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 相关文章推荐
使用onbeforeunload属性后的副作用
Mar 08 Javascript
JQuery 无废话系列教程(一) jquery入门 [推荐]
Jun 23 Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
Dec 18 Javascript
Jquery实战_读书笔记2 选择器
Jan 22 Javascript
JS getStyle获取最终样式函数代码
Apr 01 Javascript
js选取多个或单个元素的实现代码(用class)
Aug 22 Javascript
JS版的date函数(和PHP的date函数一样)
May 12 Javascript
jquery滚动条插件slimScroll使用方法
Feb 09 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
Jul 04 Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 Javascript
微信小程序自定义组件实现环形进度条
Nov 17 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 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下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
2010/12/29 PHP
php+highchats生成动态统计图
2014/05/21 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
php魔术函数__call()用法实例分析
2015/02/13 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
php图片裁剪函数
2018/10/31 PHP
thinkPHP事务操作简单案例分析
2019/10/17 PHP
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
jQuery 阴影插件代码分享
2012/01/09 Javascript
JS写的贪吃蛇游戏(个人练习)
2013/07/08 Javascript
javascript对中文按照拼音排序代码
2014/08/20 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
Bootstrap插件全集
2016/07/18 Javascript
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
微信小程序实现图片轮播及文件上传
2017/04/07 Javascript
几种响应式文字详解
2017/05/19 Javascript
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
JS使用正则表达式提交页面验证的代码
2019/10/16 Javascript
mpvue微信小程序开发之实现一个弹幕评论
2019/11/24 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
2020/02/14 Javascript
Python bsddb模块操作Berkeley DB数据库介绍
2015/04/08 Python
Python创建二维数组实例(关于list的一个小坑)
2017/11/07 Python
Python实现在Windows平台修改文件属性
2020/03/05 Python
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
玩具反斗城西班牙网上商城:ToysRUs西班牙
2017/01/19 全球购物
Europcar澳大利亚官网:全球汽车租赁领域的领导者
2019/03/24 全球购物
澳大利亚Mocha官方网站:包、钱包、珠宝和配饰
2019/07/18 全球购物
Oracle快照(snapshot)
2015/03/13 面试题
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
银行贷款委托书范本
2014/10/11 职场文书
2014年团总支工作总结
2014/11/21 职场文书
四年级学生期末评语
2014/12/26 职场文书
2015年社区居委会工作总结
2015/05/18 职场文书