原生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 DOM 学习第二章 编辑文本
Feb 19 Javascript
js 图片随机不定向浮动的实现代码
Jul 02 Javascript
JS实现自动切换文字的导航效果代码
Aug 27 Javascript
JavaScript 拖拽实例代码
Sep 21 Javascript
基于jquery实现弹幕效果
Sep 29 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
Nov 10 Javascript
vue.js绑定class和style样式(6)
Dec 09 Javascript
JavaScript与Java正则表达式写法的区别介绍
Aug 15 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
Nov 21 Javascript
10个在JavaScript开发中常遇到的BUG
Dec 18 Javascript
完美解决linux下node.js全局模块找不到的情况
May 16 Javascript
Vue.js中 v-model 指令的修饰符详解
Dec 03 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安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
js的回调函数详解
2015/01/05 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
javascript实现tab切换的四种方法
2015/11/05 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
浅谈vue.js导入css库(elementUi)的方法
2018/03/09 Javascript
Vue项目数据动态过滤实践及实现思路
2018/09/11 Javascript
element ui table 增加筛选的方法示例
2018/11/02 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
layui实现三级导航菜单
2019/07/26 Javascript
javascript随机变色实例代码
2019/10/15 Javascript
vue 开发之路由配置方法详解
2019/12/02 Javascript
javascript实现留言板功能
2020/02/08 Javascript
详解vue-flickity的fullScreen功能实现
2020/04/07 Javascript
微信小程序仿通讯录功能
2020/04/09 Javascript
[02:15]2014DOTA2国际邀请赛 赛后退役选手回顾
2014/08/01 DOTA
centos下更新Python版本的步骤
2013/02/12 Python
利用python获得时间的实例说明
2013/03/25 Python
pyramid配置session的方法教程
2013/11/27 Python
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤
2018/12/17 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
Under Armour美国官网:美国知名高端功能性运动品牌
2016/09/05 全球购物
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
CHARLES & KEITH澳大利亚官网:新加坡时尚品牌
2019/01/22 全球购物
护士求职信范文
2014/05/24 职场文书
法人身份证明书
2014/10/08 职场文书
群众路线领导班子整改方案
2014/10/25 职场文书
销售辞职信范文
2015/03/02 职场文书
孔繁森观后感
2015/06/10 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
python自动化测试通过日志3分钟定位bug
2021/11/20 Python