星级评价的海词问答与网友补充：
星级评价的相关资料：
相关词典网站：JS实现带提示的星级评分效果完整实例
作者：企鹅
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了JS实现带提示的星级评分效果,以完整实例形式较为详细的分析了JavaScript响应鼠标事件动态变换页面元素样式的相关技巧,非常简单实用的代码,需要的朋友可以参考下
本文实例讲述了JS实现带提示的星级评分效果。分享给大家供大家参考，具体如下：
这是一款JS仿淘宝网的星级评分系统，鼠标放在上边可以显示星级代表的评分级别，鼠标点击时会选中当前的星级，目前此功能在网页上十分流行，虽然是仿做的，但已经很不错的功能了，希望大家喜欢！
运行效果截图如下：
在线演示地址如下：
具体代码如下：
&!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"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&星级评分系统&/title&
body,div,ul,li,p{margin:0;padding:0;}
body{color:#666;font:12px/1.5 A}
ul{list-style-type:}
#star{position:width:600margin:10}
#star ul,#star span{float:display:height:19line-height:19}
#star ul{margin:0 10}
#star li{float:width:24cursor:text-indent:-9999background:url(images/star.png) no-}
#star strong{color:#f60;padding-left:10}
#star li.on{background-position:0 -28}
#star p{position:top:20width:159height:60display:background:url(images/icon.gif) no-padding:7px 10px 0;}
#star p em{color:#f60;display:font-style:}
&script type="text/javascript"&
window.onload = function ()
var oStar = document.getElementById("star");
var aLi = oStar.getElementsByTagName("li");
var oUl = oStar.getElementsByTagName("ul")[0];
var oSpan = oStar.getElementsByTagName("span")[1];
var oP = oStar.getElementsByTagName("p")[0];
var i = iScore = iStar = 0;
var aMsg = [
"很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
"不满意|部分有破损，与卖家描述的不符，不满意",
"一般|质量一般，没有卖家描述的那么好",
"满意|质量不错，与卖家描述的基本一致，还是挺满意的",
"非常满意|质量非常好，与卖家描述的完全一致，非常满意"
for (i = 1; i &= aLi. i++)
aLi[i - 1].index =
//鼠标移过显示分数
aLi[i - 1].onmouseover = function ()
fnPoint(this.index);
//浮动层显示
oP.style.display = "block";
//计算浮动层位置
oP.style.left = oUl.offsetLeft + this.index * this.offsetWidth - 104 + "px";
//匹配浮动层文字内容
oP.innerHTML = "&em&&b&" + this.index + "&/b& 分 " + aMsg[this.index - 1].match(/(.+)\|/)[1] + "&/em&" + aMsg[this.index - 1].match(/\|(.+)/)[1]
//鼠标离开后恢复上次评分
aLi[i - 1].onmouseout = function ()
fnPoint();
//关闭浮动层
oP.style.display = "none"
//点击后进行评分处理
aLi[i - 1].onclick = function ()
iStar = this.
oP.style.display = "none";
oSpan.innerHTML = "&strong&" + (this.index) + " 分&/strong& (" + aMsg[this.index - 1].match(/\|(.+)/)[1] + ")"
//评分处理
function fnPoint(iArg)
//分数赋值
iScore = iArg || iS
for (i = 0; i & aLi. i++) aLi[i].className = i & iScore ? "on" : "";
&div id="star"&
&span&点击星星就能打分&/span&
&li&&a href="javascript:;"&1&/a&&/li&
&li&&a href="javascript:;"&2&/a&&/li&
&li&&a href="javascript:;"&3&/a&&/li&
&li&&a href="javascript:;"&4&/a&&/li&
&li&&a href="javascript:;"&5&/a&&/li&
&span&&/span&
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具