评分效果图
素材图片
这是各种商家上面必有的一个，很实用的一个评分小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>
又是一个实用的功能。
网友评论