saber 酱的抱枕

Fly me to the moon

09/23
2016
学习

网页评分工具demo

saber 撰写 无回复 1,761次查看

给文章或其他作品打分是很常见的功能，不过我之前做的网站里都没用到这个功能，于是今天自己写了个demo。

可以设置任意颗星星数；
可以设置一开始显示评分还是不显示评分；
每个人只能打分一次。
这个demo一星一分。


代码如下：

<div class="rate" data-value="0">
	<i title="1分"></i><i title="2分"></i><i title="3分"></i><i title="4分"></i><i title="5分"></i><i title="6分"></i><i title="7分"></i><i title="8分"></i><i title="9分"></i><i title="10分"></i>
</div>
<style type="text/css">
	.rate{height: 26px;}
	.rate i{display: inline-block;width: 26px;height: 100%;background-image: url(/f/pixiv_star.png);cursor: pointer;background-position: 0 0;}
    .rate .bgNone{background-position: 0px 0px;}
    .rate .bgHover{background-position: -26px 0px;}
    .rate .bgSure{background-position: -52px 0px;}
	.cursordef i{cursor:default;}
</style>
<script src="ratev0.1.js"></script>

外层div有个data-value属性，表示预设评分。设置为0则表示不显示这幅作品的评分，星星都不亮；大于0则为当前得分，并且会亮起对应的星星。
里面的每个i标签是一个星星，数量可以随意调整。
css样式里设置宽高来布局，并设置背景图片。把三种星星样式做到一张图片上，使用背景定位让三个样式显示三种背景图片。分别是bgNone（这个星星不亮的图案），bgHover（鼠标经过时星星亮起来），bgSure（这个星星有评分）。
当用户点击了一个星星后，会产生评分，之后就不能再点击了。

网页评分工具demo

12/3
2015
学习

使用js打印评分

saber 撰写 无回复 1,798次查看
四星：
二星：
三星：
零星：

<div class="rating" date-rating="4">四星：</div>
<div class="rating" date-rating="2">二星：</div>
<div class="rating" date-rating="3">三星：</div>
<div class="rating" date-rating="0">零星：</div>
<script type="text/javascript">
  function getRating(rating) {
      if(rating > 5 || rating < 0) throw new Error('数字不在范围内');
      return '★★★★★☆☆☆☆☆'.substring(5 - rating, 10 - rating );
  }
  var ratingwrap=document.getElementsByClassName("rating");
  for (var i = 0; i < ratingwrap.length; i++) {
    ratingwrap[i].innerHTML=getRating(ratingwrap[i].getAttribute("date-rating"));
  };
</script>

前几天在知乎上看到了一些巧妙的JavaScript代码，这个单独记录一下。设想满星5星的评分（也可以是10星，自己改代码），用js截取字符打印出评分。

我们一般的思路是先打印实心星星，然后补满空心星星。然而这个代码（getRating函数）把实心星星和空心星星放一起，一次截取完成。突破性的思维，令人不得不惊叹。

如果有半分制，又该怎么做呢？

嗯，似乎还找不到半实心半空心的五角星字符 ←_←

使用js打印评分