javascript 星级评分效果(手写)
更新时间：2012年12月24日 17:21:25 作者：
今天上午抽空随手写了个星级评分的效果，给大家分享下。由于水平有限，如有问题请指出;首先要准备一张星星的图片，灰色是默认状态，黄色是选择状态，需要的朋友可以参考下
今天上午抽空随手写了个星级评分的效果，给大家分享下。由于水平有限，如有问题请指出。
首先要准备一张星星的图片，灰色是默认状态，黄色是选择状态。如图：
最后附上代码：
<!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 知识，随意写的一些效果。
首先要准备一张星星的图片，灰色是默认状态，黄色是选择状态。如图：
最后附上代码：
复制代码 代码如下:
<!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 知识，随意写的一些效果。
相关文章
这篇文章主要介绍了JS实现含有中文字符串的友好截取功能,结合实例形式分析了JS针对含有中文的字符串截取操作相关原理与实现技巧,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了浅谈javascript中replace()方法，replace函数方法是返回根据正则表达式进行文字替换后的字符串的复制，需要的朋友可以参考下2015-11-11
这篇文章主要是对Javascript对象属性方法进行了详细的汇总介绍。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
这篇文章主要给大家介绍了关于微信小程序位置授权处理的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
这篇文章主要为大家详细介绍了基于JavaScript实现多级菜单效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要介绍了js网页右下角提示框的实现方法,以实例展示了css样式与HTML布局,以及对应的js显示与关闭提示框等功能,需要的朋友可以参考下2014-10-10
这篇文章主要为大家详细介绍一下JavaScript中函数防抖与函数节流的定义及使用，文中的示例代码讲解详细，对我们学习JS有一定帮助，需要的可以参考一下2022-08-08
在一些网页广告中提供的JS代码可以进行代码注入，然后监视各种元素，下面有个示例，大家可以参考下2014-04-04
组件是 vue 技术中非常重要的部分,组件使得与ui相关的轮子可以方便的制造和共享,进而使得vue使用者的开发效率大幅提升,组件可以使用全局注册和页面引入两种方式进行使用,对uni-app自定义组件和通信相关知识感兴趣的朋友跟随小编一起看看吧2024-03-03
你真的了解BOM中的history对象吗？具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
最新评论