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打印输出json实例
Nov 11 Javascript
Js冒泡事件详解及阻止示例
Mar 21 Javascript
jquery插件unobtrusive实现片段式加载
Jun 15 Javascript
AngularJs实现ng1.3+表单验证
Dec 10 Javascript
最简单的JavaScript图片轮播代码(两种方法)
Dec 18 Javascript
全面解析bootstrap格子布局
May 22 Javascript
JS 实现Base64编码与解码实例详解
Nov 07 Javascript
微信小程序 页面传参实例详解
Nov 16 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 Javascript
javascript实现动态显示颜色块的报表效果
Apr 10 Javascript
Vue仿今日头条实例详解
Feb 06 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
Mar 17 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的header和asp中的redirect比较
2006/10/09 PHP
PHP 文件扩展名 获取函数
2009/06/03 PHP
黑夜路人出的几道php笔试题
2009/08/04 PHP
PHP获取搜索引擎关键字来源的函数(支持百度和谷歌等搜索引擎)
2012/10/03 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
JavaScript 弹出窗体点击按钮返回选择数据的实现
2010/04/01 Javascript
jquery怎样实现ajax联动框(一)
2013/03/08 Javascript
JavaScript中的Math 使用介绍
2014/04/21 Javascript
js判断当前浏览器类型,判断IE浏览器方法
2014/06/02 Javascript
7个有用的jQuery代码片段分享
2015/05/19 Javascript
使用Promise解决多层异步调用的简单学习心得
2016/05/17 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
2017/01/06 Javascript
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
微信小程序自定义弹窗wcPop插件
2018/11/19 Javascript
浅谈JavaScript中的“!!”作用
2020/08/03 Javascript
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
[02:03]DOTA2亚洲邀请赛 HGT战队出场宣传片
2015/02/07 DOTA
python获取图片颜色信息的方法
2015/03/18 Python
python创建列表并给列表赋初始值的方法
2015/07/28 Python
详解Python爬虫的基本写法
2016/01/08 Python
PyTorch 1.0 正式版已经发布了
2018/12/13 Python
10 分钟快速入门 Python3的教程
2019/01/29 Python
python识别图像并提取文字的实现方法
2019/06/28 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
PyInstaller运行原理及常用操作详解
2020/06/13 Python
Kenneth Cole官网:纽约时尚优雅品牌
2016/11/14 全球购物
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
汉语专业应届生求职信
2013/10/01 职场文书
2014年五一促销活动方案
2014/03/09 职场文书
积极贯彻学习两会精神总结
2014/03/17 职场文书
应届大专生求职信
2014/06/26 职场文书
党员四风问题对照检查材料
2014/09/27 职场文书
亲属关系公证书样本
2015/01/23 职场文书
教育读书笔记
2015/07/02 职场文书
vue自定义右键菜单之全局实现
2022/04/09 Vue.js
国际最新研究在陨石中发现DNA主要成分 或由陨石带来地球
2022/04/29 数码科技