評(píng)分效果圖
素材圖片
這是各種商家上面必有的一個(gè)，很實(shí)用的一個(gè)評(píng)分小dome
這個(gè)dome代碼比較少，寫(xiě)到一個(gè)里面了
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>評(píng)分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>
//定義一個(gè)評(píng)價(jià)的數(shù)組
var arr = ["非常差","差","一般","滿意","非常滿意"];
// 獲取div元素
var divEle = document.getElementById('div');
//獲取ul li元素
var lis = document.getElementsByTagName("li");
var ulEle = document.getElementById('ul1');
//給每個(gè)li元素都添加moseover事件，且添加class的active屬性
for(var i =0; i<lis.length; i++){
lis[i].index = i;
lis[i].onmouseover = function(){
change(this.index);
}
//添加點(diǎn)擊事件
lis[i].onclick = function(){
change(this.index);
//在div中添加評(píng)價(jià)
divEle.innerHTML = arr[this.index];
//點(diǎn)擊完之后把每個(gè)li上的mouseover事件移除
for(var y=0; y<lis.length; y++){
lis[y].onmouseover = null;
}
//點(diǎn)擊做完評(píng)價(jià)之后，就不能再點(diǎn)擊了，清空所有的onclick事件
for(var z=0; z<lis.length; z++){
lis[z].onclick = null;
}
}
}
// 把重復(fù)的循環(huán)事件封裝成一個(gè)函數(shù)
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>
又是一個(gè)實(shí)用的功能。
