JavaScript 项目

rough

第 73 期 Star 17.1k Watch 160 Fork 551
手绘风格的图形库。可以让你用素描、类似手绘的风格来绘制图形

const rc = rough.canvas(document.getElementById('canvas'));
rc.rectangle(10, 10, 200, 200); // x, y, width, height

cnchar

第 73 期 Star 1.2k Watch 19 Fork 123 中文
小巧的汉字处理 JS 库。支持简体字拼音、多音字、笔画数等功能

let spell = cnchar.spell('你好');
let stroke = cnchar.stroke('你好');
console.log(spell, stroke);

nexe

第 73 期 Star 11.3k Watch 166 Fork 507
可将 Node.js 应用程序，打包成一个可执行文件的命令行工具

rubiks-cube

第 73 期 Star 225 Watch 4 Fork 24 中文
使用 Three.js 制作的 3D 魔方。支持自定义魔方阶数，在线尝试

nanoid

第 73 期 Star 17.2k Watch 140 Fork 617
用于生成随机 ID 的 JS 库

• 小巧：无依赖，仅 130 字节
• 快速：比 UUID 快 60%
• 安全：加密的强随机 API，可在集群中使用
• 紧凑：它使用比 UUID 更大的字母表
• 易用：已移植到 20 多种编程语言

const { nanoid } = require('nanoid');
nanoid(); //=> "U9HDHNW3BkWMEd6GV_QPa"

tinykeys

第 72 期 Star 2.9k Watch 18 Fork 55
极小的键盘事件监听库

import tinykeys from "tinykeys"

tinykeys(window, {
  "Shift+D": () => {
    alert("The 'Shift' and 'd' keys were pressed at the same time")
  },
  "y e e t": () => {
    alert("The keys 'y', 'e', 'e', and 't' were pressed in order")
  },
  "$mod+KeyD": () => {
    alert("Either 'Control+d' or 'Meta+d' were pressed")
  },
})

reveal.js

第 72 期 Star 59.7k Watch 1.7k Fork 16.2k
一款 HTML 演示框架。让你摆脱传统死板的 PPT 制作方法，可以方便地使用 HTML、Markdown 语言制作 PPT

chameleon

第 72 期 Star 8.9k Watch 239 Fork 679 中文
一端所见即多端所见。适应不同环境的跨端整体解决方案，支持 Web、小程序、快应用 等平台

lax.js

第 72 期 Star 9.0k Watch 100 Fork 461
用于滚动时创建平滑和好看动画的库。简单轻量仅 4KB 大小，但功能齐全且灵活

<!-- JS -->
<script>
  window.onload = function () {
    lax.init()

    // Add a driver that we use to control our animations
    lax.addDriver('scrollY', function () {
      return window.scrollY
    })

    // Add animation bindings to elements
    lax.addElements('.selector', {
      scrollY: {
        translateX: [
          ["elInY", "elCenterY", "elOutY"],
          [0, 'screenWidth/2', 'screenWidth'],
        ]
      }
    })
  }
</script>

<!-- HTML -->
<div class="selector">Hello</div>

charts

第 72 期 Star 14.3k Watch 225 Fork 689
简单、零依赖、响应式的 SVG 图表库

const data = {
    labels: ["12am-3am", "3am-6pm", "6am-9am", "9am-12am",
        "12pm-3pm", "3pm-6pm", "6pm-9pm", "9am-12am"
    ],
    datasets: [
        {
            name: "Some Data", chartType: "bar",
            values: [25, 40, 30, 35, 8, 52, 17, -4]
        },
        ...
]}

const chart = new frappe.Chart("#chart", 
{   // or a DOM element,
    // new Chart() in case of ES6 module with above usage
    title: "My Awesome Chart",
    data: data,
    type: 'axis-mixed', // or 'bar', 'line', 'scatter', 'pie', 'percentage'
    height: 250,
    colors: ['#7cd6fd', '#743ee2']
})

---