jquery星星评分代码（jquery星级评分代码）

今天给各位分享jquery星星评分代码的知识，其中也会对jquery星级评分代码进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、网页上怎样表示动态用星星表示评分 的html+css，支持半颗星
• 2、类似淘宝 动态星星的 评分 js 是怎么传值的
• 3、jquery点击一个事件更换图片，在点击更换回来
• 4、通过JS实现分数对应的星星评分体现
• 5、jquery星星评分代码，到小数点，有css
• 6、求一个滑动鼠标点击星星评分的功能插件，能做出把剩下的积分全部给你

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

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

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

类似淘宝 动态星星的 评分 js 是怎么传值的

$(document).ready(function(){

var stepW = 24;

var description = new Array("非常差，回去再练练","真的是差，都不忍心说你了","一般，还过得去吧","很好，是我想要的东西","太完美了，此物只得天上有，人间哪得几回闻!");//定义评价

var stars = $("#star li");//获取id是 star 下的 li 标签

var descriptionTemp;

$("#showb").css("width",0);//给id是showb jquery对象给一个宽度

stars.each(function(i){ //循环所有stars 对象

$(stars[i]).click(function(e){//给单个li 绑定个 点击事件

var n = i+1;

$("#showb").css({"width":stepW*n});//在给id是showb jquery对象给一个宽度

descriptionTemp = description[i];//给descriptionTemp赋值

$(this).find('a').blur();//在当前的li标签查找 a 标签，给这个a标签添加一个失去焦点的事件

return stopDefault(e);

return descriptionTemp;

});

});

stars.each(function(i){//再次循环

$(stars[i]).hover(//给对象绑定一个鼠标移上去的事件

function(){

$(".description").text(description[i]);//给class 为description 的对象添加

},

function(){

if(descriptionTemp != null)

$(".description").text("当前您的评价为："+descriptionTemp);评价

else

$(".description").text(" ");

}

);

});

});

function stopDefault(e){

if(e e.preventDefault)

e.preventDefault();

else

window.event.returnValue = false;

return false;

};

jquery点击一个事件更换图片，在点击更换回来

跟星星评分功能一样，点击一个按钮更换图片星星，在点击一下跟换回来，然后相应的input中的数字变换。

点击li更换img图片，然后input中value数值变换，初始值为value=5。

jquery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库( 或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计等。

通过JS实现分数对应的星星评分体现

打开paintcode，绘制一个漏空的星星体现：

操作为：创建canvas 大小30 * 30；修改名称为Star；绘制一个矩形 30 * 30；绘制一个星星 30 * 30 ，星星弧度改为55 %；选中矩形和星星，点击difference，变成bezier 曲线。

接下来，我们添加一个新的canvas，绘制我们需要的控件。

操作为：创建星星评分canvas 150 * 30；创建背景矩形 150 * 30；创建填充矩形 100 * 30；放置5个第一步中绘制的漏空的星星到canvas 上，5个星星组成一个group；然后就可以看到我们想要的视图基本已经出来了。

下一步：将我们画好的生成style文件加入到我们的工程中;

先创建一个新的空白工程，添加一个自定义的类ScoreStarsView 继承自UIView;

操作为点击paintcode 的file- export 生成stylekit文件放到我们新建的工程下，然后打开xcode ，添加生成是ScoreStarsKit 文件。然后在自定义的ScoreStarsView 类中导入kit，然后在drawRect 进行绘制。最后在storyboard中添加uiview ，把这个view的类改成ScoreStarsView；然后模拟器运行。

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

求一个滑动鼠标点击星星评分的功能插件，能做出把剩下的积分全部给你

插件 赞助商链接以前写过一篇文章以jquery为基础的星星评分 ，今天有时间把这个功能重写，并以jQuery插件的形式出现以便以后使用。 首先看一下运行效果如下图所示。

附件: star_on.gif

鼠标移到星星上该星星前面的所有星星全部变亮，鼠标单击将记录点击的星星数，前面的所有星星将变亮。

一、原理

本程序的原理是这样的：一个“ul”标签，该标签的背景为灰色的星星，控制“ul”标签的宽度显示星星的数量。例如：一个星星图片的宽度为23px，那么要显示10个星星，则“ul”的宽度为230px就可以显示10个星星。

n个“li”标签，n表示您要显示星星的个数，例如你要显示10个星星那么将有10个“li”标签。那么这10个标签的宽度分别为1个星星的宽度 23px，2个星星的宽度46px，......，10个星星的宽度230px。这些“li”标签的背景将为蓝色的星星。

则另外还有一个“li”标签记录鼠标单击的星星或初始设置。

这些标签都是重叠在一起的，通过鼠标滑动效果切换这些标签的层叠顺序，显示不同的星星数量，单击记录星星个数。

二、源码 $.fn.studyplay_star=function(options,callback){

//默认设置

var settings ={

MaxStar :20,

StarWidth :23,

CurrentStar :5,

Enabled :true

};

if(options) { jQuery.extend(settings, options); };

var container = jQuery(this);

container.css({"position":"relative"})

.html('ul class="studyplay_starBg"/ul')

.find('.studyplay_starBg').width(settings.MaxStar*settings.StarWidth)

.html('li class="studyplay_starovering" style="width:'+settings.CurrentStar*settings.StarWidth+'px; z-index:0;" id="studyplay_current"/li');

if(settings.Enabled)

{

var ListArray = "";

for(k=1;ksettings.MaxStar+1;k++)

{

ListArray +='li class="studyplay_starON" style="width:'+settings.StarWidth*k+'px;z-index:'+(settings.MaxStar-k+1)+';"/li';

}

container.find('.studyplay_starBg').append(ListArray)

.find('.studyplay_starON').hover(function(){

$("#studyplay_current").hide();

$(this).removeClass('studyplay_starON').addClass("studyplay_starovering");

},

function(){

$(this).removeClass('studyplay_starovering').addClass("studyplay_starON");

$("#studyplay_current").show();

})

.click(function(){

var studyplay_count = settings.MaxStar - $(this).css("z-index")+1;

$("#studyplay_current").width(studyplay_count*settings.StarWidth)

//回调函数

if (typeof callback == 'function') {

callback(studyplay_count);

return ;

}

})

}

}

复制代码这个插件有两个参数一个是options表示插件的一些基本设置；callback表示回调函数，该函数存在一个参数表示用户选择的星星数量。

三、使用

如果我们想在id为“z”的div上显示5个星星，默认有一颗星星选中，弹出选择星星的个数对话框，就可以如下编写代码： div id="z"/div

script type="text/javascript"

$(document).ready(function(){

$("#z").studyplay_star({MaxStar:5,CurrentStar:2},function(value){alert(value)});

});

/script

复制代码如果想显示评分结果 可以把Enabled设置false就ok了。（文/zhaoyang）

四、代码下载： 星级评分--jQuery插件

关于jquery星星评分代码和jquery星级评分代码的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。