本文主要是介绍【javascript】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 知识，随意写的一些效果。
这篇关于【javascript】javascript 星级评分的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
