效果:

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

思路:

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. oracle 查看锁表情况并处理锁表

    /* *locked *query locked object and analyse reason,kill it * */ select 'alter system kill session '' ...

  2. OC面向对象及继承

    1. 面向对象它通过给程序中加入扩展语句,把函数“封装”进编程所必需的“对象”中.面向对象的编程语言使得复杂的工作条理清晰.编写容易.说它是一场革命,不是对对象本身而言,而是对它们处理工作的能力而言. ...

  3. CSU 1802 小X的战斗力【拓扑dp】

    题目链接 题意:n个人,每个人有一个能力值.给出m组关系A, B, 表示A的能力值大于B的能力值. 问:m组关系中是否有自相矛盾的?若不矛盾,问:第1个人在所有人的能力值中排名第几?有多少人的能力值的 ...

  4. python接口的调用方法

    第一个图灵机器人接口实例: #!/usr/bin/env python # -*- coding: utf_8 -*- import urllib2,urllib import json import ...

  5. maven常见问题问答

    1.前言 Maven,发音是[`meivin],"专家"的意思.它是一个很好的项目管理工具,很早就进入了我的必备工具行列,但是这次为了把project1项目完全迁移并应用maven ...

  6. 关于我们DOM的知识点

    DOM的概念及子节点类型   前言 DOM的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析 ...

  7. 【Todo】pthread_key_t 和 pthread_once_t学习

    这两个函数应该都是和线程局部变量有关的.有时间学习一下. 可以参考如下文章: <Linux线程私有数据pthread_key_t> <posix多线程有感--线程高级编程(pthre ...

  8. 选择排序算法Java与Python实现

    Java 实现 package common; public class SimpleArithmetic { /** * 选择排序 * 输入整形数组:a[n] [4.5.3.7] * 1. 取数组编 ...

  9. An unknown server-side error occurred while processing the command.处理

    在调用resetAPP()时,报错:An unknown server-side error occurred while processing the command. 怎么解决呢?请看: 额,Ap ...

  10. libCEF总结02字符串

    libCEF 的 CefString.cef_string_t 在 Windows 下均表示一个 16 位的 Unicode 字符串,它们的使用请参考下面的代码 {//wchar_t* ==> ...