javascript+css好多网站用的选星星实现打分功能的函数

时间:2020-05-12 人气:0

函数有两个参数，功能如下：
obj： img标签组的父容器，类型为DOM对象；
oEvent： event对象。
这个函数的优点是html代码可以很简洁，使用图片也可以很少，只需要两张图片。事件句柄只需要写在img的父容器上即可。演示用的图片我用的是绝对地址，各位在使用的时候改成网站的相对地址就可以了。当我们点击的时候，我用的是个alert事件。事实上，我们会在这个地方用个ajax方法，把相关的参数传到服务器端。只要把alert(this._num+1)写成sendAjax(this._num+1)就可以了。
需要的两张图片：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>_www.qb5200.com_阿当制作选星星打分</title> 
<style type="text/css"> 
.starWrapper{border:1px solid #FFCC00;padding:5px;width:70px;} 
.starWrapper img{cursor:pointer;} 
</style> 
<script type="text/javascript"> 
function rate(obj,oEvent){ 
//================== 
// 图片地址设置 
//================== 
var imgSrc = 'https://img.qb5200.com/download-x/20200511/25917.gif'; 
var imgSrc_2 = '//www.qb5200.com/upload/20080508122010810.gif'; 
//--------------------------------------------------------------------------- 
if(obj.rateFlag) return; 
var e = oEvent || window.event; 
var target = e.target || e.srcElement;  
var imgArray = obj.getElementsByTagName("img"); 
for(var i=0;i<imgArray.length;i++){ 
   imgArray[i]._num = i; 
   imgArray[i].onclick=function(){ 
    if(obj.rateFlag) return; 
    obj.rateFlag=true; 
    alert(this._num+1); 
   }; 
} 
if(target.tagName=="IMG"){ 
   for(var j=0;j<imgArray.length;j++){ 
    if(j<=target._num){ 
     imgArray[j].src=imgSrc_2; 
    } else { 
     imgArray[j].src=imgSrc; 
    } 
   } 
} else { 
   for(var k=0;k<imgArray.length;k++){ 
    imgArray[k].src=imgSrc; 
   } 
} 
} 
</script> 
<body> 
<p class="starWrapper" onmouseover="rate(this,event)"> 
          <img onerror="javascript:this.src='/skin1/img/error.jpg';" src="https://img.qb5200.com/download-x/20200511/25917.gif" title="很烂" /><img onerror="javascript:this.src='/skin1/img/error.jpg';" src="https://img.qb5200.com/download-x/20200511/25917.gif" title="一般" /><img onerror="javascript:this.src='/skin1/img/error.jpg';" src="https://img.qb5200.com/download-x/20200511/25917.gif" title="还好" /><img onerror="javascript:this.src='/skin1/img/error.jpg';" src="https://img.qb5200.com/download-x/20200511/25917.gif" title="较好" /><img onerror="javascript:this.src='/skin1/img/error.jpg';" src="https://img.qb5200.com/download-x/20200511/25917.gif" title="很好" /> 
</p> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

加载全部内容