效果:

鼠标移到星星上,这颗星星及之前的全亮,提示文字出现,根绝星星数量显示不同文字,移出灭掉,文字消失

思路:

1.定义一个数组,来存放不同的文字

2.存放星星的索引值(要在i定义赋值后,即在for循环里面)

window.onload=function(){

var box=document.getElementById('box');

var star=document.getElementsByTagName('div');

var tip=document.getElementById('tip');

var da=['很差','较差','一般','较好','很好'];

var i;

for(i=0;i<star.length;i++){

star[i].index=i;

da[i].index=i;

star[i].onmouseover=function(){

tip.style.display='block';

for(i=0;i<=this.index;i++){

star[i].className='active';

tip.innerHTML=da[i];

}

};

star[i].onmouseout=function(){

tip.style.display='none';

for(i=0;i<star.length;i++){

star[i].className='';

}

};

}

};

[Js]评分星星的更多相关文章

  1. 微信小程序滚动动画,点击事件及评分星星制作!

    前言 小程序上线刷爆了朋友圈,但是最近渐渐消沉了,很少有动静!最近公司项目需要,体验了一下微信小程序,制作了几个功能,布局感觉很简单,但是交互和动画等写起来确实很费劲,主要是因为他不能操作DOM,只能 ...

  2. js评分

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

  3. js 随机星星 document.createElement(); setAttribute()

    js 随机星星 document.createElement(); setAttribute() <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...

  4. 用这个插件jquery.raty.js————用于星星评价(这个案例用于后台传数据给我,前台显示星星个数)

    1.引入jquery.js文件 2.引入jquery.raty.js 3.页面中放在这个:<span class="readOnly" data-path="ima ...

  5. 原生js实现星星闪烁的效果

    星星闪烁的原理其实很简单: html代码: <body style="background:#000"> <div id="stars_box" ...

  6. jquery评分星星

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  7. js 打印星星金字塔

    /** * * 第一行: * * 第二行: *** * 第三行: ***** * 第四行: ******* * 第五行: ********* * */ document.write('<p al ...

  8. js 评分

    <!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

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

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

随机推荐

  1. Redis学习记录之————微博项目

    Key设计 全局相关的key: 表名 global 列名 操作 备注 Global:userid incr 产生全局的userid Global:postid Incr 产生全局的postid 用户相 ...

  2. error C2783: 无法为“T”推导 模板 参数

    原则:“模板参数推导机制无法推导函数的返回值类型” 版本一: // 缺少<T> 参数 int n 对比第三个版本( 缺少<T> 参数 T n) ! 编译错误提示: 错误 1 e ...

  3. request is not finfished yet!

    在项目测试的时候发现一个问题.当数据量特别多的时候,我一次性查询几万条数据的时候,就会出现很卡很慢的状态. 我把sql优化了,但是出现同样的问题.我要从后台得到数据显示在页面上来.就需要知道是查询慢, ...

  4. ubuntu sudo apt-get update 失败 解决方法

    sudo apt-get update 报了一堆错误: Err http://cn.archive.ubuntu.com trusty InRelease Err http://cn.archive. ...

  5. [转载]最牛B的编码套路

    原文地址:http://www.codeceo.com/article/nb-coding-style.html 这篇文章很不错,推荐给大家看. 最近,我大量阅读了Steve Yegge的文章.其中有 ...

  6. Selenium解决页面元素不在视野范围内的问题

    当需要使用滚动条才能使页面元素显示在视野范围内时,必须用代码处理下,才能对其进行操作. 处理其实也很简单,就是调用JS函数. driver.executeScript("arguments[ ...

  7. controller 监控Unix性能信息

    linux系统需要有RPC(Remote Procedure Call Protocol),远程过程调用协议,通过安装rpc.rstatd程序,启动其服务,就可以给远程机器提供信息,即Lr可以获取到该 ...

  8. Java集合框架:HashMap

    转载: Java集合框架:HashMap Java集合框架概述   Java集合框架无论是在工作.学习.面试中都会经常涉及到,相信各位也并不陌生,其强大也不用多说,博主最近翻阅java集合框架的源码以 ...

  9. jQuery与DOM相互转换

    先执行一下代码 $(function () { var div=$("<div></div>"); console.log(div); }); (注意,di ...

  10. Win7下Maven的安装与配置

    简介  官网:https://maven.apache.org/ Apache Maven,是一个(特别是Java软件)项目管理及自动构建工具,由Apache软件基金会所提供.基于项目对象模型(Pro ...