Web全栈~17.购物车案例(JavaScript动态效果)

Web全栈~17.购物车案例(JavaScript动态效果)

上一期

前言

       前三期已经对购物车的样式绘制完毕,那么这一期就用JavaScript来实现动态效果。

在这里插入图片描述

全选

思路

       可以在input标签里,添加单击事件,并且传递一个this。这个this就会把input本身传递过去。

<li>
	<input type="checkbox"  id="all" onclick="cheAllFlag(this)"/>全选
</li>
function cheAllFlag(th){
	//判断本身是否被点击
	var flag = th.checked;
	alert(flag);
}

在这里插入图片描述

       确认用户点击之后,就在下面每个框都加一个name。注意这个name必须都叫一样的名字才好判断。接着使用for循环遍历就行了~

function cheAllFlag(th){
	//判断全选框是否被勾选
	var flag = th.checked;
	//获得所有的多选框叫fav的对象
	var fav = document.getElementsByName("fav");
	//for循环遍历,如果用户点击了全选那么flag就是true,用户没点击那么flag就是false
	for(var i in fav){
		fav[i].checked = flag;
	}
}

       这个时候全选看似是做成功了,但是又有了一个BUG。那就是,假如用户没点全选,而是把商品的勾挨个选,这个时候全选按钮并不会自动勾上。所以这个时候就需要再写一个单击事件分别放在那些商品详情的标签里判断才行~

function checkFlag(){
	//默认全选
	var flag = true;
	//获得所有的多选框叫fav的对象
	var fav = document.getElementsByName("fav");
	//由于第一个和最后一个框都是全选框,所以遍历的时候就避免它们
	for(var i = 1; i < fav.length - 1; i++){
		//判断是否真的全部被勾选,如果有一个没勾选则都不需要自动勾上全选
		if(!fav[i].checked){
			//有一个没选就说明不是全选
			flag = false;
			break;
		}
	}
	//将第一个和最后一个框赋值
	fav[0].checked = flag;
	fav[fav.length - 1].checked = flag;
}

数量增加效果

       上一期绘图的时候,忘记考虑到这点。。。所以这里进行改进。数字放在input里面,或许会更容易修改。

<li>
	<button onclick="add(this)">+</button>
	<input type="text" style="width: 10px;" name="data" id="data" value="1"/>
	<button>-</button>
</li>

在这里插入图片描述

       其实也很简单,直接拿到它,然后给加和减都各自添加一个单击事件修改就行了~

<li>
	<button onclick="add(this)">+</button>
	<input style="width: 10px;" value="1"/>
	<button>-</button>
</li>
/*
	增加
*/
function add(th){
	//获得下一个节点对象(因为Input在add的下面)
	var nex = th.nextElementSibling;
	//改变节点的value值
	nex.value = Number (nex.value) + 1;
}
/*
	减少
*/
function reduce(th){
	//获得上一个节点对象(因为input在reduce的上面)
	var pre = th.previousElementSibling;
	//改变节点的值
	pre.value = Number(pre.value) - 1;
}

结算数量

       原理还是和刚刚加减一样。只是选择的标签对象变了而已~

//获得每一个商品的单价
var val = nex.parentNode.nextElementSibling.innerHTML;
//计算总价格
var num = Number(val)*Number(nex.value);
//把总的价格赋值给指定的对象
nex.parentNode.nextElementSibling.innerHTML ="¥" + num;

删除结点

       这个最简单,还是直接传this过来然后remove即可~

//删除指定的节点
function  checkTest4(th){
	//获得父节点div
	var div=th.parentNode.parentNode.parentNode;
	div.remove();
}
js加入购物车抛物线动画与购物车效果特效,亲测可用, 当您在电商购物网站浏览中意的商品时,您可以点击页面中的“加入购物车”按钮即可将商品加入的购物车中。本文介绍借助一款基于jQuery的动画插件,点击加入购物车按钮时,实现商品将飞入到右侧的购物车中的效果。 HTML 首先载入jQuery库文件和jquery.fly.min.js插件。 复制代码 代码如下: 接着,将商品信息html结构布置好,本例中,我们用四个商品并排布置,每个商品box中包括有商品图片、价格、名称以及加入购物车按钮等信息。 复制代码 代码如下: ¥3499.00 LG 49LF5400-CA 49寸IPS硬屏富贵招财铜钱设计 加入购物车 ¥3799.00 Hisense/海信 LED50T1A 海信电视官方旗舰店 加入购物车 ¥¥3999.00 Skyworth/创维 50E8EUS 8核4Kj极清酷开系统智能液晶电视 加入购物车 ¥6969.00 乐视TV Letv X60S 4核1080P高清3D安卓智能超级电视 加入购物车 然后,我们还需要在页面的右侧加上购物车以及提示信息。 复制代码 代码如下: 购物车 已成功加入购物车! CSS 我们使用CSS先将商品排列美化,然后设置右侧购物车样式,具体请看代码: 复制代码 代码如下: .box{float:left; width:198px; height:320px; margin-left:5px; border:1px solid #e0e0e0; text-align:center} .box p{line-height:20px; padding:4px 4px 10px 4px; text-align:left} .box:hover{border:1px solid #f90} .box h4{line-height:32px; font-size:14px; color:#f30;font-weight:500} .box h4 span{font-size:20px} .u-flyer{display: block;width: 50px;height: 50px;border-radius: 50px;position: fixed;z-index: 9999;} .m-sidebar{position: fixed;top: 0;right: 0;background: #000;z-index: 2000;width: 35px;height: 100%;font-size: 12px;color: #fff;} .cart{color: #fff;t
评论 31
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值