原生javascript星级评分
写个最简单的原生js的星级评分:
- <div id="rank" class="pingfen">
- <ul>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- </ul>
- <p>加载中</p>
- </div>
- <style type="text/css">
- ;}
- .pingfen{ width: 135px; margin:10px auto; height:20px; position: relative;}
- .pingfen ul{height:20px; margin-bottom: 10px;}
- ; list-style: none;}
- -28px;}
- ; display:none;}
- </style>
- <script>
- var aData =["很差","较差","一般","推荐","力推"];
- window.onload=function(){
- var oDiv = document.getElementById("rank");
- var aLi = oDiv.getElementsByTagName("li");
- var oP = oDiv.getElementsByTagName("p")[0];
- var i =0;
- for(i=0;i<aLi.length;i++){
- aLi[i].index = i;
- aLi[i].onmouseover = function(){
- oP.style.display = "block";
- oP.innerHTML=aData[this.index];
- for(i=0; i<=this.index;i++){
- aLi[i].className="active";
- }
- };
- aLi[i].onmouseout = function(){
- oP.style.display = "";
- for(i=0; i<aLi.length; i++){
- aLi[i].className="";
- }
- };
- aLi[i].onclick=function(){
- alert(this.index +1);
- };
- }
- };
- </script>
ok超级简单不信你试试。
原生javascript星级评分的更多相关文章
- javascript星级评分(多个)
JS打多个类型星级评分: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
- JavaScript星级评分
事件onmouseover <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- JavaScript星级评分,仿百度,增强版
JavaScript星级评分,仿百度,增强版 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...
- 原生JavaScript实现评分效果
一.实现原理: 1.要设置一个“大总管变量”,用于记录点击时的星星下标,只声明不赋值. 2.移入每个星星时,先把所有的星星恢复到默认状态:再把当前星星及在它之前的星星设为选中状态. 3.移出每个星星时 ...
- 原生JS实现-星级评分系统
今天我又写了个很酷的实例:星级评分系统(可自定义星星个数.显示信息) sufuStar.star();使用默认值5个星星,默认信息 var msg = [........]; sufuStar.sta ...
- js星级评分点击星级评论打分效果
html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- js星级评分点击星级评论打分效果--收藏--转载
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js实现星级评分效果(非常规5个li代码)
1. 前言 此方案受到JS单行写一个评级组件启发,自己写了一个简单Demo. 功能有正常滑动,动态显示实心星星个数:当点击确认,则保持当前的实心星星个数:再移动时未点击,则离开后还是保持之前的状态. ...
- jQuery动态星级评分效果实现方法
本文实例讲述了jQuery动态星级评分效果实现方法.分享给大家供大家参考.具体如下: 这里的jQuery星级评分代码,是大家都很喜欢的功能,目前广泛应用,本星级评分加入了动画效果,注意,如果要真正实现 ...
随机推荐
- Android手机在不同分辨率情况下字体自适应大小
两种解决方法: 一. 1.首先根据不同分辨率获取不同字体大小. 在RES里创建values-480x320/strings.xml 里面设置<dimen name="Text_size ...
- Linux内核(2) - 分析内核源码如何入手(上)
透过现象看本质,兽兽们无非就是一些人体艺术展示.同样往本质里看过去,学习内核,就是学习内核的源代码,任何内核有关的书籍都是基于内核,而又不高于内核的. 既然要学习内核源码,就要经常对内核代码进行分析, ...
- Action中如何通过@Autowired自动注入spring bean ?
1.讲Action纳入spring的IOC控制 <!-- 采用注解方式自动扫描装配 --> <context:component-scan base-package="co ...
- 利用WGET下载文件,并保存到指定目录
wget是Linux上一个非常不错的下载指令,也算是Linux工作者常用的指令之一 而这个指令我想在各大系统都预设有提供,包括了Ubuntu.Fedora等,而一般来说,要使用wget下载档案,只需要 ...
- VLOG丨树莓派Raspberry Pi 3安装PLEX并挂载USB硬盘打造最牛的微型家庭影音服务器2018
视频介绍 树莓派3安装目前最流行的PLEX服务器,实现既能最大限度降低功耗,也能随时随地观看分享影片. 一.在树莓派下安装PLEX媒体服务器 1.在终端,将你的树莓派更新至最新 sudo apt up ...
- Latex--TikZ和PGF--高级文本绘图,思维绘图,想到--得到!
Latex--TikZ和PGF--高级文本绘图,思维绘图,想到--得到! TikZ和PGF是一种用在TeX上的CLI绘图工具.CLI和GUI是两种常见的绘图方式,前者是所想即所得(WYTIWYG)的, ...
- 使用dockerfile 构建springboot 的docker镜像
1 新建一个 springboot 项目,并将其打包成 jar 文件.生成demo1.jar 文件 请参考 使用springBoot搭建REATFul风格的web demo 2 编写 dockerfi ...
- zookeeper的部署
http://blog.csdn.net/hongtu1993/article/details/53215587http://www.centoscn.com/image-text/install/2 ...
- c语言double类型数据四舍五入
借助math库的round函数 #include <math.h> double ext_round(double data, int precision) { , precision); ...
- C++ 容器类 vector使用
vector(向量): C++中的一种数据结构,确切的说是一个类.它相当于一个动态的数组,当程序员无法知道自己需要的数组的规模多大时,用其来解决问题可以达到最大节约空间的目的. 用法: 1.文件包含: ...