学习
实践
活动
工具
TVP
写文章

模仿购物车实现结算功能

温馨提示:文章底部,有源代码哦!

各位小伙伴

娜娜又来了

今天我们来模仿

一个购物车实现结算功能

购物车

先来看一下成品的页面效果,原谅我这只有猫的照片,要是放点猫粮,猫砂什么的~会不会有打广告的嫌疑~

就是这个样子的,现在我们来动手做一下。

先来写页面的布局,这边我们使用 ul 列表来做这个布局,一共是六个 ul,其中我们需要写样式的就只有三个(表头,中间内容,结尾),中间的四块是一样的样式可以直接复制。

总体布局:

第一个 li 是我们的商品图片,接着是我们的单价,以及商品数量的选项里面包括 “+” “-” 以及显示购买商品的数量,最后一栏是我们的商品小计(单价*数量)。

下面给页面设置样式:

这些样式属性都很常见,就不一一解释了,伙伴们要是有不熟悉的可以百度一下,就知道这些标签的含义和用法了٩(๑>

布局之后的页面效果:

当我们的鼠标滑动到按键的上面时,会改变按键的背景颜色~

下面来写功能部分的代码,首先获取 加 和 减 的按钮,然后获取商品列表的长度用 length 装起来,aSpan 获取的是商品的个数 定义一个 number 数组来存储商品的数量。

然后再来实现添加和减少的操作

在开始是给数组 number 赋值,使里面所有的数据为零,给 add 添加一个 index 属性,用来获取索引值,当我们点击 add【i】 按钮时,对应这个 add 按钮的 number【i】里面的数值 +1,实现产品数量的增加,reduce也是同理,不过要先进行一步判断,如果商品的数量已经为 0 了 ,就时商品数量为 0 ,不会减少成负数。

到这一步我们就实现了,加和减的按键的功能,现在我们来实现修改页面上数据的部分,就是框住的这部分的内容哦~

首先我们要获取产品的单价,小计,商品总数,总价的位置。

然后我们把数据输出到页面的相应的位置上,注意一下获取到的单价是 string字符串类型,要进行格式的转化转化成 number ~~剩下的就是页面的意思了~

怎么样是不是简单明了~

一起看一下效果:

完整代码奉上:

Title

*{margin:;padding:;}

body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:;}

a{text-decoration:none;color: inherit;}

img{display: block;border:none;}

ol,ul{list-style:none;}

.clearfix:after{content:"";display: block;clear: both;}

.fl{float: left;}

.fr{float: right;}

.main{width:1000px;margin:100pxauto;}

.mainul{display: flex;border:1pxsolid#990000;border-bottom: none;}

.mainulli{flex:1;height:100px;line-height:100px;border-left:1pxsolid#990000;text-align: center;}

.mainulli:nth-child(1){border-left: none;}

.mainul:nth-child(1)li{height:40px;background:#cc3366;color:#fff;line-height:40px;}

.mainul:nth-child(2)li:nth-child(1){background:url("images/1.jpg")no-repeatcenter/contain;}

.mainul:nth-child(3)li:nth-child(1){background:url("images/2.jpg")no-repeatcenter/contain;}

.mainul:nth-child(4)li:nth-child(1){background:url("images/3.jpg")no-repeatcenter/contain;}

.mainul:nth-child(5)li:nth-child(1){background:url("images/4.jpg")no-repeatcenter/contain;}

.mainulli.button{display: flex;justify-content: center;align-items: center;}

.mainulli.buttonbutton,.mainulli.buttonspan{width:40px;line-height:40px;}

.mainulli.buttonbutton{height:40px;background:#ccc;color:#fff;cursor: pointer;border: none;}

.mainulli.buttonbutton:hover{background:#cc3366;}

.mainulli.buttonspan{height:38px;border-top:1pxsolid#999;border-bottom:1pxsolid#999;}

.main.bottomli{height:50px;background:#cc3366;border: none;color:#fff;line-height:50px;}

.main.bottomlispan{color: gold;font-weight: bold;}

商品

单价

数量

小计

10

-

+

20

-

+

30

-

+

40

-

+

已选中商品个

合计费用¥

varaAdd =document.querySelectorAll(".button .add");//获取加

varaReduce =document.querySelectorAll(".button .reduce");//获取减

varlength = aReduce.length;//得到商品列表的长度

varaSpan =document.querySelectorAll(".button span");

varnumber = [];//定义一个数组 把我们的对应商品的数量存储在数组里面

varaPrice =document.querySelectorAll(".price");//获取单价

varaCount =document.querySelectorAll(".count");//获取小计

varoSelect =document.querySelector(".select");//获取选中商品数目

varoTotal =document.querySelector(".total");//获取总价

for(vari=; i

number[i] =;

//给 加 添加点击事件

aAdd[i].index = i;//自定义属性存索引值

aAdd[i].onclick =function(){

number[this.index]++;

change(this.index);

};

//给 减 添加点击事件

aReduce[i].index = i;//自定义属性存索引值

aReduce[i].onclick =function(){

if(number[this.index] ===){

number[this.index] =;

}else{

number[this.index]--;

}

change(this.index);

}

}

//定义一个函数 改变数量 小计 已选中商品 合计费用

functionchange(This){

//改变数量

aSpan[This].innerHTML = number[This];

//改变小计

aCount[This].innerHTML = number[This]*parseFloat(aPrice[This].innerHTML);//小计 = 数量*单价 注意:innerHTML获取到的都是字符串

//改变选中商品个数

varsums =;

varsumt =;

for(vari=; i

sums += number[i];

sumt +=parseFloat(aCount[i].innerHTML);

}

oSelect.innerHTML = sums;

oTotal.innerHTML = sumt;

}

今天就到这里了

小伙伴们

再见了

有任何问题都可以在文章留言,娜姐都看着的呢!

合作,投稿,转载,版权问题请联系 李娜:Lina_Java

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180309A1N4ZH00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码关注腾讯云开发者

领取腾讯云代金券