效果:

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

思路:

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. 直播未来属于RTMP还是HTTP?

    直播未来属于RTMP还是HTTP? HTTP 传视频比 RTMP 实现起来简单?HTTP 延迟太高? 答:直播通讯未来是属于html5的. 1,协议使用份额 如今国内90%的面向大众的直播平台都是采用 ...

  2. aop前传之代理

    一.jdk提供proxy类对目标对象实现代理,简单的说对方法的调用交给代理对象来操作. 代理目标 代理的具体实现: 代理测试; 简单说:利用proxy生成一个委托类实现代理.这个委托类是目标类的接口的 ...

  3. 关于Spring定时任务(定时器)用法

    Spring定时任务的几种实现 Spring定时任务的几种实现 一.分类 从实现的技术上来分类,目前主要有三种技术(或者说有三种产品): 从作业类的继承方式来讲,可以分为两类: 从任务调度的触发时机来 ...

  4. poj3608Bridge Across Islands(凸包间最小距离)

    链接 以下所有文章均转载( http://blog.csdn.net/acmaker/article/details/3176910) 转载请注明出处! 考虑如下的算法, 算法的输入是两个分别有 m ...

  5. Spring对Hibernate事务管理

    谈Spring事务管理之前我们想一下在我们不用Spring的时候,在Hibernate中我们是怎么进行数据操作的.在Hibernate中 我们每次进行一个操作的的时候我们都是要先开启事务,然后进行数据 ...

  6. Pexpect模块的安装

    Pexpect模块的安装 下载地址:https://pypi.python.org/pypi/pexpect/ 解压后在目录下运行:python ./setup.py install (必须是root ...

  7. 检测到在集成的托管管道模式下不适用的 ASP.NET 设置。

    <!--解决让程序在集成模块通道下运行--> <system.webServer> <validation validateIntegratedModeConfigura ...

  8. dedecms 模板文件不存在,无法解析文档"的终极各种解决办法

    方法一:[此对应喜欢把模板文件使用".html"的格式,]  /include/arc.archives.class.php 556行    if (!preg_match(&qu ...

  9. 猫都能学会的Unity3D Shader入门指南

    https://onevcat.com/2013/07/shader-tutorial-1/ https://onevcat.com/2013/08/shader-tutorial-2/

  10. program testy data

    做项目得用数据吧,拿去.... 1.Data.gov搜索   美国政府去年承诺使所有政府数据都能在网上免费获得.这个网站是第一阶段,作为一个门户网站,囊括了从气候到犯罪的一切惊人的信息.   2. 美 ...