效果:

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

思路:

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. spring注入简记

    我们知道对象是交给容器来管理的那么 init() destroy():可以在bean配置中设置对象初识化前执行和销毁后执行 int-delay=""表示是否延迟实例化即容器实例时还 ...

  2. Android 呼吸灯流程分析

    一.Android呼吸灯Driver实现 1.注册驱动 代码位置:mediatek/kernel/drivers/leds/leds_drv.c 602static struct platform_d ...

  3. Python学习笔记10—几个名词概念

    循环(loop),指的是在满足条件的情况下,重复执行同一段代码.比如,while 语句. 迭代(iterate),指的是按照某种顺序逐个访问列表中的每一项.比如,for 语句. 递归(recursio ...

  4. fibonacci 斐波那契数列

    1.小兔子繁殖问题  (有该问题的详细来由介绍) 2.台阶问题 题目:一个人上台阶可以一次上一个或者两个,问这个人上n层的台阶,一共有多少种走法. 递归的思路设计模型: i(台阶阶数)         ...

  5. css3中的过渡(transition)

    css3 transition(过渡)1.语法: transition:[ transition-property ] || [ transition-duration ] || [ transiti ...

  6. Java跟Javac,package与import

    今天讨论一下2个指令与2个关键字. 这次的没有IDE环境,直接在txt文本里编程,在cmd里编译运行,搞清楚java的文件结构,还有怎么设置编译器查找类的路径.首先是javac,有一个可带参数java ...

  7. 【CodeForces 651B】Beautiful Paintings 排序+贪心

    题目大意: 给定集合,对于任意一个的排列,记,求. 很明显每次搞出一个长度为的最长上升序列,然后把元素给删掉,答案增加. 直接暴力需要. 但是可以进行优化. 设有个,将个数从小到大排序,记为长度为的数 ...

  8. javaScript定义对象的方法

    转自souhu新闻http://news.sohu.com/20110215/n279335637.shtml? javascript定义对象的几种简单方法 1.构造函数方式,全部属性及对象的方法都放 ...

  9. 1.3 ASP.NET MVC生命周期

    ASP.NET MVC的执行生命周期主要分为三个阶段,分别是网址路由对比.执行控制器与动作.执行视图并返回结果.从ASP.NET MVC接受HTTP请求到返回HTTP响应的过程如下图所示.

  10. ACM2 递归 n分成k份

    //将n 分成k份的 分法总数 #include "stdafx.h" #include"stdio.h" #include<iostream> u ...