论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > Javascript教程
Tag:验证,特效,入门,实例,验证,表单,特效,正则表达式,跑马灯,document,函数,代码,getElementByID,菜单,图片,视频教程

使用JavaScript制作选星星打分功能函数

文章类别:Javascript | 发表日期:2010-6-26 14:29:31

看了下传统的方法,觉得不好,太麻烦。自己重写了个,思路比较新。
//====================选星星打分功能=================
function rate(obj,oEvent){
//==================
// 图片地址设置
//==================
var imgSrc = 'http://image1.koubei.com/images/store/icon_star_1.gif';
var imgSrc_2 = 'http://image1.koubei.com/images/store/icon_star_2.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;
   }
}
}

函数有两个参数,功能如下:
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>阿当制作</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 = 'http://image1.koubei.com/images/store/icon_star_1.gif';
var imgSrc_2 = 'http://image1.koubei.com/images/store/icon_star_2.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 src="http://image1.koubei.com/images/store/icon_star_1.gif" title="很烂" /><img src="http://image1.koubei.com/images/store/icon_star_1.gif" title="一般" /><img src="http://image1.koubei.com/images/store/icon_star_1.gif" title="还好" /><img src="http://image1.koubei.com/images/store/icon_star_1.gif" title="较好" /><img src="http://image1.koubei.com/images/store/icon_star_1.gif" title="很好" />
</p>
</body>
</html>

视频教程列表
文章教程搜索
 
Javascript推荐教程
Javascript热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058