<!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. 补充 作业八：团队项目——Alpha阶段项目总结 补充

    游戏界面: 单一.无背景图片 加入了背景 游戏结束: 无变化 无变化 游戏记录 无 加入数据库:有数据记录! 游戏初始化: 无 加入多种模式 此次任务后的总结: 经过上一次的答辩,以及认真观看了其他组 ...

  2. Java中文编码小结

    Java中文编码小结 1. 只有 字符到字节 或者 字节到字符 的转换才存在编码转码; 2. Java String 采用 UTF-16 编码方式存储所有字符.unicode体系采用唯一的码点表示唯一 ...

  3. 把 Notepad++ 打造成一款易用的C#脚本编辑器

    以前一直用Linqpad在写小程序脚本,但是Linqpad自动完成功能要收费,且不开源,这样的话就不方便扩展了.今天在 http://csscriptnpp.codeplex.com/ 发现了一款C# ...

  4. DDD~基础设施层~续

    回到目录 在之前写的DDD~基础设施层文章中,提到了UnitOfWork,它里面有一些方法,但经过项目证明,不应该有Save和IsExplicitSubmit,而这个工作单元只起到了数据上下文统一的作 ...

  5. 20_学生选课数据库SQL语句练习题1

    25.查询95033班和95031班全体学生的记录. select * from STUDENT t,SCORE s where t.sclass=95033 or t.sclass=95031 26 ...

  6. github无法访问?试试修改hosts

    github国内无法访问时,可以试试如下修改hosts,亲测有效: 204.232.175.78 http://documentcloud.github.com 207.97.227.239 http ...

  7. contentEditable属性设置是否可编辑元素的内容

    在HTML5中在标签新添加了一个属性contentEditable可以设置标签内的内容是否可以编辑: 设置contenteditable="true"标签内的元素(内容)可以编辑 ...

  8. js const

    js const const 声明创建一个只读的常量.这不意味着常量指向的值不可变,而是变量标识符的值只能赋值一次. const state = { notes: [], activeNote: {} ...

  9. heroku部署java web项目

    一.开发 在本地eclipse创建maven web项目(此时可以当成正常的javaweb项目开发即可.注意添加servlet依赖,此时不用添加jetty依赖) 二.部署前准备 1.首先在pom.xm ...

  10. android 键盘遮挡 父布局上滚解决

    private void controlKeyboardLayout(final View root, final View scrollToView) { root.getViewTreeObser ...