js评分系统

l_sss2019

已于 2022-08-25 18:53:40 修改

阅读量541

点赞数 1

文章标签： javascript 前端 css

于 2022-08-20 12:04:25 首次发布

本文链接：https://blog.csdn.net/l_sss2019/article/details/126438058

版权

一、构造函数写评分系统
效果：当鼠标滑过的时候星星会亮，并显示评语，当鼠标移出的时候，评语消失，星星不亮，当点击星星的时候，被点击的星星及它前面的星星都会显示
下面展示一些 内联代码片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            color: #666;
            font: 12px/2 Arial;
        }

        #star {
            margin: 10px auto;
            /* border: 1px solid red; */
            width: 800px;
            position: relative;
            /*设置定位给p标签参考*/
        }

        ul {
            list-style-type: none;
            /* border: 1px solid green; */
            margin: 0px 10px;
            /*必须设置外边距才能上去*/
        }

        ul,
        span {
            float: left;
        }

        ul li {
            float: left;

            background: url('images/star.png') no-repeat;
            text-indent: -9999px;
            /* 隐藏a标签中的文本 */
            width: 24px;
            margin: 0px;

        }

        #star li.on {
            background-position: 0 -28px;
        }

        /* 
        span {
            /* border: 1px solid yellow; 
        } */

        p {
            /*后面要根据鼠标变动,更改p,所以要设置定位*/
            /* border: 1px solid blue;  */
            position: absolute;
            top: 20px;
            width: 200px;
            display: none;
        }

        p em {
            color: #f60;
            display: block;
            font-style: normal;
        }

        strong {
            color: #f60;
            padding-left: 20px;
        }
    </style>
</head>
<body>
    <div id="star">
        <span>点击星星就能打分</span>
        <ul>
            <li>
                <a href="javascript:;">1</a>
            </li>
            <li>
                <a href="javascript:;">2</a>
            </li>
            <li>
                <a href="javascript:;">3</a>
            </li>
            <li>
                <a href="javascript:;">4</a>
            </li>
            <li>
                <a href="javascript:;">5</a>
            </li>
        </ul>
        <span></span>
        <p>选择解释</p>
        <script>
            function setScore(){
                this.msg = [
                "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
                "不满意|部分有破损，与卖家描述的不符，不满意",
                "一般|质量一般，没有卖家描述的那么好",
                "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
                "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
            ];
            //获取节点
            this.ul = document.querySelector('ul');
            this.liObj = document.querySelectorAll('ul>li');
            this.pObj = document.querySelector('p');
            this.spanObj = this.ul.nextElementSibling;
            //设置基础数据
             //保存滑过数目的数据
             this.score = 0;
             //定义一个函数，函数里面包括给li绑定的时间
             this.loopBind();
            // 
            }
            //创建loopBinder函数,将函数添加到原型对象中
            setScore.prototype.loopBind = function(){
                // console.log(this);
                //给li绑定鼠标滑过事件
                //循环遍历li里的元素，给每个li绑定事键
                this.liObj.forEach((li,key)=>{
                    li.onmouseover = this.overFn.bind(this,key);
                    li.onmouseout = this.outFn.bind(this,key);
                    li.onclick = this.clickFn.bind(this,key);
                })   
            }
           //创建鼠标滑过函数
           setScore.prototype.overFn = function(k){
            // console.log(this);这时指向setScore函数
            // this.pObj.style.display = 'block'
            //获取当前事件源li，
            let tar = event.target;
            // console.log(tar);
            this.pObj.style.display = 'block';
            //当鼠标移动的时候让li跟随鼠标移动
            this.pObj.style.left =tar.offsetLeft-25+'px';
            //把文字写入p标签
            let temMsg = this.msg[k].split('|');
            // console.log(temMsg);
            //把文字写入p标签里
            this.pObj.innerHTML = `<strong>${temMsg[0]}</strong></br>${temMsg[1]}`; 
            //并让保存的记录数加1
            //当p滑过的时候让星星亮
            this.starShow(k+1);
            // console.log(k);
           }
           //给鼠标创建一个点击函数，当点击的时候可以显示评价
           setScore.prototype.clickFn = function(k){
           //当点击的时候让p消失
           this.pObj.style.display = 'none';
          //点击的时候让span出现
          let temMsg = this.msg[k].split('|');
          this.spanObj.innerHTML = `<strong>${temMsg[0]}</strong>${temMsg[1]}`; 
          //给记录数重新赋值
          this.score = k+1;

           }
           //创建一个鼠标移出的时间，当鼠标移出的时候让p消失，星星不良
           setScore.prototype.outFn= function(k){
            this.pObj.style.display = 'none';
            //调用让星星亮的函数
            this.starShow();
           }
           //创建让星星亮的函数
           setScore.prototype.starShow = function(k){
            // console.log(k);
            //设置一个数据用来保存key和score的值
            let tem = k || this.score;
            // 循环控制li的状态
            for(let i= 0;i<this.liObj.length;i++){
                this.liObj[i].className = tem>i?'on':'';
            }   
           }
            new setScore();
        </script>
    </div>
</body>
</html>

效果展示：
在这里插入图片描述

l_sss2019

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js评分系统

构造函数写评分系统
复制链接

扫一扫

js评分系统

“相关推荐”对你有帮助么？