CSS 购物车按钮右上角添加角标显示购物车数量

avatar 2021年01月28日22:57:21 0 823 views

刚才帮一个朋友项目实现了一个功能,购物车按钮上追加角标,显示购物车数量。

这完全是一个 CSS 问题,这里记录一下,方便下次直接拿来用。

先上效果图

然后上代码

HTML dom 部分

<!--购物车按钮-->
<a id="footerCart" href="${base}/cart/list">
	<i class="iconfont icon-cart center-block"></i><div class="nav-counter nav-counter-blue" id="cart-counter"></div>
</a>

 

CSS 代码

/*购物车角标数字*/
.nav-counter {
	position: absolute;
	top: 11px;
	right: -8px;
	min-width: 8px;
	height: 20px;
	width: 20px;
	line-height: 19px;
	margin-top: -11px;
	font-weight: normal;
	color: white;
	text-align: center;
	text-shadow: 0 1px rgb(0 0 0 / 20%);
	background: #e23442;
	border: 1px solid #911f28;
	border-radius: 10px;
	background-image: -moz-linear-gradient(top, #e8616c, #dd202f);
	background-image: -o-linear-gradient(top, #e8616c, #dd202f);
	background-image: linear-gradient(to bottom, #e8616c, #dd202f);
	-webkit-box-shadow: inset 0 0 1px 1px rgb(255 255 255 / 10%), 0 1px rgb(0 0 0 / 12%);
	box-shadow: inset 0 0 1px 1px rgb(255 255 255 / 10%), 0 1px rgb(0 0 0 / 12%);
}
.nav-counter-blue {
	background: #e8616c;
	border: 1px solid #dd202f;
	background-image: -webkit-linear-gradient(top, #e8616c, #dd202f);
	background-image: -moz-linear-gradient(top, #e8616c, #dd202f);
	background-image: -o-linear-gradient(top, #e8616c, #dd202f);
	background-image: linear-gradient(to bottom, #e8616c, #dd202f);
}

 

JS代码(用于显示数字)

var currentCartQuantity = $.getCurrentCartQuantity();
console.log('当前购物车数量:'+currentCartQuantity);
if(currentCartQuantity <= 99) {
	$('#cart-counter').html(currentCartQuantity);
} else {
	$('#cart-counter').html('···');
}

注意:这里获取购物车数量是通过 ajax 向后台查询返回的,然后数量如果大于99显示...

 

 

  • 微信
  • 交流学习,有偿服务
  • weinxin
  • 博客/Java交流群
  • 资源分享,问题解决,技术交流。群号:590480292
  • weinxin
avatar

发表评论

avatar 登录者:匿名
可以匿名评论或者登录后台评论,评论回复后会有邮件通知

  

已通过评论:0   待审核评论数:0