购物车数量⽂本框html代码,CSS购物车按钮右上⾓添加⾓标显
⽰购物车数量
刚才帮⼀个朋友项⽬实现了⼀个功能，购物车按钮上追加⾓标，显⽰购物车数量。
这完全是⼀个 CSS 问题，这⾥记录⼀下，⽅便下次直接拿来⽤。
先上效果图
然后上代码HTML dom 部分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显⽰...
>网页购物车代码

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。