五星好评利用cookie传递数据

最新推荐文章于 2024-09-05 11:00:53 发布

前端小熊猫

最新推荐文章于 2024-09-05 11:00:53 发布

阅读量812

点赞数

文章标签： javascript cookie

本文链接：https://blog.csdn.net/fan840174909/article/details/109436259

版权

这篇博客介绍了如何利用JavaScript实现五星好评功能，包括五星好评的结构、功能介绍、HTML页面代码和JavaScript代码实现。重点在于星星组件的JS代码，展示了点击反馈和鼠标滑动的表情效果。通过Cookie保存用户的选择，实现页面刷新后仍能保持之前的位置。

摘要由CSDN通过智能技术生成

电商系统五星好评组件利用js实现

五星好评的结构

	大致分为四大块，客户对什么方面评价，评价的分数，评价的星级，以及评价的心情表情

五星好评的功能介绍

1.当我们链接到电商的评论系统页面时，就会打开五星好评的界面，鼠标在上面移动时，客户评价的星星就会随着
	鼠标的改变而改变，当我们点击某刻星星时，该星星就会锁定，鼠标离开星星不会消失
2.鼠标滑动的星星上方会出现对应的心情表情这个表情会定位到对应的星级正上方， 会随着鼠标的位置改变而改
	变，鼠标划出星星，表情会自动消失
3.在星级评价的后面就是评分，我们刚进入页面时，评分默认显示0分，鼠标经过时，随着鼠标在星星上滑动时，
	分数随着鼠标的位置变化而变化，分数对应着星星的颗数，鼠标点击星星时，分数锁定，鼠标离开分数不会消失
4.当我们再次点击进入页面时，页面还是显示上一次的客户评价，利用cookie存储

html页面代码

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div{
    
            font-style: normal;
        }
    </style>
</head>
<body>
    <script type="module">
        import Star from "./js/Star.js";//引入五星好评的组件
        let list = ["饭菜质量","商家服务","外卖速度速度","骑手态度"];//需要评价的内容
        for(var i=0;i<list.length;i++){
    
            let star = new Star(list[i],12);//创建星星，后面的12是 用cookie时传入的date
            star.appendTo("body");//星星添加到body
            star.addEventListener("change",(e)=>{
    
                console.log(e.starList);//接受点击的抛发事件，输出当前点击的评价内容和分数组成
            });
        }
    </script>
</body>
</html>

js代码

js代码中引入了一个创建对象常用的自定义类(非重点关注)

export default class Component extends EventTarget{
   
    elem;
    constructor(){
   
        super();
        this.elem=this.createElem();
    }
    createElem(){
   
        if(this.elem) return this.elem;
        let div=document.createElement("div");
        return div;
    }
    appendTo(parent){
   
        if(typeof parent==="string")parent=document.querySelector(parent);
        parent.appendChild(this.elem

最低0.47元/天解锁文章

前端小熊猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
五星好评利用cookie传递数据

电商系统五星好评组件利用js实现五星好评的结构五星好评的功能介绍html页面代码js代码js代码中引入了一个创建对象常用的自定义类(非重点关注)星星组件js代码演示效果五星好评的结构大致分为四大块，客户对什么方面评价，评价的分数，评价的星级，以及评价的心情表情五星好评的功能介绍1.当我们链接到电商的评论系统页面时，就会打开五星好评的界面，鼠标在上面移动时，客户评价的星星就会随着鼠标的改变而改变，当我们点击某刻星星时，该星星就会锁定，鼠标离开星星不会消失2.鼠标滑动的星星上方会出现对应的心情
复制链接

扫一扫