原生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星级评分代码,是大家都很喜欢的功能,目前广泛应用,本星级评分加入了动画效果,注意,如果要真正实现 ...
随机推荐
- jquery ajax调用WCF,采用System.ServiceModel.WebHttpBinding
Jquery ajax调用WCF服务 例子效果如下:原界面 点击按钮GetList get后,通过指定的Url获取数据添加到table 新建一个控制台项目,添加IContract.cs,DBServi ...
- Form_Form Builder中的全局变量和程式变量(概念)
2014-12-20 Created By BaoXinjian
- java web中请求和响应中包含中文出现乱码解析
说明:在计算机中保存的一切文本信息是以一定的编码表(0,1,0,1)来保存我们所认识的字符(汉字或英文字符),由字符到计算机存储的二进制过程是编码,由读取二进制到文本的过程称为解码.而字符编码有多种不 ...
- angular.js快速入门 hello world
我们整个系列的学习会去写一个简单blog雏形,如果有精力再完善美化. 但是这篇还是要从HelloWorld开始学习. angular.js 文件加载我们选用 bootstrap中文网提供的一个cdn服 ...
- Direct-X学习笔记--三维摄像机
一.介绍 哇! 到了传说中的3D摄像机啦! 之前我们写的东东,都是观察点不动,通过世界变换让东西动,今天,通过三维摄像机我们就能够改变我们的观察点,观察方向,任意在三维空间中驰骋.之前我们所设定的视角 ...
- 非常全的linux面试笔试题及答案
一.填空题:1. 在Linux系统中,以 文件 方式访问设备 .2. Linux内核引导时,从文件/etc/fstab 中读取要加载的文件系统.3. Linux文件系统中每个文件用 i节点来标识.4. ...
- Vmware-虚拟机中ubuntu不能联网问题的解决——NAT方式
设置虚拟机不能联网是很痛苦的,这里我就ubuntu的NAT上网问题就个人经验讲一下,其他的桥连接等没有使用就没有经验了. 1.查看/设置下NAT的网络 打开VMware Workstation, 点击 ...
- lua内存管理
本文内容基于版本:Lua 5.3.0 Lua内存管理器规则 Lua允许用户自定义内存管理器,并在创建Lua虚拟机(lua_State实例)时传入.当然自定义内存管理器必须遵循Lua已定义的一些行为规则 ...
- Parallel Programming AND Asynchronous Programming
https://blogs.oracle.com/dave/ Java Memory Model...and the pragmatics of itAleksey Shipilevaleksey.s ...
- 找不到编译动态表达式所需的一种或多种类型。是否缺少对 Microsoft.CSharp.dll 和 System.Core.dll 的引用?
提示“找不到编译动态表达式所需的一种或多种类型.是否缺少对 Microsoft.CSharp.dll 和 System.Core.dll 的引用? ”错误 解决方法: 将引入的COM对象(misc ...