电商五星好评案例分析
最近用原生JS面向写了一个五星好评的案例,分享下步骤,供大家学习参考!
首先看下效果图:
鼠标滑过时的效果:
鼠标点击之后的效果图:
当关掉页面重新打开页面时,之前点击的历史记录仍然回保存,不会因为关掉页面或刷新网页而重置效果,这里我用到的技术是本地存储window.localStorage
代码书写步骤:
1. 首先创建一个公共的Component类
2. 创建子类Star继承父类,并设置相关的属性
3. 创建构造函数
4. 书写构造函数中的createStar方法
5. 书写构造函数中的createLabel和createScore方法
6. 鼠标事件方法完善
7. 当事件触发时star . score . face 的的变化
8. 抛发事件
结语
到这里,五星好评的Star.js 的代码就完成了,个人感觉总体来说这个案例用面向对象的思想完成,不是特别的困难,重点在于细节的代码的把握,逻辑清晰,思路明确才能将这个代码完善的书写出来,后续会继续分享一些有趣的案例,如有问题也欢迎有思想的小伙伴发私信讨论!