html 将数字评级转为星级。

Posted 2021-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 将数字评级转为星级。相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Star Rating</title>

<script>
  $.fn.stars = function() {
    return this.each(function(i,e){$(e).html($('<span/>').width($(e).text()*16));});
  };

  $('.stars').stars();
</script>

<style>
  span.stars, span.stars>* {
    display: inline-block;
    background: url(http://i.imgur.com/YsyS5y8.png) 0 -16px repeat-x;
    width: 80px;
    height: 16px;
  }
  span.stars>*{
      max-width:80px;
      background-position: 0 0;
  }
</style>

</head>
<body>
  
  Rating: <span class="stars">4</span>
    
</body>
</html>

以上是关于html 将数字评级转为星级。的主要内容，如果未能解决你的问题，请参考以下文章

jQuery管理多个星级

更改 MUI 评级中的星级数量

如何在 Spring Boot 中使用 JavaScript、jQuery 的 Ajax 成功时将数字转化为星级？

css 支持 - 缺少评级星级bug - 新的

Laravel 中的星级和半星评级