您的位置：首页 > 移动开发 > WebAPP

通用商品/商家星星评价HTML-支持webapp使用

2015-11-19 11:03 453 查看

代码使用备注：

1. jquery-1.8.3.min.js（自备）

2.star_empty.png为空星星 star_full.png为亮星星（自备）

3.div的样式可以自己调整（自备）

4.添加初始化代码，可支持多个评论项，eg：口味、环境、物流、服务等

$(function(){

initEvent('mydiv1');

initEvent('mydiv2');

});

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="content-script-type"content="text/javascript">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<title></title>
<script type="text/javascript">
var isclick = false;
function change(mydivid,num) {
if (!isclick) {
var tds = $("#"+mydivid+" ul li");
for (var i = 0; i < num; i++) {
var td = tds[i];
$(td).find("img").attr("src","images\/star_full.png");
}
var tindex = $("#"+mydivid).attr("currentIndex");
tindex = tindex==0?0:tindex+1;
for (var j = num; j < tindex; j++) {
var td = tds[j];
$(td).find("img").attr("src","images\/star_empty.png");
}
$("#"+mydivid).attr("currentIndex",num);
}
}
function repeal(mydivid,num) {
if (!isclick) {
var tds = $("#"+mydivid+" ul li");
var tindex = $("#"+mydivid).attr("currentIndex");
tindex = tindex==0?0:tindex+1;
for (var i = tindex; i < num; i++) {
var td = tds[i];
$(td).find("img").attr("src","images\/star_empty.png");
}
$("#"+mydivid).attr("currentIndex",num);
}
}
function change1(mydivid,num) {
if (!isclick) {
change(mydivid,num);

}
else {
alert("Sorry,You had clicked me!");
}
}
$(function(){
initEvent('mydiv1');
initEvent('mydiv2');
});
function initEvent(mydivid) {
//var tableWjx =$("#tableWjx ul li");
// var items= tableWjx.getElementsByTagName("ul");

var tds = $("#"+mydivid+" ul li");
for (var i = 0; i < tds.length; i++) {
var td = tds[i];
$(td).live('mouseover',function(){var num = $(this).attr("num");change(mydivid,num);});
//$(td).live('mouseout',function(){var num = $(this).attr("num");repeal(mydivid,num);});
$(td).live('click',function(){var num = $(this).attr("num");change1(mydivid,num);});
}
}
</script>
<style type="text/css">
ul{
list-style-type: none;
}
.star_ul li{
float:left;
}
</style>
</head>
<body>
<div id="mydiv1" currentIndex="0"><ul class="star_ul"><li num="1"><img src="images/star_empty.png" class="xing_hui"/></li><li num="2"><img src="images/star_empty.png" class="xing_hui"/></li><li num="3"><img src="images/star_empty.png" class="xing_hui"/></li><li num="4"><img src="images/star_empty.png" class="xing_hui"/></li><li num="5"><img src="images/star_empty.png" class="xing_hui"/></li></ul></div>
<div id="mydiv2" currentIndex="0"><ul class="star_ul"><li num="1"><img src="images/star_empty.png"/></li><li num="2"><img src="images/star_empty.png"/></li><li num="3"><img src="images/star_empty.png"/></li><li num="4"><img src="images/star_empty.png"/></li><li num="5"><img src="images/star_empty.png"/></li></ul></div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5 css javascript web app 评论

相关文章推荐

新的分享

章节导航