评分样式css,评分表的评分要求模板

jquery星星评分代码，到小数点，有css

下面是js 的评分实现,每次评分都是整数,4.2只是个平均值

用这个就可以了

SELECT avg(star) as stars FROM content where id =100

只有一个数值,就是你要的平均分,也就是4.2

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

title星级评分系统/title

style

body,div,ul,li,p{margin:0;padding:0;}

body{color:#666;font:12px/1.5 Arial;}

ul{list-style-type:none;}

#star{position:relative;width:600px;margin:10px auto;}

#star ul,#star span{float:left;display:inline;height:19px;line-height:19px;}

#star ul{margin:0 10px;}

#star li{float:left;width:24px;cursor:pointer;text-indent:-9999px;background:url(/jscss/demoimg/201206/star.png) no-repeat;}

#star strong{color:#f60;padding-left:10px;}

#star li.on{background-position:0 -28px;}

#star p{position:absolute;top:20px;width:159px;height:60px;display:none;background:url(/jscss/demoimg/201206/icon.gif) no-repeat;padding:7px 10px 0;}

#star p em{color:#f60;display:block;font-style:normal;}

/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.length; i++)

{

aLi[i - 1].index = i;

//鼠标移过显示分数

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 = "emb" + 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.index;

oP.style.display = "none";

oSpan.innerHTML = "strong" + (this.index) + " 分/strong (" + aMsg[this.index - 1].match(/\|(.+)/)[1] + ")"

}

}

//评分处理

function fnPoint(iArg)

{

//分数赋值

iScore = iArg || iStar;

for (i = 0; i aLi.length; i++) aLi[i].className = i iScore ? "on" : "";

}

};

/script

/head

body

div id="star"

span点击星星就能打分/span

ul

lia href="javascript:;"1/a/li

lia href="javascript:;"2/a/li

lia href="javascript:;"3/a/li

lia href="javascript:;"4/a/li

lia href="javascript:;"5/a/li

/ul

span/span

p/p

/div

/body

/html

相关问答

Q1: 网页上怎样表示动态用星星表示评分 的html+css，支持半颗星

你可以到这个地方去看一下

半星可以将图片换成灰色星星和半星然后多加5个A标签和label

Q2: javascript+html+css 来实现一个体育班成绩录入并自动评分 只要思路和算法，不要具体程序代码

这要啥思路。。。按顺序设置ID 设置平时成绩

然后最后得分= 所有加一起除以一个数呗

比如 50米 5s/合格成绩*100% 800米 XX秒 一起加一起除以N

Q3: css样式中的三分之一怎么写 33.33%吗？比如在一个ul中设定三个同等大小的li，宽度怎么设定？

css3有个display:flex的属性

即

ul{width:100%; display:flex;}

ul li{flex:1;}

这样就可以评分，但是兼容性较差，如果考虑到兼容性，将li设置成33.33%是可以的，但是会有一点点的空隙，但是不明显

Q4: 纯CSS显示评分星星（包括半星）

已经有好多插件可以实现星星打分和显示，但只是根据分数来显示星星或半星时，只需用CSS实现会比较简洁不需要引用多于的JS。

HTML

CSS

显示结果

想要显示不数量的星星时，只要修改 data-rating 的设置值即可。

下方的链接可以直接动手调试