[js] 闪卡 JS 分享(方便在数据库上制作闪卡)

image.png

(() => { // 块菜单配置 const menus = [ { name: "快速制卡", operation: "add", }, { name: "取消制卡", operation: "remove", } ]; // 监听块右键菜单 whenElementExist('#commonMenu .b3-menu__items').then((menuItems) => { const menusReverse = menus.reverse(); observeBlockMenu(menuItems, async (isTargetMenu) => { if (menuItems.querySelector('.operate-my-card')) return; const addAv = menuItems.querySelector('button[data-id="addToDatabase"]'); if (!addAv) return; if (menus.length === 0) return; // 生成块菜单 menusReverse.forEach((menu, index) => { const menuText = menu.name; const menuIcon = '#iconRiffCard'; const menuClass = `operate-my-card-${menus.operation}-${menus.length - index - 1}`; const menuButtonHtml = `<button class="b3-menu__item ${menuClass}"><svg class="b3-menu__icon " style=""><use xlink:href="${menuIcon}"></use></svg><span class="b3-menu__label">${menuText}</span></button>`; addAv.insertAdjacentHTML('afterend', menuButtonHtml); const menuBtn = menuItems.querySelector('.' + menuClass); // 块菜单点击事件 menuBtn.onclick = async () => { window.siyuan.menus.menu.remove(); menuItemClick(menu.operation); }; }); }); }); // 菜单点击事件 async function menuItemClick(operation) { let blocks = []; const selectedRows = document.querySelectorAll('.av__row.av__row--select'); // 遍历每个选中的行 selectedRows.forEach(row => { // 查找当前行下 data-type 为 block-ref 的元素 const blockRefNodes = row.querySelectorAll('[data-type="block-ref"]'); // 遍历这些元素,提取 data-id blockRefNodes.forEach(node => { const dataId = node.dataset.id; if (dataId) { blocks.push(dataId); } }); }); if (operation === 'remove') { await removeFlashcard(blocks); } else { await addFlashcard(blocks); } } // 快速制卡 async function addFlashcard(blockIds) { blockIds = typeof blockIds === 'string' ? [blockIds] : blockIds; const result = await requestApi("/api/riff/addRiffCards", { "blockIDs": blockIds, "deckID": "20230218211946-2kw8jgx" }); if (!result || result.code !== 0) console.error(result); } async function removeFlashcard(blockIds) { blockIds = typeof blockIds === 'string' ? [blockIds] : blockIds; const result = await requestApi("/api/riff/removeRiffCards", { "blockIDs": blockIds, "deckID": "20230218211946-2kw8jgx" }); if (!result || result.code !== 0) console.error(result); } async function requestApi(url, data, method = 'POST') { return await (await fetch(url, { method: method, body: JSON.stringify(data || {}) })).json(); } /** * 监控 body 直接子元素中 #commonMenu 的添加 * @returns {MutationObserver} 返回 MutationObserver 实例,便于后续断开监听 */ function observeBlockMenu(selector, callback) { let isTargetMenu = false; // 创建一个 MutationObserver 实例 const observer = new MutationObserver((mutationsList) => { // 遍历所有变化 for (const mutation of mutationsList) { // 检查是否有节点被添加 if (mutation.type === 'childList' && mutation.addedNodes.length > 0) { // 遍历所有添加的节点 mutation.addedNodes.forEach((node) => { // 检查节点是否是目标菜单 if (isTargetMenu) return; // if (menuItems.querySelector('.add-to-my-av')) return; if (node.nodeType === 1 && node.closest('[data-id="fields"]')) { isTargetMenu = true; // } else if (node.nodeType === 1 && node.closest('[data-id="fields"]')) { // isTargetMenu = true; } if (isTargetMenu) { callback(isTargetMenu); setTimeout(() => { isTargetMenu = false; }, 200); } }); } } }); // 开始观察 body 的直接子元素的变化 observer.observe(selector || document.body, { childList: true, // 监听子节点的添加 subtree: false, // 仅监听直接子元素,不监听子孙元素 }); // 返回 observer 实例,便于后续断开监听 return observer; } // 等待元素出现 function whenElementExist(selector, node) { return new Promise(resolve => { const check = () => { const el = typeof selector === 'function' ? selector() : (node || document).querySelector(selector); if (el) resolve(el); else requestAnimationFrame(check); }; check(); }); } }) ();
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    26457 引用 • 110053 回帖 • 1 关注
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    207 引用 • 1446 回帖
3 操作
Cavendish 在 2025-06-06 23:34:46 更新了该帖
Cavendish 在 2025-06-06 23:31:15 更新了该帖
JeffreyChen 在 2025-06-06 23:07:27 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
请输入回帖内容 ...
Cavendish
理论是灰色的,而生命之树长青 成都

推荐标签 标签

  • 友情链接

    确认过眼神后的灵魂连接,站在链在!

    24 引用 • 373 回帖
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    54 引用 • 37 回帖 • 1 关注
  • SSL

    SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    70 引用 • 193 回帖 • 407 关注
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统(CMS)来使用。WordPress 是一个免费的开源项目,在 GNU 通用公共许可证(GPLv2)下授权发布。

    46 引用 • 114 回帖 • 166 关注
  • Solo

    Solo 是一款小而美的开源博客系统,专为程序员设计。Solo 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    1444 引用 • 10083 回帖 • 507 关注
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    201 引用 • 120 回帖 • 3 关注
  • 互联网

    互联网(Internet),又称网际网络,或音译因特网、英特网。互联网始于 1969 年美国的阿帕网,是网络与网络之间所串连成的庞大网络,这些网络以一组通用的协议相连,形成逻辑上的单一巨大国际网络。

    98 引用 • 367 回帖
  • 星云链

    星云链是一个开源公链,业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎,一个公链的所有功能,它基本都有,比如你可以用它来开发部署你的去中心化的 APP,你可以在上面编写智能合约,发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖 • 1 关注
  • 安全

    安全永远都不是一个小问题。

    199 引用 • 818 回帖
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架,基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 407 关注
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划,本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE,直到 1999 年 Sun 买下此公司。Sun 于次年(2000 年)六月将 NetBeans IDE 开源,直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 711 关注
  • 单点登录

    单点登录(Single Sign On)是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖 • 4 关注
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案,后端采用 Go 编写,采用 MIT 许可证。

    5 引用 • 16 回帖
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞 I/O 模型而得以轻量和高效。

    139 引用 • 269 回帖
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息(如用户名与密码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 36 关注
  • SVN

    SVN 是 Subversion 的简称,是一个开放源代码的版本控制系统,相较于 RCS、CVS,它采用了分支管理系统,它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 698 关注
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    10 引用 • 77 回帖 • 2 关注
  • OnlyOffice
    4 引用 • 20 关注
  • GitHub

    GitHub 于 2008 年上线,目前,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。正因为这些功能所提供的便利,又经过长期的积累,GitHub 的用户活跃度很高,在开源世界里享有深远的声望,并形成了社交化编程文化(Social Coding)。

    209 引用 • 2040 回帖
  • Oracle

    Oracle(甲骨文)公司,全称甲骨文股份有限公司(甲骨文软件系统有限公司),是全球最大的企业级软件公司,总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年,甲骨文已超越 IBM,成为继 Microsoft 后全球第二大软件公司。

    107 引用 • 127 回帖 • 342 关注
  • 七牛云

    七牛云是国内领先的企业级公有云服务商,致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景,七牛先后推出了对象存储,融合 CDN 加速,数据通用处理,内容反垃圾服务,以及直播云服务等。

    29 引用 • 230 回帖 • 125 关注
  • 阿里云

    阿里云是阿里巴巴集团旗下公司,是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务,以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    85 引用 • 324 回帖
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎,它支持自动化部署、大规模可伸缩、应用容器化管理。

    118 引用 • 54 回帖 • 3 关注
  • Outlook
    1 引用 • 5 回帖 • 2 关注
  • Access
    1 引用 • 3 回帖 • 3 关注
  • Unity

    Unity 是由 Unity Technologies 开发的一个让开发者可以轻松创建诸如 2D、3D 多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎。

    25 引用 • 7 回帖 • 118 关注
  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器,在 1999 年被捐献给 ASF(Apache Software Foundation),隶属于 Jakarta 项目,现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范,同时也提供 HTTP 服务,是市场上非常流行的 Java Web 容器。

    162 引用 • 529 回帖 • 9 关注