<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        onload = function () {
            var clickIndex = -1;
            var imgs = document.getElementsByTagName('img');
            for (var i = 0; i < imgs.length; i++) {
                imgs[i].id = i;
            }
            for (var i = 0; i < imgs.length; i++) {
                imgs[i].onmouseover = function () {
                    for (var i = 0; i < imgs.length; i++) {                        
                        if (imgs[i].id<=this.id) {
                            imgs[i].src = 'star2.png';
                        }
                        else{
                            imgs[i].src = 'star1.png';
                        }
                    }
                   
                };

                imgs[i].onmouseleave = function () {
                    for (var i = 0; i < imgs.length; i++) {
                        if (i<=clickIndex) {
                            imgs[i].src = 'star2.png';
                        } else {
                            imgs[i].src = 'star1.png';
                        }                                                 
                    }
                };

                imgs[i].onclick = function () {
                    for (var i = 0; i < imgs.length; i++) {
                        clickIndex = this.id;
                    }
                };
            }
        }
    </script>
</head>
<body>
    <img src="star1.png" />
    <img src="star1.png" />
    <img src="star1.png" />
    <img src="star1.png" />
    <img src="star1.png" />
</body>
</html>

js 评分的更多相关文章

  1. js评分

    js评分    原理:给ele挂载一个自定义属性保存选中的星星数,鼠标经过时,显示所在星数的评价内容,以及给他星星亮起来,鼠标移开时显示的星星数时选择的星星数,没选的话是默认星星数,点击时,将选中的星 ...

  2. [Js]评分星星

    效果: 鼠标移到星星上,这颗星星及之前的全亮,提示文字出现,根绝星星数量显示不同文字,移出灭掉,文字消失 思路: 1.定义一个数组,来存放不同的文字 2.存放星星的索引值(要在i定义赋值后,即在for ...

  3. JS五星级评分效果(类似与淘宝打分效果)

    今天晚上研究下 五星级评分效果,类似于淘宝后台评分效果,如下图所示: 思路: 当鼠标移到一颗星的时候 判断当前的索引 当前及当前的索引前面的星星亮起来 每当移到任何一颗星星时候 下面跟随提示 mous ...

  4. jquery select选中表单特效三级联动

    好久没发帖了,今天发一个jquery select的表单三级联动,希望能对有需要的朋友有点帮助. js代码,当然还要加上jquery的包,应该都有的,这里就不发了. <script type=& ...

  5. 简单粗暴的JavaScript笔记-1

    欢迎到我的简书查看我的文集 前言: 提示密码提示框 <head> <style> #div1 {width: 100px;height:50px;background:#FFC ...

  6. 五星评分效果 原生js

    五星评分在很多地方都可以用到,网上也有插件或者相应的代码,在这里我给大家提供一款我自己写的超级简单实用的五星评分代码,连图片都不需要 <!-- 评分start --> <ul> ...

  7. js星级评分点击星级评论打分效果

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

  8. js的选择星级评分插件

    需要引入jquery和raty的js,并且低版本的jquery可能会出现样式问题,或者点击没反应,可换高版本试试 raty文档及下载: http://www.wbotelhos.com/raty/ 把 ...

  9. js快速打印一个五分制（五颗星）的评分情况

    1.函数 下面这个函数实现了在html页面中快速打印一个五分制(五颗星)的评分情况: function getRating(rating) { if(rating > 5 || rating & ...

随机推荐

  1. 为什么说 C/C++ 不适合做 Web 开发？（成本高，容易出错，apache等工具分担了大部分工作）

    因为大家在讨论用C#.Java,做出来的项目的时候,用C++的人们还在讨论语言特性 每种语言都有特定适用范围,对应着某类问题.web开发的重头戏不是计算,而是与用户交互和发送sql语句,当然以脚本语言 ...

  2. php面试题12（多态web服务器共享session的方法：将session存到数据库）（$val=&$data[$key];）

    php面试题12(多态web服务器共享session的方法:将session存到数据库)($val=&$data[$key];) 一.总结 1.多态web服务器共享session的方法: ...

  3. 给自己加油，一定要学会MFC！（刚刚发现一篇文章，兼听则明： MFC，一开始就错了）

    我自己对于没有学会MFC始终耿耿于怀,都什么时代了啊,但是我仍然坚持会去学MFC,因为MFC虽然落后与复杂,但是在Windows平台上仍然是无所不能的(其实Windows平台仍然是唯一可以赚钱的平台, ...

  4. NET中的System.Transactions(分布式事务)

    NET中的System.Transactions(分布式事务),当项目开发完成以后,调用的时候遇到了MSDTC的问题,在查阅了相关资料后将这个问题解决了,大致的问题主要是使用了分布式事务,而无法访问到 ...

  5. sklearn 特征降维利器 —— PCA & TSNE

    同为降维工具,二者的主要区别在于, 所在的包不同(也即机制和原理不同) from sklearn.decomposition import PCA from sklearn.manifold impo ...

  6. struts2_11_实现自己的拦截器的定义

    1)登录界面代码: <% //设置session的值keyword为user request.getSession().setAttribute("user", " ...

  7. 【32.89%】【codeforces 574D】Bear and Blocks

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  8. Arcgis api for javascript学习笔记(4.5版本)-三维地图实现弹窗功能

    1. 对于Graphic对象,在初始化Graphic对象时设置popupTemplate属性,即可实现点击Graphic时显示弹窗. <!DOCTYPE html> <html> ...

  9. ASP.Net请求小周期

    另一篇另篇2 ASP.NET请求处理全过程 一个ASP.NET请求过程中,从浏览器中发出一个Web请求 到 这个请求被响应并显示在浏览器中的过程中究竟会发生哪些不同的事件,当我们进入这个事件之旅时,我 ...

  10. wpf绑定全局静态变量（mvvm）

    原文 wpf绑定全局静态变量(mvvm) 在实际的开发中,有一些集合或者属性可能是全局的,比如当你做一个oa的时候,可能需要展示所有的人员,这时这个所有的人员列表显然可以作为全局参数,比如这里有一个全 ...