[Js]评分星星

效果:
鼠标移到星星上,这颗星星及之前的全亮,提示文字出现,根绝星星数量显示不同文字,移出灭掉,文字消失
思路:
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]评分星星的更多相关文章
- 微信小程序滚动动画,点击事件及评分星星制作!
前言 小程序上线刷爆了朋友圈,但是最近渐渐消沉了,很少有动静!最近公司项目需要,体验了一下微信小程序,制作了几个功能,布局感觉很简单,但是交互和动画等写起来确实很费劲,主要是因为他不能操作DOM,只能 ...
- js评分
js评分 原理:给ele挂载一个自定义属性保存选中的星星数,鼠标经过时,显示所在星数的评价内容,以及给他星星亮起来,鼠标移开时显示的星星数时选择的星星数,没选的话是默认星星数,点击时,将选中的星 ...
- js 随机星星 document.createElement(); setAttribute()
js 随机星星 document.createElement(); setAttribute() <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
- 用这个插件jquery.raty.js————用于星星评价(这个案例用于后台传数据给我,前台显示星星个数)
1.引入jquery.js文件 2.引入jquery.raty.js 3.页面中放在这个:<span class="readOnly" data-path="ima ...
- 原生js实现星星闪烁的效果
星星闪烁的原理其实很简单: html代码: <body style="background:#000"> <div id="stars_box" ...
- jquery评分星星
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- js 打印星星金字塔
/** * * 第一行: * * 第二行: *** * 第三行: ***** * 第四行: ******* * 第五行: ********* * */ document.write('<p al ...
- js 评分
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- JS五星级评分效果(类似与淘宝打分效果)
今天晚上研究下 五星级评分效果,类似于淘宝后台评分效果,如下图所示: 思路: 当鼠标移到一颗星的时候 判断当前的索引 当前及当前的索引前面的星星亮起来 每当移到任何一颗星星时候 下面跟随提示 mous ...
随机推荐
- javaMail编写案列
package common.impl; import java.util.Properties; import javax.mail.BodyPart; import javax.mail.Mess ...
- Python学习笔记15—mysql的操作
安装 Python-MySQLdb pip install mysql-Python Python对mysql的操作 建立一个实验数据库demo mysql> create database d ...
- android模拟器中文乱码
问题:在xml文件中设置的中文能正确输出,但是在java文件中设置的中文会在模拟器上呈现乱码 解决方案:在build.gradle文件中添加一行代码 android {compileOptions.e ...
- word双栏排版,最后一页由于分节符造成最后一页是空白页,删除分节符双栏就变成了单栏
遇到这个问题时,我们把心思都花在了如何“删除”这个空白页. 但是最有效的办法不是“删除”,而是(以word2007为例): Word 2007中文版: 鼠标放在最后一页,点击页面布局①,选择页面布局右 ...
- Nodejs环境变量
PATH,就是那个意思,没有特殊含义. NODE_PATH,将node_modules作为全局模块,多个安装目录用;分开.这样node在加载模块时首先会到项目目录下的node_modules目录加载相 ...
- maven 添加支持编译jdk1.7
1.在<profiles>元素内增加如下内容 <profile> <id>jdk17</id> <activation> ...
- 在Windows Azure上搭建SSTP VPN
在国内,VPN是用来干嘛的大家都懂的.很久之前我尝试用Azure的Virtual Network搞VPN结果惨败了.最近微博上有基友写了篇文章亲测可行,原文在这里.可惜是英文的.所以我的这篇文章仅仅是 ...
- Android 反编译apk 详解
测试环境: win 7 使用工具: CSDN上下载地址: apktool (资源文件获取) 下载 dex2jar(源码文件获取) 下载 jd-gui (源码查看) ...
- Qt之资源系统
简述 Qt 的资源系统用于存储应用程序的可执行二进制文件,它采用平台无关的机制.当你的程序总需要这样的一系列文件(图标.翻译文件等)并且不想冒丢失某些文件的风险时,这就显得十分有用. 资源系统基于 q ...
- java SE学习之线程同步(详细介绍)
java程序中可以允许存在多个线程,但在处理多线程问题时,必须注意这样一个问题: 当两个或多个线程同时访问同一个变量,并且一些线程需要修改这个变量时,那么这个 ...