javascript 星级评分效果(手写)


Posted in Javascript onDecember 24, 2012

今天上午抽空随手写了个星级评分的效果,给大家分享下。由于水平有限,如有问题请指出。
首先要准备一张星星的图片,灰色是默认状态,黄色是选择状态。如图:
最后附上代码

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title>javascript星级评分</title> 
<style type="text/css"> 
*{margin:0;padding:0;} 
.wrapper{height:20px;padding:5px;width:130px;margin:100px auto 10px;} 
a{float:left;width:26px;height:20px;background:url(star.png) 0 -20px no-repeat;} 
p{font:24px SimSun;width:130px;margin-left:auto;margin-right:auto;} 
</style> 
</head> 
<body> 
<div class="wrapper"> 
<a href="javascript:;"></a> 
<a href="javascript:;"></a> 
<a href="javascript:;"></a> 
<a href="javascript:;"></a> 
<a href="javascript:;"></a> 
</div> 
<p></p> 
</body> 
</html> 
<script type="text/javascript"> 
window.onload = function(){ 
var star = document.getElementsByTagName('a'); 
var oDiv = document.getElementsByTagName('div')[0]; 
var temp = 0; 
for(var i = 0, len = star.length; i < len; i++){ 
star[i].index = i; 
star[i].onmouseover = function(){ 
clear(); 
for(var j = 0; j < this.index + 1; j++){ 
star[j].style.backgroundPosition = '0 0'; 
} 
} 
star[i].onmouseout = function(){ 
for(var j = 0; j < this.index + 1; j++){ 
star[j].style.backgroundPosition = '0 -20px'; 
} 
current(temp); 
} 
star[i].onclick = function(){ 
temp = this.index + 1; 
document.getElementsByTagName('p')[0].innerHTML = temp + ' 颗星'; 
current(temp); 
} 
} 
//清除所有 
function clear(){ 
for(var i = 0, len = star.length; i < len; i++){ 
star[i].style.backgroundPosition = '0 -20px'; 
} 
} 
//显示当前第几颗星 
function current(temp){ 
for(var i = 0; i < temp; i++){ 
star[i].style.backgroundPosition = '0 0'; 
} 
} 
}; 
</script>

附上下载地址
PS:这是本人闲着无聊,通过自己所学的 javascript 知识,随意写的一些效果。
Javascript 相关文章推荐
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
May 07 Javascript
jQuery Tools tab(幻灯片)
Jul 14 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 Javascript
javascript中parseInt()函数的定义和用法分析
Dec 20 Javascript
jquery.mobile 共同布局遇到的问题小结
Feb 10 Javascript
vue router下的html5 history在iis服务器上的设置方法
Oct 18 Javascript
深入理解Vue 单向数据流的原理
Nov 09 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
May 16 Javascript
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
手把手教你实现 Promise的使用方法
Sep 02 Javascript
原生JS实现九宫格抽奖
Sep 13 Javascript
vue print.js打印支持Echarts图表操作
Nov 13 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
Dec 24 #Javascript
jquery限制输入字数,并提示剩余字数实现代码
Dec 24 #Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
Dec 23 #Javascript
ajax中get和post的说明及使用与区别
Dec 23 #Javascript
javascript 全选与全取消功能的实现代码
Dec 23 #Javascript
javascript利用控件对windows的操作实现原理与应用
Dec 23 #Javascript
javascript小数四舍五入多种方法实现
Dec 23 #Javascript
You might like
PHP使用PDO连接ACCESS数据库
2015/03/05 PHP
Laravel基础_关于view共享数据的示例讲解
2019/10/14 PHP
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
JSON语法五大要素图文介绍
2012/12/04 Javascript
jQuery 仿百度输入标签插件附效果图
2014/07/04 Javascript
JavaScript构造函数详解
2015/12/27 Javascript
javascript中活灵活现的Array对象详解
2016/11/30 Javascript
JS实现中国公民身份证号码有效性验证
2017/02/20 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
easyui combogrid实现本地模糊搜索过滤多列
2017/05/13 Javascript
vue中子组件调用兄弟组件方法
2018/07/06 Javascript
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
2020/02/15 Javascript
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
Python3.x和Python2.x的区别介绍
2013/02/12 Python
浅谈用Python实现一个大数据搜索引擎
2017/11/28 Python
python 将md5转为16字节的方法
2018/05/29 Python
flask入门之表单的实现
2018/07/18 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
python 读取dicom文件,生成info.txt和raw文件的方法
2019/01/24 Python
在python里面运用多继承方法详解
2019/07/01 Python
python中的TCP(传输控制协议)用法实例分析
2019/11/15 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
Python 多进程、多线程效率对比
2020/11/19 Python
SQL Server 2000数据库的文件有哪些,分别进行描述。
2015/11/09 面试题
企业总经理职责
2014/02/02 职场文书
公司联欢晚会主持词
2014/03/22 职场文书
爱耳日活动总结
2014/04/30 职场文书
《梅花魂》教学反思
2014/04/30 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
2015年三好一满意工作总结
2015/07/24 职场文书
MySQL索引知识的一些小妙招总结
2021/05/10 MySQL
Python Matplotlib绘制条形图的全过程
2021/10/24 Python
业余无线电通联Q语
2022/02/18 无线电
Python闭包的定义和使用方法
2022/04/11 Python