js+html的超简单星型评分

来源：互联网发布：笔记本牌子排行榜知乎编辑：程序博客网时间：2024/04/29 03:46

以前在做server页面时有做到一个星级评分的页面效果，虽然不不算好看，但也记下来吧。

通过选择框中的值控制黄色星的多少，原理就是控制css显示宽度来达到视觉效果

code：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>make score page</title>
<style>
.fivestars,.fivestars div{background:transparent url(../mkscore/commstar.gif) repeat-x scroll left bottom;width:130px;}
.fivestars{padding:0; position:relative; line-height:28px;display:inline-block;}
.fivestars div{background-position:bottom center; text-indent:-9999px;}
.fivestars div{background-position:left top; width:0px;}
</style>
<script type="text/javascript">
function changestars(score)
{

var w=26; /* one star's width */
var totalw=w*score; /* score stars */
var aa=document.getElementById("autostars");
aa.style.width=totalw+"px";
}
</script>
</head>

这里之所以是通过下拉选择框来选择星星评分，是因为这个系统是提供给androidTV用的，而在android2.2，2.3上不支持js的一些网页效果，本来是做成用鼠标直接点击星星来评分的，后来改了，后来发现在android4.0上又可以支持了，但也没改了，其实那样也简单，就是用css打开div的可点击状态，就是当鼠标移动到div上时，div会变成手状，然后通过js捕捉鼠标点击事件，然后改变其显示宽度就ok了，具体代码就不记了。