编程 Javascript

js实现的星星评分功能函数

Posted in Javascript onDecember 09, 2015

本文实例讲述了js实现的星星评分功能函数。分享给大家供大家参考，具体如下：

<!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>
<script type="text/javascript">
function rate(obj,oEvent){
// 图片地址设置
var imgSrc = '../images/s0.gif'; //没有填色的星星
var imgSrc_2 = '../images/s1.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); //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>
</head>
<body>
<p onmouseover="rate(this,event)">
 <img src="../images/s0.gif" title="很烂" />
 <img src="../images/s0.gif" title="一般" />
 <img src="../images/s0.gif" title="还好" />
 <img src="../images/s0.gif" title="较好" />
 <img src="../images/s0.gif" title="很好" />
 </p>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

js实现的星星评分功能函数

- Author -

fox123871

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JXTree对象，读取外部xml文件数据，生成树的函数

Apr 02 Javascript

javascript css float属性的特殊写法

Nov 13 Javascript

javascript函数中的arguments参数

Aug 01 Javascript

基于JQuery的动态删除Table表格的行和列的代码

May 12 Javascript

纯JS实现五子棋游戏兼容各浏览器(附源码)

Apr 24 Javascript

禁止拷贝网页内容的js代码

Jan 22 Javascript

jquery ajax 局部无刷新更新数据的实现案例

Feb 08 Javascript

jQuery Easyui Tabs扩展根据自定义属性打开页签

Aug 15 Javascript

详解JavaScript的闭包、IIFE、apply、函数与对象

Dec 21 Javascript

关于JavaScript的单双引号嵌套问题

Aug 20 Javascript

关于vue-router的beforeEach无限循环的问题解决

Sep 09 Javascript

利用js实现简单开关灯代码

Nov 23 Javascript

JavaScript中的this到底是什么(一)

Dec 09 #Javascript

js实现的奥运倒计时时钟效果代码

Dec 09 #Javascript

完美实现bootstrap分页查询

Dec 09 #Javascript

JavaScript脚本库编写的方法

Dec 09 #Javascript

js省市联动效果完整实例代码

Dec 09 #Javascript

JavaScript知识点整理

Dec 09 #Javascript

js实现跨域访问的三种方法

Dec 09 #Javascript