0715 NOTE
五星好评
功能分析：
1.星星点亮为红色，不亮为白底黑框
2.五星评价后打分，一星一分，初始为0
3.鼠标悬挂在星星上，目标对象及其前列星星全亮，移除后默认恢复
4.鼠标点击后修改样式，除非再次点击，否则移开不变
5.星星上方对应的亮星数有不同的表情，根据星星的目标显示在当前星星上方
/*css*/ body{
font: 12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif; } <script type="module"> import Star from "./js/Star.js"; var arr=["快递包装","送货速度","配送员服务"] arr.forEach(item=>{
var star=new Star(item); star.appendTo("body"); }) </script> //Star.js import Component from "./Component.js"; import Utils from "./Utils.js"; export default class Star extends Component{
itemCon; statArr; face; score; pos=-1; constructor(label){
super(); this.eem.innerHTML=` <label class='label'>${
label}</label> <div class='star-con'> <div class='face'></div> <div class='item-con'> <div class='star-item'></div> <div class='star-item'></div> <div class='star-item'></div> <div class='star-item'></div> <div class='star-item'></div> </div> </div> <span class='score'>0分</span> `
this.elem.className="star"; //class名命名
Star.setCss(); //调用方法setCss
this.itemCon=this.elem.querySelector(".item-con"); //元素获取
this.score=this.elem.querySelector(".score"); //元素获取
this.face=this.elem.querySelector(".face"); //元素获取
this.statArr=Array.from(this.itemCon.children); //变量classCon的子元素列表获取并转化为数组
this.itemCon.addEventListener("mouseover",e=>this.mouseHandler(e)); //变量itemCon添加事件侦听，鼠标进入事件
this.itemCon.addEventListener("mouseleave",e=>this.mouseHandler(e)); //变量itemCon添加事件侦听，鼠标移出事件
this.itemCon.addEventListener("click",e=>this.clickHanler(e)); //变量itemCon添加事件侦听，点击事件
}
mouseHandler(e){
if(e.type==="mouseover"){
//鼠标进入
if(e.target.className!=="star-item") return; //如果目标对象class名不是star-item，返回 不执行
var index=this.statArr.indexOf(e.target); //查找statArr中对应当前目标对象的元素所在下标，赋给变量index
Object.assign(this.face.style,{
//变量face的样式设置
display:"block",
left:16*index+"px",
backgroundPositionX:-(5-index-1)*20+"px"
})
this.changeStar((i)=>{
//将箭头函数作为参数传入
return i<=index || i<=this.pos;
},index >= this.pos ? (index+1) : this.pos+1);
}else if(e.type==="mouseleave"){
//鼠标离开
this.face.style.display="none"; //变量face的样式设置
this.changeStar((i)=>{
return i<=this.pos
},this.pos<0 ? 0 : this.pos+1);
}
}
changeStar(requirement,score){
this.statArr.forEach((item,i)=>{
//i作为数组下标，调用requirement函数，返值
if(requirement(i)) item.style.backgroundPositionY="-16px"; //改变样式背景图，背景图为精灵图，实现了点亮星星的操作
else item.style.backgroundPositionY="0px";
})
this.score.textContent=score+"分";
this.score.style.color=score!==0 ? "red" : "#999";
}
clickHanler(e){
if(e.target.className!=="star-item") return;
this.pos=this.statArr.indexOf(e.target);
}
static setCss(){
//设置样式
if(super.setCss()) return;
Utils.setCss(` .star{ position: relative; width: 160px; height: 46px; float:left; margin-right:60px; } .star>.label{ float: left; height: 16px; line-height: 16px; margin-right: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #666; position: relative; top:16px; } .star>.star-con { float: left; position: relative; } .star>.star-con>.item-con{ position: absolute; width: 80px; top:16px; } .star>.star-con>.item-con>.star-item { float: left; width:16px; height: 16px; background-image: url(./img/commstar.png); } .star>.star-con>.face{ width: 16px; height: 16px; background-image: url(./img/face-red.png); position: absolute; display: none; } .star>.score{ float: left; display: block; position: absolute; right: -30px; top: 16px; width: 30px; height: 16px; line-height: 16px; text-align: right; color: #999; } `)
}
}
购物车
功能分析：
1.点击商品，自动加入购物车，点击次数决定购物车中商品数量
2.商品加入购物车后，商品信息数据分列显示，且总价根据商品数量以及商品单价计算
3.购物车有删除健，可以删除指定购物车中指定商品信息
4.有单选全选按钮，可以控制商品购买还是存放在购物车
5.购物车存在总价计算，通过单选全选按钮确认购买商品总价
<div class="goods-con"></div> <div class="shopping-con"></div> <script type="module"> var arr = [ { id: "1001", goods: [ { id: 100101, img: "./img/100101.jpg", color: "冰岛幻境", title: "【京仓速发】送：壳膜+碎屏保+一年质保+晒单红包。4800万高感光夜拍三摄，光学屏幕指纹！旗舰新品荣耀50", price: 1628 }, { id: 100102, img: "./img/100102.jpg", color: "幻夜黑", title: "【京仓速发】送：壳膜+碎屏保+一年质保+晒单红包。4800万高感光夜拍三摄，光学屏幕指纹！旗舰新品荣耀50", price: 1648 }, { id: 100103, img: "./img/100103.jpg", color: "蓝水翡翠", title: "【京仓速发】送：壳膜+碎屏保+一年质保+晒单红包。4800万高感光夜拍三摄，光学屏幕指纹！旗舰新品荣耀50", price: 1698 }, ], promoteImg: "", titleIcon: false, title: "荣耀Play4T Pro/荣耀play4tpro 华为麒麟810芯片 全网通手机 冰岛幻境 8+128GB【碎屏险套装】", info: ["8GB运存", "128GB"], judge: 20000, shopping: "佳沪电商旗舰店", shoppingHref: "https://mall.jd.com/index-113406.html?from=pc", icon: { icon1: [],//红底白字 icon2: ["京东物流", "免邮", "赠"],//白底红字 icon3: [], icon4: [] } }, { id: "1002", goods: [ { id: 100201, img: "./img/100201.jpg", color: "星空黑", title: "【自营】双灯强光手电筒.侧键开关/金属边框/4000mAh大电池.持久待机30天/一键解锁/一键报时/【365天以换代修】查看4G全网通版", price: 155 }, { id: 100202, img: "./img/100202.jpg", color: "中国红", title: "【自营】双灯强光手电筒.侧键开关/金属边框/4000mAh大电池.持久待机30天/一键解锁/一键报时/【365天以换代修】查看4G全网通版", price: 155 }, { id: 100203, img: "./img/100203.jpg", color: "悍马绿", title: "【自营】双灯强光手电筒.侧键开关/金属边框/4000mAh大电池.持久待机30天/一键解锁/一键报时/【365天以换代修】查看4G全网通版", price: 155 }, ], promoteImg: "./img/1002promoteImg.png|关注店铺即享115元|6.23-7.22", titleIcon: false, title: "纽曼 Newman L8 星空黑 三防老人手机超长待机 移动2G 直板按键大字大声 双卡双待老年机 学生儿童备用功能机", info: ["8GB运存", "128GB"], judge: 20000, shopping: "纽曼京东自营官方旗舰店", shoppingHref: "https://mall.jd.com/index-1000097221.html?from=pc", icon: { icon1: ["自营"],//红底白字 icon2: ["秒杀", "赠"],//白底红字 icon3: [], icon4: [] } }, { id: "1003", goods: [ { id: 100301, img: "./img/100301.jpg", color: "液氧 ", title: "vivo X50", price: 2699 }, { id: 100302, img: "./img/100302.jpg", color: "黑镜", title: "vivo X50", price: 2699 }, { id: 100303, img: "./img/100303.jpg", color: "浅醺", title: "vivo X50", price: 2699 }, ], promoteImg: "", titleIcon: false, title: "vivo X50 5G手机 8+128GB 液氧 超感光夜摄 后置4800W像素 90Hz超薄柔性屏 双模5G全网通手机", info: ["8GB运存", "128GB"], judge: 20000, shopping: "vivo京东自营官方旗舰店", shoppingHref: "https://mall.jd.com/index-1000085868.html?from=pc", icon: { icon1: ["自营", "本地仓"],//红底白字 icon2: ["劵1350-95"],//白底红字 icon3: [], icon4: [] } }, { id: "1004", goods: [ { id: 100401, img: "./img/100401.jpg", color: "曜岩黑 ", title: "限时优惠1300元，惊爆到手价7899元，下单还享12期免息！三星全系产品火热抢购中，欲购从速！", price: 7899 }, { id: 100402, img: "./img/100402.jpg", color: "迷雾金", title: "限时优惠1300元，惊爆到手价7899元，下单还享12期免息！三星全系产品火热抢购中，欲购从速！", price: 7899 }, { id: 100403, img: "./img/100403.jpg", color: "初露白", title: "限时优惠1300元，惊爆到手价7899元，下单还享12期免息！三星全系产品火热抢购中，欲购从速！", price: 7899 }, ], promoteImg: "", titleIcon: false, title: "三星 SAMSUNG Galaxy Note20 Ultra 5G(SM-N9860)5G手机 S Pen&三星笔记 120Hz 游戏手机 12GB+256GB 曜岩黑", info: ["12GB运存", "256GB"], judge: 20000, shopping: "三星京东自营官方旗舰店", shoppingHref: "https://mall.jd.com/index-1000003443.html?from=pc", icon: { icon1: ["自营"],//红底白字 icon2: [],//白底红字 icon3: [], icon4: [] } }, { id: "1005", goods: [ { id: 100501, img: "./img/100501.jpg", color: "天空之境 ", title: "高速运行，适合学生，商务备用，后置1600万，自带美颜，强悍多核，应用多开，3900毫安电池强劲续航", price: 699 }, { id: 100502, img: "./img/100502.jpg", color: "翡翠绿", title: "高速运行，适合学生，商务备用，后置1600万，自带美颜，强悍多核，应用多开，3900毫安电池强劲续航", price: 699 }, { id: 100503, img: "./img/100503.jpg", color: "幻夜黑", title: "高速运行，适合学生，商务备用，后置1600万，自带美颜，强悍多核，应用多开，3900毫安电池强劲续航", price: 699 }, ], promoteImg: "", titleIcon: false, title: "小辣椒M12 Pro指纹一体游戏全网通4G大内存128G安卓学生高性价比千元机超长待机老人智能手机 天空之境 全网通[8G+128G]", info: ["8GB运存", "128GB"], judge: 20000, shopping: "极客小酷旗舰店", shoppingHref: "https://mall.jd.com/index-10137621.html?from=pc", icon: { icon1: [],//红底白字 icon2: [],//白底红字 icon3: [], icon4: [] } }, { id: 1016, goods: [ { id: 101601, img: "./img/101601.jpg", color: "白色", title: "【手机、平板、笔记本旧机卖高价，加价红包快速回血】点击查看》》", price: 2579 }, { id: 101602, img: "./img/101602.jpg", color: "黑色", title: "【手机、平板、笔记本旧机卖高价，加价红包快速回血】点击查看》》", price: 1999 }, ], promoteImg: "", titleIcon: "flase", title: "Apple iPhone X 苹果x二手手机 白色 256G ", info: [], judge: 20001, shopping: "拍拍严选官方旗舰店", shoppingHref: "https://mall.jd.com/index-10180819.html?from=pc", incon: { ico1: [], ico2: ['2000-120'], ico3: [], ico4: [], } }, { id: 1017, goods: [ { id: 101701, img: "./img/101701.png", color: "初雪水晶", title: "【荣耀官方直供】全国联保，大量现货，当天发货，赠中国荣耀定制壳+限量智能无线蓝牙耳机+原装碎屏险+水凝膜+运费险+2年保修荣耀50pro火爆抢购中", price: 2999 }, { id: 101702, img: "./img/101702.jpg", color: "初雪水晶", title: "【荣耀官方直供】全国联保，大量现货，当天发货，赠中国荣耀定制壳+限量智能无线蓝牙耳机+原装碎屏险+水凝膜+运费险+2年保修荣耀50pro火爆抢购中", price: 2699 }, { id: 101703, img: "./img/101703.jpg", color: "墨玉青", title: "【荣耀官方直供】全国联保，大量现货，当天发货，赠中国荣耀定制壳+限量智能无线蓝牙耳机+原装碎屏险+水凝膜+运费险+2年保修荣耀50pro火爆抢购中", price: 2699 }, { id: 101704, img: "./img/101704.png", color: "墨玉青", title: "【荣耀官方直供】全国联保，大量现货，当天发货，赠中国荣耀定制壳+限量智能无线蓝牙耳机+原装碎屏险+水凝膜+运费险+2年保修荣耀50pro火爆抢购中", price: 2999 }, { id: 101705, img: "./img/101705.jpg", color: "亮黑色", title: "【荣耀官方直供】全国联保，大量现货，当天发货，赠中国荣耀定制壳+限量智能无线蓝牙耳机+原装碎屏险+水凝膜+运费险+2年保修荣耀50pro火爆抢购中", price: 2699 }, ], promoteImg: "", titleIcon: "flase", title: "【荣耀官方直供】全国联保，大量现货，当天发货，赠中国荣耀定制壳+限量智能无线蓝牙耳机+原装碎屏险+水凝膜+运费险+2年保修荣耀50pro火爆抢购中", info: [], judge: 501, shopping: "疆界互联旗舰店", shoppingHref: "https://mall.jd.com/index-624094.html?from=pc", incon: { ico1: [], ico2: ['京东物流', '秒杀', '赠'], ico3: [], ico4: [], } }, { id: 1006, goods: [ { id: 100601, img: "./img/100601.jpg", color: "red", title: "【365天无忧换新】自营旗舰店！新品电信机来袭!国际大牌,低辐射,经久耐用,老年手机,超长待机,防滑机身,防尘按键,高亮手电,收音机/MP3娱乐》戳我看特价手机", price: 175 }, { id: 100602, img: "./img/100602.jpg", color: "red", title: "【365天无忧换新】自营旗舰店！新品电信机来袭!国际大牌,低辐射,经久耐用,老年手机,超长待机,防滑机身,防尘按键,高亮手电,收音机/MP3娱乐》戳我看特价手机", price: