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 相关文章推荐
js实现权限树的更新权限时的全选全消功能
Feb 17 Javascript
JQuery插件Style定制化方法的分析与比较
May 03 Javascript
jQuery实现倒计时按钮功能代码分享
Sep 03 Javascript
jQuery Ajax()方法使用指南
Nov 19 Javascript
js实现字符串转日期格式的方法
May 20 Javascript
理解JS绑定事件
Jan 19 Javascript
jQuery双向列表选择器DIV模拟版
Nov 01 Javascript
微信小程序 自定义Toast实例代码
Jun 12 Javascript
JavaScript简单编程实例学习
Feb 14 Javascript
基于JS实现table导出Excel并保留样式
May 19 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
Sep 04 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
Sep 21 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数组实现无限分类,不使用数据库,不使用递归.
2006/12/09 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
php生成图片缩略图功能示例
2017/02/22 PHP
laravel自定义分页效果
2017/07/23 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
jQuery实现密保互斥问题解决方案
2013/08/16 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
2013/12/12 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
简单的jQuery入门指引
2015/07/28 Javascript
老生常谈JavaScript数组的用法
2016/06/10 Javascript
jQuery实现鼠标经过显示动画边框特效
2017/03/24 jQuery
jQuery实现简单的抽奖游戏
2017/05/05 jQuery
javascript获取图片的top N主色值方法详解
2018/01/26 Javascript
vue 实现数字滚动增加效果的实例代码
2018/07/06 Javascript
微信小程序如何获取群聊的openGid以及名称详解
2019/07/17 Javascript
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
微信小程序返回箭头跳转到指定页面实例解析
2019/10/08 Javascript
VUE.js实现动态设置输入框disabled属性
2019/10/28 Javascript
在vue-cli3中使用axios获取本地json操作
2020/07/30 Javascript
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
Django模型序列化返回自然主键值示例代码
2019/06/12 Python
python3射线法判断点是否在多边形内
2019/06/28 Python
python抓取多种类型的页面方法实例
2019/11/20 Python
python GUI库图形界面开发之pyinstaller打包python程序为exe安装文件
2020/02/26 Python
Python eval函数原理及用法解析
2020/11/14 Python
Html5 webview元素定位工具的实现
2020/08/07 HTML / CSS
雪花秀美国官方网站:韩国著名草本护肤化妆品品牌
2016/10/19 全球购物
全球性的在线商店:Vogca
2019/05/10 全球购物
革命先烈的英雄事迹材料
2014/02/15 职场文书
劳动竞赛活动方案
2014/02/20 职场文书
2015年大学生入党自荐书
2015/03/24 职场文书
团队执行力培训心得体会
2015/08/15 职场文书
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP
5道关于python基础 while循环练习题
2021/11/27 Python