首页 / JAVASCRIPT / javascript 星级评分效果(手写)

javascript 星级评分效果(手写)

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript 星级评分效果(手写)，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1735字，纯文字阅读大概需要3分钟。

内容图文

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

<!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 星级评分效果(手写)全部内容，希望文章能够帮你解决javascript 星级评分效果(手写)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/367600.html

来源：【匿名】