短小却令人惊叹的 JavaScript 代码？

最新推荐文章于 2023-03-16 17:49:04 发布

夜幕下的手指

最新推荐文章于 2023-03-16 17:49:04 发布

阅读量344

点赞数

分类专栏： java

java 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种极简的评级组件实现方案，通过CSS控制width和overflow支持小数评分，不仅适用于整数，2.5、3.8等小数评分亦可轻松实现。组件已封装为Vue和React版本，提供了多种主题和大小选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作者：蜗牛老湿
链接：https://www.zhihu.com/question/46943112/answer/113583615
来源：知乎

单行写一个评级组件："★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);

-----------------------------------分隔符------------------------------- 上面是原答案，补充一下说说怎么用吧，定义一个变量rate是1到5的值，然后执行上面代码，看图

-----------------------------------分隔符-------------------------------

评论里很多人说不能小说，这几天比较闲，把支持小数的也实现了一下，具体功能见专栏文章

构建东半球最小的评级组件

思路

支持小数其实很简单，先用☆☆☆☆☆当背景，然后把★★★★★放在上层，通过控制width+overflow就可以轻松支持小数字，不仅仅是2.5, 3.8也支持毕竟我们宽度用em单位

实现

思路有了，代码就脱口而出了

<div>☆☆☆☆☆</div>

css

div {
  position:relative;
}
div::after{
  content:'★★★★★';
  position:absolute;
  top:0;
  left:0;
  width:2.5em;
  overflow: hidden;
}

润色一下

由于是文字，加上颜色，动画什么的也很easy

div {
  position:relative;
}
div:after{
  content:'★★★★★';
  position:absolute;
  top:0;
  left:0;
  width:0;
  overflow: hidden;
  transition: width 2s;
  -moz-transition: width 2s;
  -webkit-transition: width 2s;
  -o-transition: width 2s;

}
div:hover:after{
  width:3.5em;
}