原生评分dome

作者: 哈哈腾飞 | 来源:发表于2017-06-24 17:14 被阅读0次

原生评分dome
vue实现列表无限滚动
简易计算器
Under the Dome（穹顶之下）
Dome
Swift-URLSessionDownloadTask断点下载
撑起一片天
2018-03-25 marquee JQ控制方法
Swift-自动归档
Swift-CATransition转场动画

评分效果图

素材图片

这是各种商家上面必有的一个，很实用的一个评分小dome 
 这个dome代码比较少，写到一个里面了

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>评分dome</title>
<style type="text/css">
#ul1{padding:0; margin:0; list-style:none;  width:300px; height:28px;}
#ul1 li{float:left; background:url(star.gif) no-repeat 0 0; width:27px; height:28px; }

#ul1 li.active{background:url(star.gif) no-repeat 0 -29px; }
</style>

</head>

<body>
<ul id="ul1" >
    <li class="active"> </li>
    <li class=""> </li>
    <li class=""> </li>
    <li class=""> </li>
    <li class=""> </li>
</ul>
<div id="div"></div>
<script>
        //定义一个评价的数组
       var arr = ["非常差","差","一般","满意","非常满意"];
 
       // 获取div元素
       var divEle = document.getElementById('div');

       //获取ul li元素
       var lis = document.getElementsByTagName("li");
       var ulEle = document.getElementById('ul1');
       
       //给每个li元素都添加moseover事件，且添加class的active属性
       for(var i =0; i<lis.length; i++){  
               lis[i].index = i;  
           lis[i].onmouseover = function(){
             change(this.index);
                
           }
           
          //添加点击事件
          lis[i].onclick = function(){
            change(this.index); 

            //在div中添加评价
            divEle.innerHTML = arr[this.index];

            //点击完之后把每个li上的mouseover事件移除
            for(var y=0; y<lis.length; y++){

                lis[y].onmouseover = null;
            }

            //点击做完评价之后，就不能再点击了，清空所有的onclick事件
                for(var z=0; z<lis.length; z++){

                lis[z].onclick = null;
            }
          }
       }  

       // 把重复的循环事件封装成一个函数
       function  change(index){
         for(var x=0; x<lis.length; x++){
                 lis[x].className='';
              }
              for(var j = 0 ; j<=index; j++){
                lis[j].className = 'active';
              }
       }
   

</script>
</body>
</html>

又是一个实用的功能。