js+html的超简单星型评分

最新推荐文章于 2024-07-26 20:46:33 发布

麦克尔.马

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量5.2k

点赞数 5

本文链接：https://blog.csdn.net/luozhi3527/article/details/8209074

版权

javascript 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

以前在做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了，具体代码就不记了。

麦克尔.马

关注

5
点赞
踩
13

收藏

觉得还不错? 一键收藏
2
评论
js+html的超简单星型评分

以前在做server页面时有做到一个星级评分的页面效果，虽然不不算好看，但也记下来吧。通过选择框中的值控制黄色星的多少，原理就是控制css显示宽度来达到视觉效果code：http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">make score
复制链接

扫一扫

专栏目录