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 屏蔽按键效果与改变按键效果的示例代码
Dec 24 Javascript
浅谈jQuery中的事件
Mar 23 Javascript
jQuery div拖拽用法实例
Jan 14 Javascript
jQuery中ScrollTo用法示例
Sep 04 Javascript
Node.js数据库操作之连接MySQL数据库(一)
Mar 04 Javascript
微信小程序如何获取openid及用户信息
Jan 26 Javascript
JavaScript执行环境及作用域链实例分析
Aug 01 Javascript
JavaScript JSON数据处理全集(小结)
Aug 15 Javascript
Javascript Web Worker使用过程解析
Mar 16 Javascript
Vuex中的Mutations的具体使用方法
Jun 01 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
Nov 05 Javascript
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
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中计算时间差的几种方法
2009/12/31 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
jQuery 隔行换色 支持键盘上下键,按Enter选定值
2009/08/02 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
2014/06/17 Javascript
js字符串完全替换函数分享
2014/12/03 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
Jquery 实现图片轮换
2015/01/28 Javascript
javascript中错误使用var造成undefined
2016/03/31 Javascript
javascript的理解及经典案例分析
2016/05/20 Javascript
JavaScript暂停和继续定时器的实现方法
2016/07/18 Javascript
AngularJS 所有版本下载地址
2016/09/14 Javascript
详解JS中的快速排序与冒泡
2017/01/10 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
2017/11/28 Javascript
JS随机数产生代码分享
2018/02/24 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
2018/08/27 Javascript
vsCode安装使用教程和插件安装方法
2020/08/24 Javascript
使用JavaScript解析URL的方法示例
2019/03/01 Javascript
基于python select.select模块通信的实例讲解
2017/09/21 Python
Python基础教程之内置函数locals()和globals()用法分析
2018/03/16 Python
linux环境中没有网络怎么下载python
2019/07/07 Python
使用Tensorflow实现可视化中间层和卷积层
2020/01/24 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
PyInstaller的安装和使用的详细步骤
2020/06/02 Python
Python Socket多线程并发原理及实现
2020/12/11 Python
德国百年厨具品牌WMF美国站:WMF美国
2016/09/12 全球购物
Europcar西班牙:全球汽车租赁领域的领导者
2018/09/17 全球购物
普天C++笔试题
2016/03/20 面试题
小学关爱留守儿童活动方案
2014/08/25 职场文书
教师竞聘上岗演讲稿
2014/09/03 职场文书
党的群众路线教育实践活动批评与自我批评范文
2014/10/16 职场文书
免职通知
2015/04/23 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书
go mod 安装依赖 unkown revision问题的解决方案
2021/05/06 Golang
简单谈谈Python面向对象的相关知识
2021/06/28 Python
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python