1.  <!DOCTYPE html>
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.      <title></title>
  6.      <script>
  7.          //存储被点击的图片的index.
  8.          var imgIndexClicked;
  9.          var imgs;
  10.          //设置图片的方法.参数i:从0到i为黄色,之后为空.
  11.          function setImgByIndex(i) {
  12.              for (var emp = 0; emp <= i; emp++) {
  13.                  imgs[emp].src = "img/starYellow.png";
  14.              }
  15.              for (var emp = Number(i) + 1; emp < imgs.length; emp++) {
  16.                  imgs[emp].src = "img/starEmpty.png";
  17.              }
  18.          }
  19.  
  20.          //鼠标移动上去,根据此图片的Index,设置5个图片的src.
  21.          function setMouseover(i) {
  22.              return function () {
  23.                  setImgByIndex(i);
  24.              };
  25.          }
  26.  
  27.          //点击某张图片时存储该图片的index.
  28.          function setClick(i) {
  29.              return function () {
  30.                  imgIndexClicked = i;
  31.                  //alert("从0开始计数...第 "+i+" 个被点了.");
  32.              };
  33.          }
  34.  
  35.          //鼠标离开这个图片,根据保存的被点击的图片号imgIndexClicked,设置5个图片的src.
  36.          function setMouseleave() {
  37.              setImgByIndex(imgIndexClicked);
  38.          }
  39.  
  40.          onload = function () {
  41.              imgs = document.getElementsByTagName("img");
  42.              for (var i in imgs) {
  43.                  imgs[i].onmouseover = setMouseover(i);
  44.                  imgs[i].onclick = setClick(i);
  45.                  imgs[i].onmouseleave = setMouseleave;//给的是方法,不是方法的调用.故setMouseleave();是错误的.
  46.              }
  47.          };
  48.      </script>
  49.  </head>
  50.  <body>
  51.      <img src="img/starYellow.png" />
  52.      <img src="img/starYellow.png" />
  53.      <img src="img/starYellow.png" />
  54.      <img src="img/starYellow.png" />
  55.      <img src="img/starYellow.png" />
  56.  </body>
  57.  </html>

JavaScript星形评分的更多相关文章

  1. javascript星级评分（多个）

    JS打多个类型星级评分: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

  2. JavaScript星级评分

    事件onmouseover <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  3. JavaScript星级评分，仿百度，增强版

    JavaScript星级评分,仿百度,增强版 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  4. 原生javascript星级评分

    写个最简单的原生js的星级评分: <div id="rank" class="pingfen"> <ul> <li>< ...

  5. 原生JavaScript实现评分效果

    一.实现原理: 1.要设置一个“大总管变量”,用于记录点击时的星星下标,只声明不赋值. 2.移入每个星星时,先把所有的星星恢复到默认状态:再把当前星星及在它之前的星星设为选中状态. 3.移出每个星星时 ...

  6. ExtJS 4.2 评分组件

    上一文章是扩展ExtJS自带的Date组件.在这里将创建一个评分组件. 目录 1. 介绍 2. 示例 3. 资源下载 1. 介绍 代码参考的是 Sencha Touch 2上的一个RatingStar ...

  7. [JavaScript] js 迅雷评分效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"         "http://www ...

  8. javascript实现模仿迅雷电影评分

    效果图: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  9. 基于规则评分的密码强度检测算法分析及实现(JavaScript)

    简言 用正则表达式做用户密码强度的通过性判定,过于简单粗暴,不但用户体验差,而且用户帐号安全性也差.那么如何准确评价用户密码的强度,保护用户帐号安全呢?本文分析介绍了几种基于规则评分的密码强度检测算法 ...

随机推荐

  1. [.net 面向对象编程基础] (21) 委托

    [.net 面向对象编程基础] (20)  委托 上节在讲到LINQ的匿名方法中说到了委托,不过比较简单,没了解清楚没关系,这节中会详细说明委托. 1. 什么是委托? 学习委托,我想说,学会了就感觉简 ...

  2. jquery插件：仿百度首页可展开收起的消息提示控件

    消息提示插件大伙并不陌生了,无论是个系统还是网站,基本都要有消息系统.但我认为,一个好的提示插件应当具备很好的独立性,不与页面其他元素发生任何关系,其次是能对外提供丰富的接口,因为你生来就是被别人来调 ...

  3. AlwaysON 故障处理之辅助副本磁盘空间不足

    用户反馈AlwaysON辅助副本数据库查询的结果与主库不一致, 远程到服务器后发现数据库的状态显示为“未同步/可疑”, 查看数据库的日志,定位到出现错误的时间点,可以看到提示日志文件所在磁盘的“磁盘空 ...

  4. C#实现的等额本息法、按月付息到期还本法、一次性还本付息法

    你若懂行,那便有用,如下: void Main(){    var x = DengEBenXi.Compute(11111, 12, 3);    x.Dump();    var y = AnYu ...

  5. Git学习笔记（7）——多人协作

    本文主要记录了,多人协作时,产生冲突时的解决情况. 多人环境创建 首先我们需要模拟一个多人环境.前面的Git的学习都是在Ubuntu上面,现在我们也搭建一个win环境吧.安装win环境下的Git,很简 ...

  6. ios 常用数学函数

    需要 引入头文件 #import <math.h> 1. 三角函数  double sin (double);正弦  double cos (double);余弦  double tan ...

  7. 爱上MVC系列~带扩展名的路由失效问题

    回到目录 对MVC中,对URL进行重写变得非常方便,你只要设置相应的路由规则即可完成,但进行MVC3后,发现设置了以下路由,系统具体不认 routes.MapRoute( name: "De ...

  8. MySQL账户安全设置

    一般来说,安装完MySQL后,默认的用户是root,密码123456,外网不能访问. 有时候也希望在外网访问,则可以添加一个账户.建议不要用root. 如下表,存在安全问题: mysql> se ...

  9. js里cookie操作

    原生js操作cookie 创建和存储 cookie 在这个例子中我们要创建一个存储访问者名字的 cookie.当访问者首次访问网站时,他们会被要求填写姓名.名字会存储于 cookie 中.当访问者再次 ...

  10. js的基本语句和语法

    字符串赋值:把字符串用双引号或单引号引起来,在(js.php)中:二.类型转换;parseint():转整数.parsefloat转小数:强制转换三.运算符表达式1数序运算:加减乘除   %取余:2逻 ...