原生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星级评分代码,是大家都很喜欢的功能,目前广泛应用,本星级评分加入了动画效果,注意,如果要真正实现 ...
随机推荐
- List多个字段标识过滤 IIS发布.net core mvc web站点 ASP.NET Core 实战:构建带有版本控制的 API 接口 ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目 Using AutoFac
List多个字段标识过滤 class Program{ public static void Main(string[] args) { List<T> list = new List& ...
- PLSQL_通过UTL_MAIL发送并发程式结果报表至用户邮箱(案例)
2014-06-01 Created By BaoXinjian
- KASAN实现原理
1. 前言 KASAN是一个动态检测内存错误的工具.KASAN可以检测全局变量.栈.堆分配的内存发生越界访问等问题.功能比SLUB DEBUG功能齐全并且支持实时检测.越界访问的严重性和危害性通过我之 ...
- django1.8输出一些非HTML内容
在reportlab库中可以生成pdf文件 在https://www.reportlab.com/pypi/packages/ 下载需要的版本然后,在命令行里通过pip安装.pip instal ...
- datagrid,treegrid携带参数刷新示例
datagrid携带参数刷新: var queryParams = $("#datagridId").datagrid("options").queryPara ...
- 一处疑难杂症的术后总结:WebView和JavaScript之间的交互
近期在公司里參与了M3项目的开发,这个项目是使用HTML5开发的前端页面,在开发完成后,把项目地址写入Android.iOS的壳源代码里面,这样当应用被打开时候自己主动加载项目首页的URL.这样的做法 ...
- 批处理学习笔记8 - 深入学习For命令1
for命令用途非常广,它分为4种 /d /r /l /f /l是类似高级语言的数值循环,在之前就说过,这篇就不说了: http://www.cnblogs.com/HONT/p/3155187.htm ...
- [sql]mysql启停脚本
写了个较为完善的mysql多实例的启动停止脚本. [root@lanny 3307]# cat mysql #!/bin/sh [ $# != 1 ]&&{ echo "US ...
- [sh]函数+条件表达式
了解了下shell的函数和case语句: 函数格式: function(){ } 例子: function rsyncstart() { if [ "${status1}X" == ...
- angular学习笔记(十六) -- 过滤器(1)
本篇主要介绍过滤器的基本用法: 过滤器用来对数据进行格式的转换,数据格式的转化与逻辑无关,因此,我们使用过滤器来进行这些操作: {{... | filter2: 参数1,参数2... }} expre ...