JS代码实现商品价钱总和(模拟购物车功能)

题设的主体HTML代码如下：（以作事例）

<body>

单价：<em>12.5元</em>

小计：<span>0元</span>

</li>

单价：<em>2.5元</em>

小计：<span>0元</span>

</li>

单价：<em>8.5元</em>

小计：<span>0元</span>

</li>

单价：<em>28元</em>

小计：<span>0元</span>

</li>

单价：<em>14.5元</em>

小计：<span>0元</span>

</li>

单价：<em>7元</em>

小计：<span>0元</span>

</li>

</ul>

<p>

商品合计共：<em>0件</em>，共花费了：<em>0元</em><br />

其中最贵的商品单价是：<strong>0元</strong>

</p>

</body>

《原生版》JavaScript代码如下：

window.onload = function(){

var oP = document.getElementsByTagName(‘p‘)[0];

var aEm = oP.getElementsByTagName(‘em‘);

var aStrong = oP.getElementsByTagName(‘strong‘)[0];

var oUl = document.getElementById(‘list‘);

var oLi = oUl.getElementsByTagName(‘li‘);

var oStrong = oUl.getElementsByTagName(‘strong‘);

var oSpan = oUl.getElementsByTagName(‘span‘);

var oEm = oUl.getElementsByTagName(‘em‘);

var sum = 0;

var emMax = 0;

for(var i=0;i<oEm.length;i++){

//最大的那个单价值

if(parseFloat(oEm[i].innerHTML)>emMax){

emMax=parseFloat(oEm[i].innerHTML);

}

aStrong.innerHTML=emMax+‘元‘;

}

//调用fn1（）函数实现商品数量的选取

for(var i=0;i<oLi.length;i++){

fn1(oLi[i]);

}

//添加点击事件获取总的商品数量

aEm[0].onclick = function(){

for(var i=0;i<oStrong.length;i++){

var a = Number(oStrong[i].innerHTML);

sum+=a;

aEm[0].innerHTML = sum+‘件‘;

}

sum= 0;

}

//添加点击事件获取总的价钱

aEm[1].onclick = function(){

for(var i=0;i<oSpan.length;i++){

var a = parseFloat(oSpan[i].innerHTML);

sum+=a;

aEm[1].innerHTML = sum+‘元‘;

}

sum= 0;

}

function fn1(aLi){

var oBtn = aLi.getElementsByTagName(‘input‘);

var oStrong = aLi.getElementsByTagName(‘strong‘)[0];

var oEm = aLi.getElementsByTagName(‘em‘)[0];

var oSpan = aLi.getElementsByTagName(‘span‘)[0];

var n1 = Number(oStrong.innerHTML);

var n2 = parseFloat(oEm.innerHTML);

oBtn[0].onclick = function(){

n1--;

if(n1<0){

n1 = 0;

}

oStrong.innerHTML = n1;

oSpan.innerHTML = n1*n2+‘元‘;

};

oBtn[1].onclick = function(){

n1++;

oStrong.innerHTML = n1;

oSpan.innerHTML = n1*n2+‘元‘;

};

}

</script>

反思：上述代码添加点击事件获取商品的总价钱数以及总的商品数量，可能增加了用户负担。需要改进

《改进版》JavaScript代码如下：

window.onload = function(){

var oP = document.getElementsByTagName(‘p‘)[0];

var aEm = oP.getElementsByTagName(‘em‘);

var aStrong = oP.getElementsByTagName(‘strong‘)[0]；

var oUl = document.getElementById(‘list‘);

var oLi = oUl.getElementsByTagName(‘li‘);

var oStrong = oUl.getElementsByTagName(‘strong‘);

for(var i=0;i<oLi.length;i++){

fn1(oLi[i]);

}

function fn1(aLi){

var oBtn = aLi.getElementsByTagName(‘input‘);

var oStrong = aLi.getElementsByTagName(‘strong‘)[0];

var oEm = aLi.getElementsByTagName(‘em‘)[0];

var oSpan = aLi.getElementsByTagName(‘span‘)[0];

var n1 = Number(oStrong.innerHTML);

var n2 = parseFloat(oEm.innerHTML);

//合计总价，必然要相加所有的小计

function fn2(){

var sum1=0;//定义一个临时变量，用来储存所加过的件数

var sum2=0;//定义一个临时变量，用来储存所加过的小计

var emMax=0;//定义一个临时变量，用来比较单价的大小

for(var i=0;i<oLi.length;i++){

var strongs=oLi[i].getElementsByTagName("strong")[0];//获取到所有li的数量

var spans=oLi[i].getElementsByTagName("span")[0];//获取到所有li的小计

var em=oLi[i].getElementsByTagName("em")[0];//获取到所有li的单价

sum1=sum1+Number(strongs.innerHTML);

sum2=sum2+parseFloat(spans.innerHTML);//合计即所有小计相加的结果，因为有小数所以要用parseFloat

if(parseFloat(em.innerHTML)>emMax){//最大的那个单价值

emMax=parseFloat(em.innerHTML);

}

aEm[0].innerHTML=sum1+‘件‘;

aEm[1].innerHTML=sum2+‘元‘;

aStrong.innerHTML=emMax+‘元‘;

}

fn2();

oBtn[0].onclick = function(){

n1--;

if(n1<0){

n1 = 0;

}

oStrong.innerHTML = n1;

oSpan.innerHTML = n1*n2+‘元‘;

fn2();//调用合计之后的值

};

oBtn[1].onclick = function(){

n1++;

oStrong.innerHTML = n1;

oSpan.innerHTML = n1*n2+‘元‘;

fn2();

};

}

</script>

此时总的商品件数和商品总计会随用户的商品选择进行实时改变。

原文地址：https://www.cnblogs.com/tongguilin/p/12219606.html

时间： 2024-11-15 08:36:26

JS代码实现商品价钱总和(模拟购物车功能)的相关文章

(JS实现顾客商品浏览记录以及购物车)Cookie的保存与删除

//JS实现顾客浏览商品的记录以及实现购物车的功能function setCookie(name,value) { var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days*24*60*60*1000); //在最后追加 ;path=/ 非常有必要.否则容易出现在不同的目录下,调用同一个js方法来存储Cookie,到别的目录取不出或取出的值是不对的这种情况 document.cookie = name + "=&

模拟淘宝登录和购物车功能：使用cookie记录登录名，下次登录时能够记得上次的登录名，使用cookie模拟购物车功能，使用session记住登录信息并验证是否登录，防止利用url打开网站，并实现退出登录功能

<%@page import="java.net.URLDecoder"%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &

整理项目中用到的angularjs及其他js代码

列表页数据展示  <ul id="ulView"> <li class="bgfff mt-15 ptb15 shopItem" ng-repeat="views in DataListView"> <input type="text" hidden value="{{ views.ShopCartID }}" class="Sh

VUE.JS实现购物车功能

购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新. 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3. 服务器端返回JSON格式,使用模板引擎+dom操作更新页面最近新学习了vue.js,一个轻量级的mvvm(Model-View-ViewModel),vue.js是数据驱动无须操作dom,它提供特殊的html语言,把dom和数据绑定在一起,一旦修改了数据,dom将会自动更新更新. 关于vue.

cookie使用举例（添加购物车商品_移除购物车商品）

之前介绍过cookie和session的原理和区别.下面举例说明一下cookie在实际项目中的使用.使用cookie实现购物车功能: 1.往购物车添加商品 2.从购物车里移除商品主要是要点是:以产品id作为主键进行判断.如果这个添加的产品id信息已经在cookie里面存在,则添加失败(这里不考虑同一个商品重复添加多个的问题.因为只是cookie的简单举例):否则则把该产品的信息保存在cookie里面.因此存在用户手动清楚cookie的情况,所以需要判断: 1 if(cookieMap.cont

gulp打包压缩js代码

这是一个小demo,实现的功能如下: 1.在js代码打包很多的js文件,我们需要控制某些个别js件必须在前面.这里做到了简单的实现. 2.实现合并成一个js文件. 3.实现压缩成一行,即生成*.min.js. 一,首先看下目录结构其中main.js模拟了最重要的一个js文件,在页面上应该首先需要加载的js.文件. 我们把不需要考虑顺序的文件放在了js文件夹下.main.js a.js b.js 里面几句简单的代码.大家可以下载demo文件查看. gulpfile.js package.json

优惠券 js代码分析

今天看到一段js代码,是关于抢淘宝代金券的js代码,发现这段代码不是很长,但是很具有代表性, 类似于网络爬虫程序,由于代码不长,对于理解爬虫程序很有帮助,然后分析了下这段代码. 下面贴出代码,并附上我的一些注释. 1 (function(window, document, undefined) { 2 var interval = 800; //设置等待时间 3 var closeDelay = 200; //设置等待时间 4 var index = 0; //定义索引,从0开始 5 var c

简单3步 js使用cookie实现的购物车功能[原创]

引入JQuery.js支持加入JQuery.Cookie.js,代码如下 1 jQuery.cookie = function(name, value, options) { 2 if (typeof value != 'undefined') { // name and value given, set cookie 3 options = options || {}; 4 if (value === null) { 5 value = ''; 6 options.expires = -1;

JS代码执行机制

JS代码从编译到执行我们写出一段JS代码,JS的引擎并不是按照我们书写的顺序从上到下顺序编译并且执行的,首先是按照自己的规则对我们的代码先进行编译,然后从上到下执行编译的代码. 在全局作用域中,JS首先会对我们的函数进行声明,然后就是我们经常听到的变量提升机制,然后才是按照我们书写代码的顺序,来进行编译,然后在执行编译的代码. 看如下代码: function fn(){ console.log(a); } fn(); var a = "value"; 非常常见的一个面试题fn函数执行