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

不得不说，老一辈JSer心中，大名鼎鼎的

1K字节以内的Javascript代码，实现一个酷炫的动画、特效、小游戏之类的。

官网从2010年开始征集参赛作品，现在以及办了７年了，还在办。

早年的作品，在现在的浏览器里，有些可能是无法运行的了，能看懂代码的人可以自己改改。时间越近的作品，运行应该都没问题。

随手截几个2016年的作品图你们感受一下：

1. 千奇百怪的石头。鼠标在不同位置就有千变万化的石头，3D旋转. 只用了1023字节

只用了1023字节，传送门:

(此作品吃资源，手机慎入！)

2. 纸牌接龙小游戏，用鼠标玩。只用了 1017 字节

只用了1017 字节，传送门:

3. 有人在森林里放烟花？去看看。3D第一人称视角，方向键操作。

只用了1024 字节，传送门:

4. 魔方3D动画。 只用了1014 字节

只用了1014 字节，传送门:

5. 放烟花，点击屏幕放烟花。只用了 870 字节

只用了 870 字节，传送门:

以上只是随手截了最近的几个作品，早期有更多惊叹之作，有兴趣的可以去官网挖：

--

单行写一个评级组件："★★★★★☆☆☆☆☆".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;
}

封装

分别封装了vuejs版本的vue-tiny-rate和react版本的react-tiny-rate使用详情见github首页，大概功能如下

大小

主题

修改

这应该是东半球最小的评级组件了吧 求star和试用