<!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. IdentityServer4实战 - JWT Token Issuer 详解

    原文:IdentityServer4实战 - JWT Token Issuer 详解 一.前言 本文为系列补坑之作,拖了许久决定先把坑填完. 下文演示所用代码采用的 IdentityServer4 版 ...

  2. RocketMQ 安装详细说明

    原文:RocketMQ 安装详细说明 目录 本文导读 环境说明 RocketMQ 下载 从 Apache 下载 从 GitHub 下载 RocketMQ 安装 文件上传 项目解压 编译部署 Rocke ...

  3. 设计模式-适配器模式(Go语言描写叙述)

    在上一篇博客设计模式-策略模式(Go语言描写叙述)中我们用最简单的代码用go语言描写叙述了设计模式中的策略模式,用最简单的实例来描写叙述相信能够让刚開始学习的人能够非常轻松的掌握各种设计模式.继上篇博 ...

  4. jquery-7 jquery中的文档处理方法有哪些（方法的参数表示功能增强）

    jquery-7 jquery中的文档处理方法有哪些(方法的参数表示功能增强) 一.总结 一句话总结:多看参考文档,多看主干目录.一般的功能分两个方法来实现,一个对应标签,一个对应标签和事情,比如克隆 ...

  5. 海思hi3716c机顶盒接usb摄像头和usb无线耳机时，无线耳机有时没有声音

    两个USB设备各自是: A:USB摄像头带录音功能,但不带放音功能. B:USB无线耳机是使用USB转2.4G的无线耳机. 详细现象: 1, A,B两者同一时候插上机顶盒,并开机进入android,此 ...

  6. wait()、notify()、notifyAll()与线程通信方式总结

    1.通过wait().notify().notifyAll()进行线程通信 线程通信的目标是使线程间能够互相发送信号.另一方面,线程通信使线程能够等待其他线程的信号.例如,线程B可以等待线程A的一个信 ...

  7. C++网络编程方面的开源项目

    Webbench是一个在linux下使用的非常简单的网站压测工具.它使用fork()模拟多个客户端同时访问我们设定的URL,测试网站在压力下工作的性能,最多可以模拟3万个并发连接去测试网站的负载能力. ...

  8. MUI简介-最接近原生App体验的前端框架

    MUI简介-最接近原生App体验的前端框架 一.总结 一句话总结:最接近原生App体验的前端框架 二.多端发布 – 开发一套代码,发布六个平台 真正彻底的跨平台开发,不是简单的跨iOS和Android ...

  9. 浅谈CAS(Compare and Swap) 原理

    浅谈CAS原理java并发编程也研究了一段时间了,对CAS的原理总是不太理解,今天再研究了一下,记录一些自己的理解.    说到CAS,再java中的某些情况下,甚至jdk1.5以后的大多数情况,并发 ...

  10. python request post

    import requests import json class BaiduTranslateSpider: def __init__(self, kw): self.url = "htt ...