五星好评的详细步骤

<!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></title>     <style>       #ul {         padding: 0;         margin: 0;         list-style: none;         display: inline-block;         vertical-align: middle;         height: 28px;       }
      #div {         display: inline-block;         vertical-align: middle;         margin-left: 10px;       }
      #ul li {         float: left;         background: gray;         width: 27px;         height: 28px;         margin: 10px;       }
      #ul li.active {         background: red;       }     </style>   </head>
  <body>     <ul id="ul">       <li></li>       <li></li>       <li></li>       <li></li>       <li></li>     </ul>     <!-- <div id="div"></div> -->   </body>
  <script>     var oli = document.querySelectorAll("#ul li");     //设置一个变量为-1,原因是差评的数量可能是没有,最小的下线取值可以到0;     var point = -1;     //设置每一个元素的角标     for (var i = 0; i < oli.length; i++) {       oli[i].index = i;     }
    ul.onmouseover = function (e) {       var ev = event || e;       var target = ev.target || ev.srcElement;       //鼠标经过,通过角标计数一次;       if (target.tagName === "LI") {         var count = target.index;         for (var i = 0; i <= count; i++) {           oli[i].classList.add("active");         }       }     };     ul.onmouseout = function () {       for (var i = 0; i < oli.length; i++) {         if (i <= point) {           oli[i].classList.add("active");         } else {           oli[i].classList.remove("active");         }       }     };
    ul.onclick=function(e){         var ev=event||ev;         var target=ev.target||ev.srcElement;         if(target.tagName==='LI'){             //鼠标点击一次计数,当鼠标等级的最小次数小于等于-1的时候,就结束循环,因为差评的话也有可能是小于等于-1的            var  count=target.index;            if(count<=point)return;            point=target.index;         }     }   </script>   <!-- <script>     var oli = document.querySelectorAll("#ul li");     var div = document.querySelector("#div");     var point = -1;     //设置角标的获取;     for (var i = 0; i < oli.length; i++) {       oli[i].index = i;     }     //委托事件     ul.onmouseover = function (e) {       var ev = event || e;       var target = ev.target || ev.srcElement;       if (target.tagName === "LI") {           var count=target.index;         for (var i = 0; i <=count; i++) {           oli[i].classList.add("active");         }       }     };
    ul.onmouseout=function(){         for(var i=0;i<oli.length;i++){             if(i<=point){                 oli[i].classList.add('active');             }else{                 oli[i].classList.remove('active')             }                      }     }
    ul.onclick=function(e){         var ev=event||e;         var target=ev.target||ev.srcElement;         if(target.tagName==='LI'){            var count=target.index;            if(count<=point)return;            point =target.index;         }     }   </script> -->
  <!-- <script>     var oli = document.querySelectorAll("#ul li");     var div = document.querySelector("#div");     var point = -1;     for (var i = 0; i < oli.length; i++) {       oli[i].index = i;     }     ul.onmouseover = function (e) {       var ev = event || e;       var target = ev.target || ev.srcElement;       if (target.tagName === "LI") {         var count = target.index;         for (var i = 0; i <= count; i++) {           oli[i].classList.add("active");         }       }     };     ul.onmouseout = function () {       for (var i = 0; i < oli.length; i++) {         if (i <= point) {           oli[i].classList.add("active");         } else {           oli[i].classList.remove("active");         }       }     };     ul.onclick = function (e) {       var ev = event || e;       var target = ev.target || ev.srcElement;       //核心思想通过角标找到对应的小盒子,还用到了标签名的结果返回值大写字母       if (target.tagName === "LI") {         var count = target.index;         if (count <= point) {           return;         }         point = target.index;       }     };   </script> --> </html>  
上一篇:电池充电器UL1310、启动电源UL2743、电脑风扇507测试报告怎么办理?


下一篇:使用HTML和CSS实现的标签云效果(附demo)