数码资讯
jQuery星级标准的实现方法
选购提示
关注价格、性能、续航、售后和真实使用场景，理性比较后再下单。
这个例子的效果：
转换动画显示得分操作。
更新用户的平均得分和用户评分。
后台限制用户重复评分操作，并在前端显示。
XHTML
HTML结构分为灰色星div # big_rate显示，明亮的星星# big_rate_up div，分数跨度#和跨# G，和及时的信息# my_rate div。
CSS
率。{宽度：600px；保证金：100px汽车；字体大小：14px；位置：相对；填充：10px 0；}
。率p { margin: 0；padding: 0；显示：内联；身高：40px；溢出：隐藏；位置：绝对的；
顶：0；左：100px；margin-left: 140px；}
。率P跨度的{字体大小：36px；线高度：36px；浮动：左；font-weight: bold；颜色：# dd5400；}
。率P跨度。G {字体大小：22px；显示：块；浮动：左；颜色：# dd5400；}
。big_rate {宽度：140px；身高：28px；文本对齐：左；位置：绝对；顶部：3px；左：85px；
显示：内联块；背景：URL（明星。GIF）左下repeat-x；}
。big_rate跨度{显示：内联块；宽度：24px；身高：28px；位置：相对；Z指数：1000；
游标；指针；溢出；隐藏；}
。big_rate_up {宽度：140px；身高：28px；位置：绝对的；最高：0；左：0；
背景：URL（星型GIF）左上方；}
# my_rate {位置：绝对；边距：40px；margin-left: 100px }
# my_rate跨度{颜色：# dd5400；font-weight:大胆}
jQuery
让我们先写一个函数get_rate（）处理的分前端交互。
功能get_rate（率）{
做某事
}
功能get_rate（率）需要传递一个参数：速度，这是用来代表平均值，那么参数率：在函数处理
rate.tostring率=（）；
VaR的；
var g；
$（# G）显示（）；
如果（速率=长度= 3）{
s＝10；
g＝0；
$（# G）藏（）；
否则如果（速率= 0 ）{
s＝0；
g＝0；
其他{ }
S = rate.substr（0,1）；
G = rate.substr（1,1）；
}
$（# ）文本（S）；
$（# G ）。文本（，+ g）；
速率的平均值被转换成一种格式，例如：6.8，用于前端显示的平均点。
接下来，当我们的鼠标滑向恒星时，它会产生动画效果。明亮的星星的宽度会随着鼠标的滑动而变化，而且分数也会改变。
$（。big_rate_up）。动画（{宽度：（parseInt（）+ parseInt（g）/ 10）* 14，高度：26 }，1000）；
$（。big_rate跨度）。每个（函数（）{）
$（这）。Mouseover（function（）{）
$（。big_rate_up ），宽度（$（this）。Attr（率）* 14）；
$（# s）。文本（$（this）。Attr（率））；
$（# G ）。文本（）；
}Click（函数（）{）
…Ajax异步提交到后台处理
}）
}）
上面的代码不难理解。需要解释的是，为什么宽度乘以14由于图片的宽度是28，总共有5张图片显示满分为10，单位分数（1分）占宽度（5×28） / 10＝14。
当您单击一个星时，您需要发送一个Ajax请求到后台地址与后台交互。
VaR得分=美元（这）。Attr（率）；
$（# my_rate）。Html（你的分数：+成绩+ ）；
$ ajax（{
类型：邮政
URL
数据：得分=+得分，
成功：函数（MSG）{
如果（MSG = 1）{
$（# my_rate）。Html（你走的太远了！；
}如果（MSG = 2）{
$（# my_rate）。Html（你走的太远！；
其他{ }
get_rate（MSG）；
}
}
}）；
不难看出，当星星点击，前端发送Ajax请求后的后台程序post.php，传递参数评分，即得分。后台程序确定相应的评分，处理它，并发送不同的信息处理过程结束时。
别忘了，当鼠标离开星时，值应该被恢复。
$（。big_rate）。Mouseout（function（）{）
$（# ）文本（S）；
$（# G ）。文本（，+ g）；
$（。big_rate_up）。Width（（parseInt（）+ parseInt（g）/ 10）* 14）；
}）
功能get_rate（）完成后，我们只需要调用可以在加载页时。
$（函数（）{（））
（88）get_rate；
}）；
PHP
post.php程序需要处理：接收点的数量的前端发送，通过cookie来判断用户的IP和评分时间，防止重复评分。
include_once（'connect。php）； / /数据库连接
得分= { 'score美元美元_post}；
如果（isset（$分））{
cookiestr美元= getip（）；
时间=时间（）；
如果（isset（$ _cookie { 'person ' }）{ } _cookie美元'person= = $ cookiestr）{
1；
}
elseif（isset（$ _cookie { 'rate_time ' }）（$时间intval（$ _cookie { 'rate_time ' }））＜600）{
2；
{人}
为查询= mysql_query（更新raty集选民=选民+ 1，共占总+ $ score'where ID = 1 ）；
$query = mysql_query (select * from raty where id=1);
RS = mysql_fetch_array美元（$查询）；
美元美元平均= RS {综合} / $ RS { 'voter}；
美元（$断言，断言=一1）×10；
设置cookie
setcookie（的人
setcookie（rate_time
echo $断言；
}
}
显然，当用户提交分数时，程序将记录用户的IP和时间以防止重复。当用户第一次得分时，程序执行操作，将分数添加到数据表中，并计算返回到前端调用的平均分数。
如何获取用户的IP getip（）方法已经在演示中，这里不做重点介绍，请下载吧。
最后，附加了mysql表结构。
创建表不存在（` raty `
` ID ` int（11）不为空auto_increment，
`选民` int（10）不为空的默认'0'comment得分次，
`总` int（11）不为空的默认'0'comment总得分，
主键（id）
= MyISAM引擎默认的字符集utf8）；
以上是一个星星的实现方法，希望对大家的学习有所帮助。
转换动画显示得分操作。
更新用户的平均得分和用户评分。
后台限制用户重复评分操作，并在前端显示。
XHTML
HTML结构分为灰色星div # big_rate显示，明亮的星星# big_rate_up div，分数跨度#和跨# G，和及时的信息# my_rate div。
CSS
率。{宽度：600px；保证金：100px汽车；字体大小：14px；位置：相对；填充：10px 0；}
。率p { margin: 0；padding: 0；显示：内联；身高：40px；溢出：隐藏；位置：绝对的；
顶：0；左：100px；margin-left: 140px；}
。率P跨度的{字体大小：36px；线高度：36px；浮动：左；font-weight: bold；颜色：# dd5400；}
。率P跨度。G {字体大小：22px；显示：块；浮动：左；颜色：# dd5400；}
。big_rate {宽度：140px；身高：28px；文本对齐：左；位置：绝对；顶部：3px；左：85px；
显示：内联块；背景：URL（明星。GIF）左下repeat-x；}
。big_rate跨度{显示：内联块；宽度：24px；身高：28px；位置：相对；Z指数：1000；
游标；指针；溢出；隐藏；}
。big_rate_up {宽度：140px；身高：28px；位置：绝对的；最高：0；左：0；
背景：URL（星型GIF）左上方；}
# my_rate {位置：绝对；边距：40px；margin-left: 100px }
# my_rate跨度{颜色：# dd5400；font-weight:大胆}
jQuery
让我们先写一个函数get_rate（）处理的分前端交互。
功能get_rate（率）{
做某事
}
功能get_rate（率）需要传递一个参数：速度，这是用来代表平均值，那么参数率：在函数处理
rate.tostring率=（）；
VaR的；
var g；
$（# G）显示（）；
如果（速率=长度= 3）{
s＝10；
g＝0；
$（# G）藏（）；
否则如果（速率= 0 ）{
s＝0；
g＝0；
其他{ }
S = rate.substr（0,1）；
G = rate.substr（1,1）；
}
$（# ）文本（S）；
$（# G ）。文本（，+ g）；
速率的平均值被转换成一种格式，例如：6.8，用于前端显示的平均点。
接下来，当我们的鼠标滑向恒星时，它会产生动画效果。明亮的星星的宽度会随着鼠标的滑动而变化，而且分数也会改变。
$（。big_rate_up）。动画（{宽度：（parseInt（）+ parseInt（g）/ 10）* 14，高度：26 }，1000）；
$（。big_rate跨度）。每个（函数（）{）
$（这）。Mouseover（function（）{）
$（。big_rate_up ），宽度（$（this）。Attr（率）* 14）；
$（# s）。文本（$（this）。Attr（率））；
$（# G ）。文本（）；
}Click（函数（）{）
…Ajax异步提交到后台处理
}）
}）
上面的代码不难理解。需要解释的是，为什么宽度乘以14由于图片的宽度是28，总共有5张图片显示满分为10，单位分数（1分）占宽度（5×28） / 10＝14。
当您单击一个星时，您需要发送一个Ajax请求到后台地址与后台交互。
VaR得分=美元（这）。Attr（率）；
$（# my_rate）。Html（你的分数：+成绩+ ）；
$ ajax（{
类型：邮政
URL
数据：得分=+得分，
成功：函数（MSG）{
如果（MSG = 1）{
$（# my_rate）。Html（你走的太远了！；
}如果（MSG = 2）{
$（# my_rate）。Html（你走的太远！；
其他{ }
get_rate（MSG）；
}
}
}）；
不难看出，当星星点击，前端发送Ajax请求后的后台程序post.php，传递参数评分，即得分。后台程序确定相应的评分，处理它，并发送不同的信息处理过程结束时。
别忘了，当鼠标离开星时，值应该被恢复。
$（。big_rate）。Mouseout（function（）{）
$（# ）文本（S）；
$（# G ）。文本（，+ g）；
$（。big_rate_up）。Width（（parseInt（）+ parseInt（g）/ 10）* 14）；
}）
功能get_rate（）完成后，我们只需要调用可以在加载页时。
$（函数（）{（））
（88）get_rate；
}）；
PHP
post.php程序需要处理：接收点的数量的前端发送，通过cookie来判断用户的IP和评分时间，防止重复评分。
include_once（'connect。php）； / /数据库连接
得分= { 'score美元美元_post}；
如果（isset（$分））{
cookiestr美元= getip（）；
时间=时间（）；
如果（isset（$ _cookie { 'person ' }）{ } _cookie美元'person= = $ cookiestr）{
1；
}
elseif（isset（$ _cookie { 'rate_time ' }）（$时间intval（$ _cookie { 'rate_time ' }））＜600）{
2；
{人}
为查询= mysql_query（更新raty集选民=选民+ 1，共占总+ $ score'where ID = 1 ）；
$query = mysql_query (select * from raty where id=1);
RS = mysql_fetch_array美元（$查询）；
美元美元平均= RS {综合} / $ RS { 'voter}；
美元（$断言，断言=一1）×10；
设置cookie
setcookie（的人
setcookie（rate_time
echo $断言；
}
}
显然，当用户提交分数时，程序将记录用户的IP和时间以防止重复。当用户第一次得分时，程序执行操作，将分数添加到数据表中，并计算返回到前端调用的平均分数。
如何获取用户的IP getip（）方法已经在演示中，这里不做重点介绍，请下载吧。
最后，附加了mysql表结构。
创建表不存在（` raty `
` ID ` int（11）不为空auto_increment，
`选民` int（10）不为空的默认'0'comment得分次，
`总` int（11）不为空的默认'0'comment总得分，
主键（id）
= MyISAM引擎默认的字符集utf8）；
以上是一个星星的实现方法，希望对大家的学习有所帮助。
声明：本文内容用于数码产品信息整理与选购参考，具体价格、库存、售后政策以官方渠道和电商页面实时信息为准。