简单JS小案例:五星好评

CSS内容可自行设计，本案例仅供参考，请自行拷贝代码，拷贝要留言哦！

注意： js文件路径及文件名需要自行更改！！

Html部分：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/faceRed.js"></script></head>
<body>
<script>let face=new FaceRed("快速包装");let face1=new FaceRed("快递服务");let face2=new FaceRed("送货上门");
</script>
</body>
</html>

JS部分

class FaceRed{
constructor(label,parent){this.faceRed=this.initFaceRed(label,parent);this.spanList=Array.from(this.faceRed.querySelectorAll(".redStar"));this.position=-1;
}
initFaceRed(_label,parent){if(this.faceRed) return this.faceRed;if(!parent) parent=document.body;let div=document.createElement("div");Object.assign(div.style,{paddingTop:"20px",float:"left",marginLeft:"10px"});let labelElem=document.createElement("label");labelElem.textContent=_label;div.appendChild(labelElem);Object.assign(labelElem.style,{float: "left",marginRight:"5px"});for(let i=0;i<5;i++){let span=this.createRed();span.className="redStar";div.appendChild(span);}let clear=document.createElement("a");Object.assign(clear.style,{display: "block",visibility: "hidden",opacity: 0,height: 0,clear: "both",zoom:1});div.appendChild(clear);parent.appendChild(div);div.self=this;div.addEventListener("mouseover",this.mouseHandler);div.addEventListener("mouseout",this.mouseHandler);div.addEventListener("mouseleave",this.mouseLeaveHandler);div.addEventListener("click",this.clickHandler);return div;
}
createRed(){let span=document.createElement("span");Object.assign(span.style,{display: "block",float: "left",width: "16px",height: "16px",background: "url('https://img-blog.csdnimg.cn/20210628165327285.png') 0 0",marginTop: "3px",cursor: "pointer"});let face=document.createElement("span");Object.assign(face.style,{display: "none",width: "16px",height: "16px",background: "url('https://img-blog.csdnimg.cn/20210628165121150.png') 0 0",marginTop: "-18px",});face.className="faceReds";span.appendChild(face);return span;
}
mouseHandler(e){if(e.target.constructor!==HTMLSpanElement) return;if(e.target.className==="faceReds") return;let index=this.self.spanList.indexOf(e.target);if(e.type==="mouseover"){if(index>this.self.position){this.self.setStarRed(index);}else{this.self.setStarRed(this.self.position);}e.target.firstElementChild.style.display="block";e.target.firstElementChild.style.backgroundPositionX=-(4-index)*20+"px";}else if(e.type==="mouseout"){e.target.firstElementChild.style.display="none";}
}
mouseLeaveHandler(e){this.self.setStarRed(this.self.position)
}
clickHandler(e){if(e.target.constructor!==HTMLSpanElement) return;this.self.position=this.self.spanList.indexOf(e.target);
}
setStarRed(index){for(let i=0;i<this.spanList.length;i++){if(i<=index){this.spanList[i].style.backgroundPositionY="-16px";continue;}this.spanList[i].style.backgroundPositionY="0px";}}
}

img

不需要更换代码中的图片链接，都为你们更改好了，考虑到需要自提的朋友所以放在这里

face-red.png

https://img-blog.csdnimg.cn/20210628165121150.png

commstar

https://img-blog.csdnimg.cn/20210628165327285.png

简单JS小案例:五星好评相关推荐

JS小案例总结（JS基础案例）
JS小案例总结 JS小案例总结案例一:JS实现tab选项卡功能案例二:JS实现盒子拖拽功能案例三:JS实现导航条吸顶效果案例四:JS实现图片懒加载结构案例五:JS实现简易弹幕功能案例六:J ...
JS小案例--关于时间--限时购
JS小案例–关于时间–限时购界面显示和功能实现功能实现设置了一个特定的日期和当前时间相差实现折合成天小时分钟秒使用性 :像某宝的商品限时购所以很实用用到的知识点为日期对象设 ...
js小案例：实现选项卡功能
js小案例:实现选项卡功能 html部分代码 <button>1</button><button>2</button><button>3&l ...
[突发奇想的JS小案例] 2 重力模拟
文章目录前言一.效果展示二.代码与思路 1.代码 2.思路后续展望前言作者是一个JavaScript新手,偶尔想到一些有趣的小案例分享一.效果展示可以利用鼠标拖动舞台中的方块,松开鼠标 ...
JS小案例-文本切换效果
下面是一个文本切换效果的小案例,希望可以可以帮助到有需要的小伙伴 <!DOCTYPE html> <html lang="en"><head>& ...
[突发奇想的JS小案例] 1 捉苍蝇
文章目录前言一.效果展示二.代码与思路 1.代码 2.思路后续展望前言作者是一个JavaScript新手,偶尔想到一些有趣的小案例分享一.效果展示这个小方块很像苍蝇,每当靠近就快速飞走 ...
Hanzi Weiter的简单应用小案例,在HTML汉字的书写,演示汉字笔画顺序的汉字笔画库 js vue案例实例
因为业务需求,上网查询之后写的一个小 demo,参考文档https://hanziwriter.org/ ** 具体实现 ** 在 script 标签加载 Hanzi Writer 只需将以下内容放入 ...
前端使用bootstrap实现一个简单的小案例，重点是关注响应式布局
1.案例的效果展示我们使用的是响应式布局,所谓的响应式布局就是可以使得同一套页面可以兼容不同分辨率的设备.可以看到苹果的官网当你将浏览器的串口放的很小的时候网站的布局也会随这页面大小发生变化,当我们 ...
node.js小案例_留言板
一.前言通过这个案例复习: 1.node.js中模板引擎的使用 2.node.js中的页面跳转和重定向二.主要内容 1.案列演示: 2.案列源码:https://github.com/456123 ...

简单JS小案例:五星好评

Html部分：

JS部分

img

face-red.png

commstar

简单JS小案例:五星好评相关推荐

最新文章

热门文章