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程序设计有所帮助。

Javascript 相关文章推荐
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
Mar 09 Javascript
javascript,jquery闭包概念分析
Jun 19 Javascript
Jquery Ajax请求代码(2)
Jan 07 Javascript
使用JavaScript+canvas实现图片裁剪
Jan 30 Javascript
JavaScript设置表单上传时文件个数的方法
Aug 11 Javascript
jQuery插件实现适用于移动端的地址选择器
Feb 18 Javascript
JavaScript中的各种操作符使用总结
May 26 Javascript
浅谈javascript中new操作符的原理
Jun 07 Javascript
JavaScript中关于class的调用方法
Nov 28 Javascript
JS实现二维数组横纵列转置的方法
Apr 17 Javascript
angularjs $http调用接口的方式详解
Aug 13 Javascript
create-react-app中添加less支持的实现
Nov 15 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
You might like
php生成缩略图的类代码
2008/10/02 PHP
php生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
兼容性比较好的PHP生成缩略图的代码
2011/01/12 PHP
PHP定时任务延缓执行的实现
2014/10/08 PHP
PHP获取文件扩展名的4种方法
2015/11/24 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
javascript demo 基本技巧
2009/12/18 Javascript
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
javascript克隆对象深度介绍
2012/11/20 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
2013/05/15 Javascript
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
JavaScript中split() 使用方法汇总
2015/04/17 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
2015/04/27 Javascript
javascript中tostring()和valueof()的用法及两者的区别
2015/11/16 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
vue-router路由懒加载和权限控制详解
2017/12/13 Javascript
微信小程序新闻网站详情页实例代码
2020/01/10 Javascript
python中MethodType方法介绍与使用示例
2017/08/03 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
python3实现域名查询和whois查询功能
2018/06/21 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
详解如何减少python内存的消耗
2019/08/09 Python
TensorFlow——Checkpoint为模型添加检查点的实例
2020/01/21 Python
PyCharm Anaconda配置PyQt5开发环境及创建项目的教程详解
2020/03/24 Python
Pytorch转keras的有效方法,以FlowNet为例讲解
2020/05/26 Python
秋季运动会加油稿200字
2014/01/11 职场文书
初中音乐教学反思
2014/01/12 职场文书
如何撰写岗位职责
2014/02/01 职场文书
大二学习计划书范文
2014/04/27 职场文书
党委班子对照检查材料
2014/08/19 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
如何撰写出一份完美的商业计划书?
2019/07/12 职场文书
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python
Nginx速查手册及常见问题
2022/04/07 Servers