[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 ...
随机推荐
- HttpClient的CircularRedirectException异常原因及解决办法
HttpClient的CircularRedirectException异常原因及解决办法 这两天在使用我自己爬虫抓取网页的时候总是出现 org.apache.http.client.ClientPr ...
- 实现jQuery扩展总结
开发自己需要的jQuery插件,看个示例说明<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"&qu ...
- JAVA使用POI读取EXCEL文件的简单model
一.JAVA使用POI读取EXCEL文件的简单model 1.所需要的jar commons-codec-1.10.jarcommons-logging-1.2.jarjunit-4.12.jarlo ...
- .net ftp上传文件方法
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI ...
- Css_2跟3
#css2中的选择器 1.元素选择器 *通配符选择符.html类型选择符.id选择符.class选择符 2.关系选择器 E F(包含选择器).E>F(子选择器).E+F(E元素后 ...
- Spring的线程池ThreadPoolTaskExecutor使用案例
1.Sping配置文件 <!-- 线程池配置 --> <bean id="threadPool" class="org.springframework. ...
- cpu缓存与多线程
一.cpu缓存结构 CPU速度远高于内存(即如果只考虑CPU和内存因素,程序的性能常常受到内存访问速度的限制,内存访问和运行),为了协调CPU和内存在速度上的差异,在CPU中增加了高速缓存.和计算机存 ...
- STM8s在利用库配置端口的小问题
在应用的时候PA2口需要设置成推挽输出,控制一个外部电源开关,端口初始化程序如下: GPIO_DeInit(GPIOA); GPIO_Init(GPIOA,GPIO_PIN_2,GPIO_MODE_O ...
- j2ee四大作用域pagecontext,request,session,ServletContext(转)
转自:(http://www.5ycode.com/63) 在JSP页面中的对象,包括用户创建的对象(例如,JavaBean对象)和JSP的隐含对象,都有一个范围属性.范围定义了在什么时间内,在哪一个 ...
- 如何设计一个RPC系统
版权声明:本文由韩伟原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/162 来源:腾云阁 https://www.qclou ...