效果:

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

思路:

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. 一切都是对象 Thinking in Java 第二章

    2.1 用引用操作对象 1.对象和引用联系起来,就可以通过引用来操作对象: 2.引用亦可单独存在,即没有和任何对象联系起来:对没有和对象联系起来的引用操作,会报错: 2.2 必须由你创建所有对象 1. ...

  2. 理解odbc

    1.解决什么样的问题?不同的数据库产品,具有不同的特性,也就是方言.因此应用程序针对不同的数据库产品,编写不同的代码.如果换了一个数据库产品,还需要重新编写数据库交互部分,不具备扩展和移植.odbc对 ...

  3. android 回调函数的使用

    // activity 之间方法调用的桥梁 public class ActivityCallBridge { static ActivityCallBridge mBridge; private O ...

  4. 【linux命令】:查看系统运行状态,命令top 【转载】

    原文:http://www.cnblogs.com/ggjucheng/archive/2012/01/08/2316399.html 简介 top命令是Linux下常用的性能分析工具,能够实时显示系 ...

  5. Microsoft SQL Server

    instance / database / schema / object login / user / schema (dbo) sequence Collation PSM: Both Insta ...

  6. karma+angular

    下面的介绍以karma能正常运行为前提,看karma系列文章:http://www.cnblogs.com/laixiangran/tag/Karma/ 目录结构 步骤 安装 npm install ...

  7. vs2010配置OpenCV2.4.7详细步骤

    vs2010配置opencv2.4.7 需要注意:opencv里x86的vc10对应vs2010版本,vc11对应vs2012版本,vc12对应vs2013及以上版本,若vs2013版本的软件配置时选 ...

  8. HTTP请求415错误 – 不支持的媒体类型(Unsupported media type)

    HTTP请求415错误 – 不支持的媒体类型(Unsupported media type) 通常有以下情况: 1:检查你的 http 请求头信息,比如 因为 User-Agent 被服务器设置 拒绝 ...

  9. eclipse 删除 tomcat8 重新添加的问题

    今天手贱,把Eclipse里的tomcat删掉了,然后发现后面就不能重建了,很蛋疼啊...而且今天也发现eclipse里的tomcat启动时会把本地原来conf目录下的配置比如:tomcat-user ...

  10. js到处excel

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