原生JS实现服务五星好评

最新推荐文章于 2023-07-12 15:46:33 发布

Jonty_Chen

最新推荐文章于 2023-07-12 15:46:33 发布

阅读量445

点赞数 1

分类专栏： JavaScript 文章标签： Javascript css3 html5 html css

本文链接：https://blog.csdn.net/weixin_44369087/article/details/102722594

版权

这篇博客详细介绍了如何利用原生JavaScript实现一个五星好评的交互功能，涵盖了HTML结构设计、JavaScript逻辑处理以及可能用到的CSS样式。通过阅读，读者将能够理解并掌握在没有依赖库的情况下创建动态星级评分的方法。

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

五星好评
鼠标滑动确定
html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script type="module">
        import Star from "./js/Star.js";

        document.addEventListener(Star.STAR_SELECTED_EVENT,starSelectedHandler);
        let  star=new Star("服务评价");
        star.position=2;
        star.bool=true;
        star.appendTo(document.body);

        let  star1=new Star("售后评价")
        star1.appendTo(document.body);
        function starSelectedHandler(e){
            console.log(e.position,e.content);
        }
    </script>
</body>
</html>

js Star.js部分

import Utils from "./Utils.js";
export default class Star{
   
    static STAR_SELECTED_EVENT="star_selected_Event";
    constructor(content,bool){
   
        // this就是new出的对象
        this.arr=[];
        this.position=-1;
        this.bool=bool;
        this.elem=this.createElem(content);
    }
    createElem(content){
   
        if(this.elem) return this.elem;
        let div=Utils.ce("div",{
   
            height:"35px",
            position:"relative"
        });
        let label=Utils.ce("label",{
   
            fontSize:"16px",
            marginRight: "10px",
            display:"inline-block",
            marginTop: "18px",
        },{
   
            textContent:content
        });
        div.appendChild(label);
        for(let i=0;i<5;i++){
   
            let span=Utils.ce("span",{
   
                display: 'inline-block',
                width:"16px",
                height:"16px",
                marginTop: "18px",
                backgroundImage:"url(./img/commstar.png)"
            }