html+css+js实现类淘宝星级宝贝评价系统

来源：互联网发布：mac版酷狗传歌编辑：程序博客网时间：2024/04/28 01:29

1.先上效果图

鼠标悬浮效果

鼠标点击效果

点击后把鼠标移开依旧会恢复上次的评分

2.准备部分

1.提示框倒三角的实现

看这张图片

颜色比较丑。我们实现很多地方都要用到这种气泡型的东西，倒三角是它的实现思路。我们怎么制作一个倒三角呢？？用css background的话要加载图片，是不利于网站优化的.我这里用到的办法是采用css border来实现的。

继续看这张图片

它的代码长成这个样子,就是一个单纯的DIV

              .triangle{width: 30px;height: 30px;border-style: solid;border-width: 20px;border-color:crimson steelblue lightgreen pink;}

原来就是四方枭雄想争夺都想问鼎，你不让我我不让你，但是达成了一个领土共识，所以各自形成了梯形。皇帝虽羸弱，但毕竟还是龙，一日不死各路枭雄的敌人就会多一个。

来，我们让皇帝死。

             .triangle{width: 0px;height: 0px;border-style: solid;border-width: 20px;border-color:crimson steelblue lightgreen pink;}

啪，皇帝驾崩

看来时事造就英雄啊，绿党貌似掌握了大权

          .triangle{width: 0px;height: 0px;border-style: solid;border-width: 20px;border-color:transparent transparent lightgreen transparent;}

回到正题，我们为绿党造一个父DIV，提示框嘛，总得有框的样子

#box{width: 200px;height: 50px;background: lightgreen;position: relative;margin: 20px;}.triangle{width: 0px;height: 0px;border-style: solid;border-width: 20px;border-color:transparent transparent lightgreen transparent;position: absolute;top: -30px;left: 0;}

给绿党设置绝对定位，小荷才露尖尖角啊

我们要设置黑边框怎么破啊？？？？？？？

我们再设置培养一个党派，叫黑党，不，黑手党吧

<div id="box">  <div class="triangle"></div>  <div class="triangle_outer"></div>  </div>

黑手党的css长这样

.triangle_outer{width: 0px;height: 0px;border-style: solid;border-width: 20px;border-color:transparent transparent black transparent;position: absolute;top: -31px;left: 0;}

就是颜色变了。

不能让黑手党完全覆盖绿党了哇，我们为绿党设置一个z-index=1; 黄袍加身
注意，这里还要让黑手党的top比绿党的top小1，才能露出那个蜜汁黑边框啊。黑手党最终用自己的身体成就了绿党的边框.

代码清单 css

#box{width: 200px;height: 50px;background: lightgreen;position: relative;margin: 20px;border: 1px solid black;}.triangle{width: 0px;height: 0px;border-style: solid;border-width: 20px;border-color:transparent transparent lightgreen transparent;position: absolute;top: -40px;left: 10px;z-index: 1;}.triangle_outer{width: 0px;height: 0px;border-style: solid;border-width: 20px;border-color:transparent transparent black transparent;position: absolute;top: -41px;left: 10px;}

html

<div id="box">  <div class="triangle"></div>  <div class="triangle_outer"></div>  </div>

效果

这颜色真丑。

下面不扯皮了，

2.附上这个评分系统的完整HTML代码

<!--作者：shsgear@qq.com时间：2016-11-04描述：星级评分系统--><!DOCTYPE html><html><head><meta charset="UTF-8"><title>星级评分系统</title><style type="text/css">  *{  margin: 0;  padding: 0;  }  body{  font: 15px "微软雅黑";  color: darkslategrey;  }  #score{  width: 600px;  border: 3px  solid #CCC;  height: 50px;  margin: 10px auto;  position: relative;  }  #score>span{  display: inline-block;  width:150px;  height: 50px;    line-height: 50px;  text-align: center;  }  #score ul{  width: 270px;  position: absolute;  top: 0px;  left: 160px;  }  #score ul.clearfix:after{  content: '';  display: table;  clear: both;    }  #score  ul li{  float: left;  list-style: none;  cursor: pointer;  width: 48px;  height: 48px;  background:url(img/star_outline_48px.png);  }  #score p{  float:right;  width:180px;  height: 50px;  line-height: 50px;    text-align: center;  }  #tip{  position: absolute;  background: #94e24f;  border: 1px solid #FFA07A;  width: 180px;  height: 50px;  left:160px;  top: 70px;  line-height: 50px;  text-align: center;  border-radius: 3px;  display: none;  }  #tip .triangle{  width:0px;            height:0px;    border-width:14px;    border-style:solid;    border-color:transparent transparent #94e24f transparent;    position: absolute;    left: 10px;    top: -28px;    z-index: 1;          }          #tip .triangle_outer{          width:0px;            height:0px;    border-width:14px;    border-style:solid;    border-color:transparent transparent #FFA07A transparent;    position: absolute;    left: 10px;    top: -29px;          }  strong{  color: crimson;  margin: 2px;  }  #score li.current{  background: url(img/star_48px.png);  }  </style></head><body>    <div id="score">    <span>请为我们的宝贝打分</span>    <ul class="clearfix">    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    </ul>    <p><strong></strong></p>    <div id="tip">    <strong>1星,非常糟糕</strong>    <div class="triangle"></div>    <div class="triangle_outer"></div>    </div>    </div>         <script type="text/javascript">           var oScore = document.getElementById("score");           var oTip   = document.getElementById("tip");           var oLi    =   oScore.getElementsByTagName('li');           var oStrong=   oScore.getElementsByTagName('strong');           var oSpan  =   oScore.getElementsByTagName('span')[0];           var iScore = iPoint = 0;           var msg=['1星  非常糟糕','2星  糟糕','3星  一般','4星  商品良好','5星  非常棒'];           var review=['1星满意度,请联系我们','2星满意度,请联系我们','3星满意度,还不满意？？','4星满意度,会再接再厉','5星满意度,会继续努力哒'];           for(var i=0;i<oLi.length;i++){             oLi[i].index=i;             oLi[i].onmouseover = function(){              iScore = this.index+1;             //记录下索引值              fnPoint(iScore);                   //鼠标移过显示评分              oTip.style.display='block';        //让提示框显示在对应的位置              oTip.style.left = 160+this.index*48+'px';              oStrong[1].innerHTML = msg[this.index];  //移过不同的星星显示对应的文字              console.log(this.index)             }             oLi[i].onclick = function(){                oStrong[0].innerHTML = review[this.index]; //右上角评价结果显示                iPoint = this.index+1;       //鼠标点击事件，记录下索引，并返回索引值                return iPoint;                             }             oLi[i].onmouseout = function(){  //接收点击的索引，鼠标移出后，恢复上次的评分              fnPoint(iPoint);              oTip.style.display='none';     //鼠标移出隐藏提示框             }                        }           function fnPoint(arg){                             iScore = arg? arg:iScore;        //接收一个参数，如果没传进参数就用iScore             for(var i=0;i<oLi.length;i++){   //遍历oLi,对点击的和之前的都亮起来，之后的不亮              oLi[i].className = i<iScore? 'current':'';               }           }         </script></body></html>

——————————————————————————————————————————————————————————————————————————

后记

本来实现鼠标滑过当前的和前面的星星都亮，我的思路是：循环遍历oLi，用数组的slice方法截取前面几个li为其添加class，但是天真了，DOM的document.getElementBy*(Id,tagName...)方法得到DOM集合都是Array-Like，伪数组，它的类型是HTMLCollection，只有数组的.length和for循环可以用，要选择其内部的特定元素只能用HTMLCollection的方法，item()方法

我的思路：伪代码

                          <pre name="code" class="javascript"> switch(this.index){                                case 0:  oLi[0].className='current';                                   break;                                case 1:  oLi.item(0,1).className='current';                                break;                               }

大致是这样，太复杂也不成立，好像item方法只能接收一个参数，有知道的同学说一下啦...

0 0