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 相关文章推荐
javascript新手语法小结
Jun 15 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
Jun 19 Javascript
jQuery实现商品活动倒计时
Oct 16 Javascript
原生JavaScript实现瀑布流布局
Jun 28 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
Jan 12 Javascript
JavaScript实现数据类型的相互转换
Mar 06 Javascript
微信小程序实现给循环列表添加点击样式实例
Apr 26 Javascript
深入理解vue.js中的v-if和v-show
Jun 22 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
Apr 18 Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 Javascript
从零开始实现Vue简单的Toast插件
Dec 03 Javascript
简单了解常用的JavaScript 库
Jul 16 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
让你的网站首页自动选择语言转跳
2006/12/06 PHP
php文件上传的简单实例
2013/10/19 PHP
php file_get_contents抓取Gzip网页乱码的三种解决方法
2013/11/12 PHP
将php数组输出html表格的方法
2014/02/24 PHP
PHP中使用file_get_contents抓取网页中文乱码问题解决方法
2014/12/17 PHP
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
php将日期格式转换成xx天前的格式
2015/04/16 PHP
JS执行删除前的判断代码
2014/02/18 Javascript
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
React.js入门学习第一篇
2016/03/30 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
JavaScript如何实现图片处理与合成
2020/05/29 Javascript
微信小程序实现点击生成随机验证码
2020/09/09 Javascript
用python 制作图片转pdf工具
2015/01/30 Python
python中如何使用朴素贝叶斯算法
2017/04/06 Python
python使用socket创建tcp服务器和客户端
2018/04/12 Python
tensorflow 输出权重到csv或txt的实例
2018/06/14 Python
django settings.py 配置文件及介绍
2019/07/15 Python
django 连接数据库 sqlite的例子
2019/08/14 Python
python使用celery实现异步任务执行的例子
2019/08/28 Python
Python能做什么
2020/06/02 Python
opencv 图像滤波(均值,方框,高斯,中值)
2020/07/08 Python
Python识别处理照片中的条形码
2020/11/16 Python
使用Html5中的cavas画一面国旗
2019/09/25 HTML / CSS
自考生毕业自我鉴定
2013/10/10 职场文书
电子商务专业求职信
2014/03/08 职场文书
聘任书模板
2014/03/29 职场文书
公司管理制度范本
2015/08/03 职场文书
Python访问Redis的详细操作
2021/06/26 Python