<!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. SpringCloud微服务框架搭建

    一.微服务架构 1.1什么是分布式 不同模块部署在不同服务器上 作用:分布式解决网站高并发带来问题 1.2什么是集群 多台服务器部署相同应用构成一个集群 作用:通过负载均衡设备共同对外提供服务 1.3 ...

  2. 第二篇：_UICascadingTextStorage attributesAtIndex:effectiveRange:]: Range or index out of bounds

    注意下文标红字段: #pragma mark- 输入改变时 - (void) textFieldDidChanged:(UITextField *) TextField{ //搜索关键字一旦改变,将重 ...

  3. ［.NET Core 24］把project.json迁移到.csproj

    链接:https://blog.jetbrains.com/dotnet/2017/04/04/rider-eap-update-csproj-based-net-core-support-migra ...

  4. iOS QLPreviewController(Quick Look)快速浏览jpg,PDF,world等

    #import <QuickLook/QuickLook.h> @interface ViewController ()<QLPreviewControllerDataSource, ...

  5. wpf SnapsToDevicePixels

    原文:wpf SnapsToDevicePixels  可以在您的根元素上将此属性设为 true,以在整个 UI 上启用像素对齐呈现. 对于运行在大于 96 每英寸点数 (dpi) 的设备,像素对 ...

  6. 在线算法交互、可视化与演示及应用（caffe 网络配置文件 .prototxt 的可视化）

    0. 全集 Explained Visually 1. 图像与视觉 Image Kernels 2. 数学操作 Convolution arithmetic:卷积: 3. 神经网络与深度学习 A Ne ...

  7. Java Service Wrapper 使用（windows）

    1       简介 最近项目中需要做一个Windows系统服务,记录一下使用过程. Java Service Wrapper 可以将Java程序包装成系统服务,这样就可以随着系统的运行而自动运行.J ...

  8. Eclipse使用技巧总结（五）

    三十五.快速回退到上次编辑处 Ctrl + Q 三十六.查看调用层次 Ctrl + Alt + H 三十七.快速查看某个类 Ctrl + Shift + T 三十八.快速定位 Ctrl + K  :首 ...

  9. C# TimeSpan 时间计算

    原文:C# TimeSpan 时间计算 本文告诉大家简单的方法进行时间计算. 实际上使用 TimeSpan 可以做到让代码比较好懂,而代码很简单. 例如我使用下面的代码表示 5 秒 const int ...

  10. JavaScript window.location物

    演示样例 注意 方法 常常使用window.location.它的结构总是记不住.简单梳理下.方便以后查询. 演示样例 URL:http://b.a.com:88/index.php? name=ka ...