原生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星级评分代码,是大家都很喜欢的功能,目前广泛应用,本星级评分加入了动画效果,注意,如果要真正实现 ...
随机推荐
- C#封装百度Web服务API处理包含(Geocoding API,坐标转换API)
1.创建基础参数类 public static class BaiduConstParams { public const string PlaceApIv2Search = "http:/ ...
- php 数组与数组 的交集和差集
注意,必须是第一个参数的数组的长度比较长才可以使用 $a1=array("0","1","2","3"); $a2=ar ...
- 如何用Latex合并多个pdf文件?
如何用Latex合并多个pdf文件? 用TeX合并pdf, 用LaTeX合并pdf 代码: \documentclass[a4paper]{article} \usepackage{pdfpage ...
- mysql 5.6.23的源码安装
http://634871.blog.51cto.com/624871/1325914 首先删除系统自带的mysql rpm -qa | grep mysql rpm -e mysql //普 ...
- svnserve配置文件详析
svnserve是SVN自带的一个轻型服务器,客户端通过使用以svn://或svn+ssh://为前缀的URL来访问svnserve服务 器,实现远程访问SVN版本库. svnserve可以通过配置文 ...
- 【OC语法快览】二、存取方法
Accessors 存取方法 All instance variables are private in Objective-C by default, so you should use acces ...
- php excel类 phpExcel使用方法介绍
phpExcel操作excel可以方便的加入图片,支持jpg gif png格式. 下载地址:http://www.codeplex.com/PHPExcel 下面是总结的几个使用方法 include ...
- Cocos2d-x 3.0final 终结者系列教程03-源代码文件夹说明
话说今天从霍营到回龙观,走到天鑫家园东路.我肋哥去,堵死我啦.7:30出门,9:10还没到回龙观. 北京这交通真是坑爹.回过头想想.怪自己走小路,有时候确实快.可有时候真堵. 堵了35分钟后果断掉头, ...
- 利用ItextSharp 生成PDF文档改进版
导入的ItextSharp.dll一定要是较高的版本 数据库表结构 生成的PDF样式 代码: namespace WebPDF { public partial class _Default : Sy ...
- ny225 小明求素数积
小明求素数积时间限制:1000 ms | 内存限制:65535 KB 难度:1描述 小明最近遇到了一个素数题,是给你一个正整数N(2=<N<=1000)让你求出2~N的所有素数乘积的后 ...