<!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

     <script>

         //存储被点击的图片的index.

         var imgIndexClicked;

         var imgs;

         //设置图片的方法.参数i:从0到i为黄色,之后为空.

         function setImgByIndex(i) {

             for (var emp = 0; emp <= i; emp++) {

                 imgs[emp].src = "img/starYellow.png";

             }

             for (var emp = Number(i) + 1; emp < imgs.length; emp++) {

                 imgs[emp].src = "img/starEmpty.png";

             }

         }

         //鼠标移动上去,根据此图片的Index,设置5个图片的src.

         function setMouseover(i) {

             return function () {

                 setImgByIndex(i);

             };

         }

         //点击某张图片时存储该图片的index.

         function setClick(i) {

             return function () {

                 imgIndexClicked = i;

                 //alert("从0开始计数...第 "+i+" 个被点了.");

             };

         }

         //鼠标离开这个图片,根据保存的被点击的图片号imgIndexClicked,设置5个图片的src.

         function setMouseleave() {

             setImgByIndex(imgIndexClicked);

         }

         onload = function () {

             imgs = document.getElementsByTagName("img");

             for (var i in imgs) {

                 imgs[i].onmouseover = setMouseover(i);

                 imgs[i].onclick = setClick(i);

                 imgs[i].onmouseleave = setMouseleave;//给的是方法,不是方法的调用.故setMouseleave();是错误的.

             }

         };

     </script>

 </head>

 <body>

     <img src="img/starYellow.png" />

     <img src="img/starYellow.png" />

     <img src="img/starYellow.png" />

     <img src="img/starYellow.png" />

     <img src="img/starYellow.png" />

 </body>

 </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. winform 通过webservice向服务器提交图片需要注意的地方

    最近一个winform项目中需要通过拍照或者上传本地文件或者截图的方式把产品图片上传到服务器,最后选择了服务器部署webservice的方式来进行.其中遇到了一些问题记录下来. 不多说,直接上服务端代 ...

  2. CSS控制样式的三种方式优先级对比验证

    入职已经一个月了,自此后,就好久没有写过博客了,在此先跟关注我的博友们说声抱歉.今天,在公司的一个培训作业的驱动以及伟哥那句“再不写博客就开除你”的监督下,我终于重拾旧爱,再次登录博客园,继续与大家分 ...

  3. js限制input标签中只能输入中文

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  4. 一则JVM memory leak解决的过程

    起因是我们的集群应用(3台机器)新版本测试过程中,一般的JVM内存占用 都在1G左右, 但在运行了一段时间后,慢慢升到了4G, 这是一个明显不正常的现象. 定位 过程: 1.先在该机器上按照步骤尝试重 ...

  5. sigar

    从http://sourceforge.net/projects/sigar/files/sigar/1.6/hyperic-sigar-1.6.4.zip/download下载sigar, 参照了h ...

  6. WebViewJavascriptBridge的暂时理解

    直接从项目里复制了一份关于WebViewJavascriptBridge使用的代码,注释部分是自己暂时的理解.孟哥说,callHandler类似于jq里的trigger, registerHandle ...

  7. 我心中的核心组件~HttpHandler和HttpModule实现图像的缩放与Url的重写

    回到目录 说在前 对于资源列表页来说,我们经常会把图像做成N多种,大图,小图,中图等等,很是麻烦,在数据迁移时,更是一种痛快,而如果你把图像资源部署到nginx上,那么这种图像缩放就变得很容易了,因为 ...

  8. 爱上MVC~为Html.EditorForModel自定义模版

    回到目录 挺有意思的一件事 对于MVC视图渲染来说,大家应该不会陌生,但对于模型的渲染,不知道是否听说过,主要是说Model通过它属性的相关特性(DataType,UIHint)来将它们自动渲染到Vi ...

  9. EF架构~Cannot attach the file as database

    回到目录 Cannot attach the file as database这个异常是在EF的code frist里经常出现的,解决方法很简单,只要重新启动一下V11实例即可. CMD> sq ...

  10. Ajax技术

    1.ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax ...