大家好，我是 Java陈序员。

今天，给大家介绍一个贼好用的导航网站搭建工具，只需通过几步操作，就能搭建出个性化导航网站！

关注微信公众号：【Java陈序员】，获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。

项目简介

Pintree 是一个开源项目，旨在将浏览器书签导出成导航网站。通过简单的几步操作，就可以将书签转换成一个美观且易用的导航页面。

Pintree 支持使用 GitHub Pages 进行部署，无需购买服务器、域名等资源！

因此，只要有一个 Github 账号，就能快速搭建一个导航网站。接下来我们就来部署实现下！

项目部署

步骤一：Fork 项目

1、访问 pintree 项目地址

https://github.com/Pintree-io/pintree

2、Fork 项目到自己的仓库中

步骤二：启用 Github Pages

1、打开 GitHub 账号中 Fork 的 pintree 项目

2、切换到仓库的 Settings 标签页，点击 Pages,在 Source 下拉菜单中，选择 gh-pages 分支，然后点击 Save

3、几分钟后，静态导航网站将会在 https://yourusername.github.io/pintree 上可用

yourusername 是你的 Github 账号，如 https://chenyl8848.github.io/pintree.

这样，一个美观且易用的导航网站就搭建好了！

这时，好奇的小明就会问，要怎么个性化修改配置网站内容呢？别急，继续看步骤三。

步骤三：替换 JSON 文件自定义导航内容

1、pintree 渲染的导航网站内容是基于 json/pintree.json 文件里面的配置信息，我们可以通过修改 pintree.json 文件来自定义导航网站内容

2、打开 pintree.json 文件，并点击修改按钮进入编辑模式

3、在修改前，我们需要先了解下具体的语法规则，一个最小化的规则配置如下：

[

    {

        "//": "folder 表示是一个文件夹，可以配置子模块信息",

        "type": "folder",

        "//": "添加的时间信息",

        "addDate": 1718526477999,

        "//": "标题",

        "title": "Java 陈序员",

        "//": "子模块",

        "children": [

            {

                "//": "link 表示是一个网站链接，最小化的配置单元",

                "type": "link",

                "//": "添加的时间信息",

                "addDate": 1718526687700,

                "//": "网站标题",

                "title": "个人博客网站",

                "//": "网站图标",

                "icon": "https://chencoding.top:8090/_media/logo.png",

                "//": "网站地址",

                "url": "https://chencoding.top/"

            },

            "//": "依此类推",

            {

                "type": "folder",

                "addDate": 1718526865665,

                "title": "编程网站",

                "children": [

                    {

                        "type": "link",

                        "addDate": 1718526707006,

                        "title": "CSDN",

                        "icon": "https://img-home.csdnimg.cn/images/20201124032511.png",

                        "url": "https://www.csdn.net/"

                    },

                    {

                        "type": "link",

                        "addDate": 1718526707006,

                        "title": "掘金",

                        "icon": "https://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg",

                        "url": "https://juejin.cn/"

                    },

                    {

                        "type": "link",

                        "addDate": 1718526707006,

                        "title": "博客园",

                        "icon": "https://www.cnblogs.com/images/logo.svg?v=2SMrXdIvlZwVoB1akyXm38WIKuTHVqvGD0CweV-B6cY",

                        "url": "https://www.cnblogs.com/"

                    }

                ]

            }

        ]

    }

] 

4、文件修改完后，点击 Commit changes 保存

5、过几分钟后，再访问 https://yourusername.github.io/pintree

可以看到，网站的内容变成了个性化的配置信息了。

由于浏览器有缓存的原因，如一开始没有变化，可以使用无痕模式访问或者用其他浏览器访问。

浏览器书签导航

通过前面的内容，我们知道 pintree 只需要一个 JSON 文件，就能搭建出一个导航网站。因此我们可以将浏览器中收藏的书签导出成 JSON 文件，再生成一个静态导航网站！

步骤一：导出浏览器书签

1、安装 Pintree Bookmarks Exporter 插件

安装地址：https://chromewebstore.google.com/detail/pintree-bookmarks-exporte/mjcglnkikjidokobpfdcdmcnfdicojce

2、使用插件导出浏览器书签，并保存 JSON 文件到本地

步骤二：替换 JSON 文件

将 JSON 文件替换到 Fork 项目的 json/pintree.json 文件中，保存成功后过几分钟再访问。

pintree 通过简单的配置，只需要几分钟就能快速搭建出一个导航网站，而且不用提供服务器、域名等资源，是一个非常优秀的开源项目！如果你想搭建一个静态导航网站可以去试试哈。

项目地址：https://github.com/Pintree-io/pintree

最后

推荐的开源项目已经收录到 GitHub 项目，欢迎 Star：

https://github.com/chenyl8848/great-open-source-project

或者访问网站，进行在线浏览：

https://chencoding.top:8090/#/

大家的点赞、收藏和评论都是对作者的支持，如文章对你有帮助还请点赞转发支持下，谢谢！

在前端开发中，实现水平垂直居中一直是个热门话题。随着 CSS Flexbox 布局的普及，开发者们开始更多地使用 justify-content 和 align-items 这两个属性来解决这个问题。

然而，还有一种更加简洁、灵活的方式——使用 margin: auto; 来实现居中以及更多实际场景下的特定效果。让我们一起回顾一下常见方式：justify-content 和 align-items，然后再来探讨一下使用：margin 的优势，以及如何在实际项目中使用它。

一、常见方式：justify-content 和 align-items

1.1 justify-content （用于水平对齐）

justify-content 决定主轴（通常是水平方向）上子元素如何分配空间。常见的取值有：

• flex-start：元素排列在容器的起始位置（默认值）。


• flex-end：元素排列在容器的末尾。


• center：元素在容器内水平居中。


• space-between：第一个元素与容器起点对齐，最后一个元素与容器终点对齐，其他元素之间均匀分布空间。


• space-around：每个元素左右两侧都分配均等的空白区域（元素两边的空隙会有一半分布在两端）。


• space-evenly：所有元素之间、以及与容器两端的空隙都相等。

1.2 align-items（用于垂直对齐）

align-items 决定交叉轴（通常是垂直方向）上子元素如何对齐。常见的取值有：

• stretch：子元素在交叉轴上填满整个容器高度（默认值，前提是子元素没有设置具体的高度）。


• flex-start：子元素在交叉轴的起始位置对齐。


• flex-end：子元素在交叉轴的末端对齐。


• center：子元素在交叉轴上垂直居中对齐。


• baseline：子元素以其文本基线对齐。

1.3 flexbox 的常见用法

下面给出一些常见的 flexbox 的使用案例：

示例 : 公共样式

.container {

    width: 800px;

    height: 200px;

    margin: 50px auto;

    display: flex;

    border: 1px solid black;

    padding: 10px;

    box-sizing: border-box;

}



.box {

    width: 50px;

    height: 50px;

    background-color: lightblue;

    text-align: center;

    line-height: 50px;

    border: 1px solid #333;

}

示例 1: 水平居中 + 垂直居中

<div class="container example-1">

    <div class="box">1</div>

    <div class="box">2</div>

    <div class="box">3</div>

</div>

.example-1 {

    justify-content: center;

    align-items: center;

}

如上图所示，元素在水平和垂直方向都居中了。

示例 2: 水平居中 + 垂直靠顶

<div class="container example-2">

    <div class="box">1</div>

    <div class="box">2</div>

    <div class="box">3</div>

</div>

.example-2 {

    justify-content: center;

    align-items: flex-start;

}

如上图所示，justify-content: center; 使元素在水平方向居中；align-items: flex-start; 使元素垂直方向靠近顶部。

示例 3: 水平等间距 + 垂直居中

<div class="container example-3">

    <div class="box">1</div>

    <div class="box">2</div>

    <div class="box">3</div>

</div>

.example-3 {

    justify-content: space-between;

    align-items: center;

}

如上图所示，justify-content: space-between; 使元素在垂直方向居中；align-items: center; 使元素在水平方向两端对齐。

示例 4: 水平左对齐 + 垂直底部对齐

<div class="container example-4">

    <div class="box">1</div>

    <div class="box">2</div>

    <div class="box">3</div>

</div>

.example-4 {

    justify-content: flex-start;

    align-items: flex-end;

}

如上图所示，justify-content: flex-start; 使元素在水平方向居左；align-items: flex-end; 使元素在垂直方向靠底。

示例 5: 水平等间距 + 垂直拉伸

<div class="container example-5">

    <div class="box">1</div>

    <div class="box">2</div>

    <div class="box">3</div>

</div>

.example-5 {

    height: auto;

    justify-content: space-evenly;

    align-items: stretch;

}

如上图所示，justify-content: space-evenly; 会使元素会在水平方向等间距；如果不设置元素的高度，使其自适应，align-items: stretch; 会使其垂直方向拉伸铺满。

1.4 思考与延伸

但你有没有想过，这些写法是否是最简洁的？能否实现我们日常开发的需求呢？有没有更优雅、更轻量的方案呢？

实际上在很多情况下这两个属性并不能够满足我们的开发需求。

比如我需要实现子元素部分集中的布局：

单纯依靠 justify-content 和 align-items，很难让几个子元素集中在一起。比如我们希望某些元素靠近并且与其他元素保持一定的间距就会比较麻烦了。

此时为了实现这种布局，通常需要结合 flex-grow、margin 或者 space-between，甚至需要使用嵌套的 flex 布局，增加了复杂性。

又或者是等宽子项的平均分布问题：

比如在导航菜单或展示商品卡片时，可能要求子项无论数量多少，都要从左向右均匀分布，并且保持等宽。

通过 justify-content: space-between 或 space-around 可以部分解决这个问题，但是往往会出现无法保证元素从左向右，或者是无法等分的问题。

以及一些其他的情况，如垂直排列的固定间距、复杂的网格布局、混合布局等，justify-content 和 align-items都无法简洁、优雅的解决问题。

二、更优雅的方式：margin

2.1 下使用 margin: auto 使元素居中

其实，Flexbox 布局下还有另一种更加简洁的方法使元素居中——直接使用 margin: auto;。你可能会问，这怎么能居中呢？让我们先看一个例子：

<div class="box">

	<div class="item"></div>

</div>

.box {

    width: 200px;

    height: 100px;

    border: 2px solid #ccc;

    display: flex; /* 启用 Flex 布局 */

    margin: 100px auto;

}



.item {

    background: red;

    width: 50px;

    height: 50px;

    margin: auto; /* 自动分配外边距 */

}

在这个例子中，我们没有使用 justify-content 和 align-items，仅通过设置 .item 元素的 margin: auto;，就实现了水平和垂直居中。

它的工作原理是：在 Flexbox 布局中，margin: auto; 会根据父容器的剩余空间自动调整元素的外边距，直到子元素居中。

在传统布局中，margin: auto; 主要用于水平居中对齐，不适用于垂直居中。因为普通流布局的垂直方向是由文档流控制的，不支持类似 Flexbox 中的自动调整行为。

.container {

    width: 500px;

}



.element {

    width: 200px;

    margin: 0 auto; /* 左右外边距自动分配，实现水平居中 */

}

相比之下，在 Flexbox 布局中，margin: auto; 具有更多的灵活性，可以同时实现水平和垂直居中对齐。

它不仅可以处理水平居中，还可以在 Flexbox 布局下根据剩余空间自动调整外边距，实现完全的居中对齐。

2.2 实现更多实际开发中的布局

示例 1：实现子元素部分集中

在实际开发中，我们常遇到这样一种需求：将元素水平分布在容器内，其中某些元素需要靠近在一起，与其他元素保持一定的自适应距离。

在这种情况下使用 justify-content: space-between 是一种常见的办法，但这种方法也有一定的局限性：每个元素之间平等分配剩余空间，无法实现特定元素之间紧密靠拢。

代码实现：

<div class="container c2">

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

</div>

* {

    margin: 0;

    padding: 0;

}



.container {

    width: 500px;

    background: #eee;

    margin: 50px auto;

    padding: 10px;

    display: flex;

}



.item {

    width: 50px;

    height: 50px;

    border: 1px solid #333;

    box-sizing: border-box;

}



.item:nth-child(odd) {

    background: #046f4e;

}



.item:nth-child(even) {

    background: #d53b3b;

}



.c2 .item:nth-child(2){

    margin: 0 0 0 auto; /* 第二个 item 右对齐 */

}



.c2 .item:nth-child(4){

    margin: 0 auto 0 0; /* 第四个 item 左对齐 */

}

在上述代码中，其实除掉一些基本样式的设置，实现了这个布局的关键代码就2行。

具体来说，.c2 .item:nth-child(2) 的 margin: 0 0 0 auto; 使得第二个 .item 紧贴容器的右边缘，而 .c2 .item:nth-child(4) 的 margin: 0 auto 0 0; 使得第四个 .item 紧贴容器的左边缘。这样就使第二个元素的左侧和第四个元素的右侧将会自适应边距间隔。

因此，我们可以使用 margin 巧妙地通过调整子元素的外边距，实现元素的部分集中和对齐布局。

示例 2：实现等宽子项的平均分布

在很多情况下，我们需要将商品卡片或其他内容等宽地分布在每一行中，使每个子项都具有相同的宽度并且平均分布，每一行都是从左到右。

这种布局通常用于网格展示或商品列表等场景，确保每个子项在视觉上统一且整齐。

在这种情况下直接使用 justify-content 和 align-items 可能会出现以下问题：

1. 使用 space-between 时如果最后一行的元素数量不足以填满整行，剩余的元素会分散到两侧，留出较大的空白区域，导致布局不整齐。
   


2. 使用 space-around 时如果最后一行的元素数量不满，元素会在行中均匀分布，导致它们集中在中间，而不是靠左或对齐其他行。
   
   
   大家在遇到这些情况时是不是就在考虑换用 grid 布局了呢？先别急，我们其实直接通过 margin 就可以直接实现的！

在这里我们可以使用 margin 的动态计算来实现等宽子项的平均分布。

代码实现：

<div class="container c3">

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

</div>

* {

    margin: 0;

    padding: 0;

}



.container {

    width: 500px;

    background: #eee;

    margin: 50px auto;

    padding: 10px;

    display: flex;

    flex-wrap: wrap;

}



.item {

    width: 50px;

    height: 50px;

    border: 1px solid #333;

    box-sizing: border-box;

}



.item:nth-child(odd) {

    background: #046f4e;

}



.item:nth-child(even) {

    background: #d53b3b;

}



.c3 .item {

    --n: 5; /* 每行显示的子项数量 */

    --item-width: 50px; /* 子项宽度 */

    --space: calc(100% / var(--n) - var(--item-width)); /* 计算子项之间的间距 */

    --m: calc(var(--space) / 2); /* 左右间距的一半 */

    margin: 10px var(--m); /* 动态计算左右的间距 */

}

在在上述代码中，除掉基础的样式，实现了这个布局的关键代码仅仅5行。通过动态计算 margin，我们能够简单而有效地实现等宽子项的平均分布，使布局更加简洁明了。

三、总结

在前端开发中，实现各种页面布局一直是一个常见的需求。

传统的做法如使用 justify-content 和 align-items 属性已经被广泛采用，但这种方法有时可能显得不够简洁或灵活。

在适当的情况下直接使用 margin 进行布局是一种更优雅、简洁的替代方案，可以在 Flexbox 布局中有效地实现居中对齐和一些复杂的布局需求。掌握并运用这种方法，可以提高开发效率，并使布局更加优雅。快来玩起来吧！

你是否厌倦了代码中难以阅读和维护的冗长 try-catch 代码块？全新的 ECMAScript 安全赋值运算符 (?= ) 将彻底改变游戏规则！这一突破性的特性简化了错误处理，让你的代码更简洁、更高效。让我们深入了解 ?= 运算符如何彻底改变你的编码体验！

简化代码，轻松处理错误

告别嵌套的 try-catch 混乱

问题： 传统的 try-catch 代码块会导致代码深度嵌套，难以理解和调试。

解决方案： 使用 ?= 运算符，你可以将函数结果转换为一个元组，更优雅地处理错误。如果出现错误，你将得到 [error, null] ，如果一切正常，你将得到 [null, result] 。你的代码将会感谢你！

使用 ?= 之前：

async function fetchData() {

  try {

    const response = await fetch("https://api.example.com/data");

    try {

      const data = await response.json();

      return data;

    } catch (parseError) {

      console.error('Failed to parse JSON:', parseError);

    }

  } catch (networkError) {

    console.error('Network error:', networkError);

  }

}

使用 ?= 之后：

async function fetchData() {

  const [networkError, response] ?= await fetch("https://api.example.com/data");

  if (networkError) return console.error('Network error:', networkError);

  const [parseError, data] ?= await response.json();

  if (parseError) return console.error('Failed to parse JSON:', parseError);

  return data;

}

提升代码清晰度：保持代码线性，简洁易懂

问题： try-catch 代码块会打断代码流程，降低可读性。

解决方案： ?= 运算符使错误处理变得简单直观，保持代码线性，易于理解。

示例：

const [error, result] ?= await performAsyncTask();

if (error) handleError(error); 

标准化错误处理：跨 API 保持一致性

问题： 不同的 API 通常需要不同的错误处理方法，导致代码不一致。

解决方案： ?= 运算符提供了一种统一的错误处理方式，使你的代码在各种 API 中保持一致。

提升安全性：每次都捕获所有错误

问题： 漏掉错误会导致 bug 和潜在的安全问题。

解决方案： ?= 运算符确保始终捕获错误，降低漏掉关键问题的风险。

Symbol.result 背后的奥秘

自定义错误处理变得简单

概述： 实现 Symbol.result 方法的对象可以使用 ?= 运算符定义自己的错误处理逻辑。

示例：

function customErrorHandler() {

  return {

    [Symbol.result]() {

      return [new Error("Custom error message"), null];

    },

  };

}



const [error, result] ?= customErrorHandler();

轻松处理嵌套错误：平滑处理复杂场景

概述： ?= 运算符可以处理包含 Symbol.result 的嵌套对象，使复杂错误场景更容易管理。

示例：

const complexObj = {

  [Symbol.result]() {

    return [

      null,

      { [Symbol.result]: () => [new Error("Nested error"), null] }

    ];

  },

};



const [error, data] ?= complexObj;

与 Promise 和异步函数无缝集成

概述： ?= 运算符专门设计用于与 Promise 和 async/await 无缝协作，简化异步错误处理。

示例：

const [error, data] ?= await fetch("https://api.example.com/data");

使用 using 语句简化资源管理

概述： 将 ?= 运算符与 using 语句结合使用，可以更有效地管理资源。

示例：

await using [error, resource] ?= getResource();

优先处理错误：先处理错误，后处理数据

概述： 将错误放在 [error, data] ?= 结构的第一个位置，确保在处理数据之前先处理错误。

示例：

const [error, data] ?= someFunction();

让你的代码面向未来：简化填充

概述： 虽然无法直接填充 ?= 运算符，但你可以使用后处理器在旧环境中模拟其行为。

示例：

const [error, data] = someFunction[Symbol.result]();

汲取灵感：从 Go、Rust 和 Swift 中学习

概述： ?= 运算符借鉴了 Go、Rust 和 Swift 等语言的先进错误处理实践，这些语言以其强大的错误管理功能而闻名。

当前限制和未来方向

仍在发展： ?= 运算符仍在开发中。改进领域包括：

• 命名： 为实现 Symbol.result 的对象提供更好的术语。


• finally 代码块： 没有新的 finally 代码块语法，但传统用法仍然有效。

总结

安全赋值运算符 (?= ) 将通过使 JavaScript 错误处理更加直观和简洁来彻底改变 JavaScript 错误处理。随着该提案的不断发展，它将有望成为每个 JavaScript 开发人员工具箱中的必备工具。准备迎接更干净、更安全的代码吧！🚀

 5. 第一次代码真正预上线之后，此后更新代码再发布新的包，一半就只需要1~2天

开发过程

先在微信公众号平台开通消息订阅模板，拿到模板ID，前端中再调用 uni.requestSubscribeMessage 传入拿到的模板ID就可以实现消息订阅

5. webSocket。小程序中的树洞评论功能我们选用的是webSocket，小程序中我们没有使用三方库，调用的是uniapp的uni.connectSocket，创建一个webSocket实例，然后处理对应的回调。由于用户一段时间内如果不发送消息，服务端也就没东西推送过来，webSocket自己会断掉。所以我们引入了心跳机制和断线重连机制。但是在做短信重连的时候就发现一个问题：断线重连之后确实是会创建新的实例，心跳包也正常推送给服务端，但是就是接收不到服务端反推回来的东西，后面经过排查，是webSocket实例的onMessage事件应当写在onOpen中，而不是独立写到外面

独立写到外面进行处理就会出现：断线重连之后死活接不到最新的实例返回的消息

这里再次吐槽微信的内容审核机制。原先选用webSocket的原因就是看中了它的实时推送，但是接入了内容审核就变得很抽象，时而秒通过，时而得等一下，这也搞得失去了选用webSocket的意义

6. 请求池。小程序中使用到了tabs组件，当tab在切换过程中，比如tabA切换至tabB，由于需要请求数据，所以页面会有短暂的白屏时间，这里采用的是请求池，在获取第一个tab的列表数据的时候，由请求池顺便把之后的tab的内容也请求回来，此后在进行tab切换时就可以避免白屏，优化用户体验

7. 响应式布局。小程序在个人页模仿了小红书个人页的实现形式，也就是随着页面的滚动，页面的布局（主要是用户头像缩小并由透明度为0逐渐变为1）发生变化。一开始采用的是监听页面scroll事件。但是，scroll涉及大量的计算；后面采用Intersection Observer。但是注意，uniapp不能直接使用这个API，得调用uni.createIntersectionObserver，二者语法差不多
8. 防抖节流的使用。页面滚动加载下一页使用防抖，按钮点击进行节流，常规操作。

大概暂时先能想到这么多，后面有想到再接着补充......

后记

其实校园小程序这个题材市面上早已烂大街，说不上有任何的创新。此前决定搞这个的原因有以下几点：

然后整一个项目跟下来吧，给我的感觉就是：技术重要吗？重要；但也不太重要，技术的重要性就跟我这句废话一样。因为一个东西，推广不起来，没人用，你就没动力去更新、去维护。当然，有没有人用对我们此次的开发来说还不算是必选项。

大家觉得校园社交类的程序还能集成什么功能，也欢迎提出您的宝贵意见

动画在前端开发中是经常遇到的场景之一，加入动画后页面可以极大的提升用户体验。

绝大多数简单的动画场景可以直接通过CSS实现，对于一些特殊场景的动画可能会使用到JS计算实现，通过本文的学习，可以让你在一些看似需要使用JS实现的动画场景，使用纯CSS一样可以实现，并且更方便快捷。

先看一个简单的例子：一个方块的位置随着滑条滑动的位置改变

这个场景实现起来很简单，滑条值改变后，使用JS计算方块应该移动的距离，然后将方块定位到指定位置即可。代码如下：

.box {

height: 50px;

width: 50px;

    background-color: aquamarine;

}

<div class="box">div>

<input type="range" min="0" max="1" step="0.01"/>

现在稍微增加一些动画效果：

• 方块在中间位置时缩放为原来的一半大小


• 方块在中间位置时变成球形


• 方块从红色变为绿色

对于大小和圆角，同样可以使用简单的JS进行计算实现，但是对于颜色变化，使用JS计算将会是一个非常复杂的过程。

先抛开动画跟随滑条运动这个要求，如果使用CSS实现上面从0-1的动画过程是一个很简单的事：

.box {

height: 50px;

width: 50px;

background-color: aquamarine;

transform: translateX(0);

    animation: run 1s linear forwards;

}

@keyframes run {

    0% {

transform: translateX(0) scale(1);

border-radius: 0%;

background: red;

    }

    50% {

transform: translateX(100px) scale(.5);

border-radius: 50%;

    }

    100% {

transform: translateX(200px) scale(1);

border-radius: 0%;

background: green;

    }

}

利用CSS动画帮我们可以很轻松的计算出每个时间点时的状态，现在的问题就变成如何让动画停留在指定的时间点，这就需要使用到动画的两个属性：

annimation-play-state：设置动画是运行还是暂停，有两个属性值runing、paused
annimation-delay：设置动画开始时间的偏移量，如果是正值，则动画会延迟开始；如果是负值(-d)，动画会立即开始，开始位置在动画(d)s时所处的位置。

有了这两个属性，现在将上面的动画停留在50%的位置

假设整个动画过程需要1s，50%的位置则需要将延迟值设置为-0.5s，这样动画就会停留在0.5s的位置。

.box {

height: 50px;

width: 50px;

background-color: aquamarine;

transform: translateX(0);

animation: run 1s -0.5s linear forwards infinite paused;

}

接下来只需要将滑条的值与动画延迟的值关联起来即可，这里可以通过CSS变量来实现：

.box {

--duration: -0.5s;  // 定义延迟变量

height: 50px;

width: 50px;

background-color: aquamarine;

transform: translateX(0);

animation: run 1s var(--duration) linear forwards infinite paused;

}



@keyframes run {

    0% {

transform: translateX(0) scale(1);

border-radius: 0%;

background: red;

    }

    50% {

transform: translateX(100px) scale(.5);

border-radius: 50%;

    }

    100% {

transform: translateX(200px) scale(1);

border-radius: 0%;

background: green;

    }

}

应用场景

利用CSS延迟动画可以轻松实现很多交互场景，例如：跟随鼠标滚动界面发生反馈动画、根据当天时间界面从日出到日落、根据不同分值出现不同表情变化等等。

在业务运营中，倒计时功能是常见的需求，尤其是在限时秒杀等促销活动中。为了确保时间的精确性和一致性，推荐使用服务器时间作为倒计时的基准。那么，如何在前端实现一个既准确又用户友好的倒计时组件的计时逻辑呢？

传统计时器实现

传统计时器实现倒计时的核心原理很简单，它使用了 setInterval 或 setTimeout 的对计时信息进行更新。类似于如下代码：

import React, { useState, useEffect } from 'react';



const CountdownTimer: React.FC<{ duration: number }> = ({ duration }) => {

  const [secondsRemaining, setSecondsRemaining] = useState(duration);



  useEffect(() => {

    const intervalId = setInterval(() => {

      if (secondsRemaining > 0) {

        setSecondsRemaining(secondsRemaining - 1);

      } else {

        clearInterval(intervalId);

      }

    }, 1000);



    // 清理计时器

    return () => clearInterval(intervalId);

  }, [secondsRemaining]);



  return (

    <div>

      倒计时: {secondsRemaining} 秒

    </div>

  );

};



export default CountdownTimer;

上述代码实现很好地实现了倒计时逻辑，但是，还是存在一些问题。我们先来讨论一下浏览器事件循环关于延时队列的优先级。我们知道，为了有效地管理任务和事件，事件循环使用了一个队列系统。事件循环主要包含如下两个队列：

在事件循环中，当一个宏任务执行完毕后，JavaScript 引擎会先清空所有微任务队列中的所有任务，然后再去检查是否需要执行下一个宏任务。这意味着微任务的优先级高于宏任务。

setTimeout 或 setInterval 任务会在指定的延时后被加入到宏任务队列的末尾。当当前的宏任务执行完毕后，如果微任务队列不为空，JavaScript 引擎会先执行完所有微任务，然后才会执行下一个宏任务，也就是 setTimeout 或 setInterval 中的回调函数。因此，setTimeout 或 setInterval 的优先级是相对较低的，因为它们必须等待当前宏任务执行完毕以及所有微任务执行完毕后才能执行。

这种机制可能导致一个问题：如果页面上的其他微任务执行时间较长，倒计时显示可能会出现“跳秒”现象。例如，倒计时可能从 60 秒直接跳到 58 秒，而不是平滑地递减。

requestAnimationFrame 实现

针对上述“跳秒”问题，我们可以改用 requestAnimationFrame 去进行时间的更新逻辑执行。我们将上述代码修改为如下代码：

import React, { useState, useEffect } from 'react';



const CountdownTimer: React.FC<{ duration: number }> = ({ duration }) => {

  const [secondsRemaining, setSecondsRemaining] = useState(duration);



  useEffect(() => {

    let animationFrameId: number;



    const updateTimer = () => {

      if (secondsRemaining > 0) {

        setSecondsRemaining(prev => prev - 1);

        animationFrameId = requestAnimationFrame(updateTimer);

      } else {

        cancelAnimationFrame(animationFrameId);

      }

    };



    // 启动动画帧

    animationFrameId = requestAnimationFrame(updateTimer);



    // 清理动画帧

    return () => cancelAnimationFrame(animationFrameId);

  }, [secondsRemaining]);



  return (

    <div>

      倒计时: {secondsRemaining} 秒

    </div>

  );

};



export default CountdownTimer;

在编写倒计时功能的代码时，我们应当确保在每次更新倒计时秒数后重新启动动画帧。这样做可以避免在动画帧完成后，倒计时逻辑停止更新，导致倒计时在减少一秒后不再继续。同时，为了确保资源的有效管理，我们还需要提供一个函数来清理动画帧，这样当组件不再需要时，可以停止执行动画帧，避免不必要的性能消耗。通过这些措施，我们可以保证倒计时功能的准确性和组件的高效卸载。

优势

要深入理解 requestAnimationFrame 在实现倒计时中的优势，我们首先需要探讨一个问题：在 requestAnimationFrame 中直接修改 DOM 是否合适？requestAnimationFrame 是一个专为动画效果设计的 Web API，它通过在浏览器的下一次重绘之前调用回调函数，帮助我们创建更加流畅且高效的动画。与传统的定时器方法（如 setTimeout 和 setInterval）相比，requestAnimationFrame 提供了更优的性能和更少的资源消耗。

在 requestAnimationFrame 中修改 DOM 是合适的，尤其是当涉及到动画和视觉更新时。这是因为 requestAnimationFrame 的设计初衷就是为了优化动画性能，确保动画的流畅性和效率。总结来说，requestAnimationFrame 相较于传统的计时器方法，具有以下显著优势：

• 性能优化：通过在浏览器的下一次重绘前调用回调，确保动画的流畅性。


• 节能高效：当浏览器标签页不处于活跃状态时，requestAnimationFrame 会自动暂停，从而减少 CPU 的使用，延长设备电池寿命。


• 同步刷新：能够与浏览器的刷新率同步，有效避免动画中的跳帧现象。

因此，requestAnimationFrame 不仅适用于复杂的动画场景，也非常适合实现需要精确时间控制的倒计时功能，提供了一种更加高效和节能的解决方案。

劣势

尽管 requestAnimationFrame 在动画制作方面表现出色，但在实现倒计时功能时，它也存在一些局限性：

• 精确度问题：requestAnimationFrame 并不适用于需要严格时间控制的场景。因为它的调用时机依赖于浏览器的重绘周期，这可能导致时间间隔的不稳定性。


• 管理复杂性：使用 requestAnimationFrame 需要开发者手动管理动画状态和进行资源清理，这增加了实现的复杂度。

正因如此，许多现代前端框架和库，如 ahook 等，在选择实现倒计时功能时，倾向于采用传统的定时器（如 setTimeout 或 setInterval），而非 requestAnimationFrame。这些传统方法虽然可能不如 requestAnimationFrame 在动画性能上优化，但它们提供了更稳定和可预测的时间控制，这对于倒计时这类功能来说至关重要。

总结

实现一个倒计时组件的计时逻辑，我们有如下的一些建议：

总结来说，选择最合适的技术方案取决于你的具体需求。无论是 requestAnimationFrame 还是传统的定时器方法，都有其适用场景和优势。关键在于根据项目需求，做出明智的选择，以实现最佳的用户体验。

抛出痛点

在分配任务时,我们将需求分为三个分支任务,分别由前端A、B、C负责:

相应地,我们创建三个功能分支:

• feature_HCC-111-实现登录功能


• feature_HCC-112-实现用户注册


• feature_HCC-113-实现用户删除

当所有的前端都开发完成了他们的任务，我们就要开始测试小程序了。但是如果按照以往体验版的测试方式，我们就需要排个顺序。比如，前端 A 先将他的小程序设置为体验版，测试把他的功能测试完成之后，再把前端 B 的设置为体验版，以此类推。可以看出真的很麻烦，而且浪费开发时间，我想你肯定不想在开发的时候突然被叫把你的小程序版本设置为体验版。

解决方案

小程序开发助手 这是一个官方提供的小程序，里面有多个版本的小程序可供选择，很方便测试人员的测试，并且也会节省开发人员的时间。点击版本查看就可以看到所有开发人员提交的最近的一次版本了。这样也不用设置体验版就可以测试最新的提交了。

再次抛出痛点

如果前端 A 头上有三个任务单呢？任务单：HCC-121-实现框架搭建，HCC-122-实现在线录屏，HCC-123-实现画板。此时你可能想说, 为啥前端 A 这么多的任务单呢？他命苦啊！

这个时候就需要配合微信的机器人了，我们可以创建多个机器人作为我们提交版本的媒介，这样我们就不受限于微信账号了。

可以在微信的官方文档看到 robot 参数有30个机器人可供选择。

接下来看下微信的机器人的使用方式。

miniprogram-ci文档

微信官方是这样介绍这个工具的; miniprogram-ci 是从微信开发者工具中抽离的关于小程序/小游戏项目代码的编译模块。它其实是一个自动上传代码的工具，可以帮助我们自动化的编译代码并且上传到微信。

下面是一个大概得使用的示例，具体还是要参考官方文档。

const ci = require('miniprogram-ci');

(async () => {

  const project = new ci.Project({

    appid: 'wxsomeappid',

    type: 'miniProgram',

    projectPath: 'the/project/path',

    privateKeyPath: 'the/path/to/privatekey',

    ignores: ['node_modules/**/*'],

  })

  const previewResult = await ci.preview({

    project,

    desc: 'hello', // 此备注将显示在“小程序助手”开发版列表中

    setting: {

      es6: true,

    },

    qrcodeFormat: 'image',

    qrcodeOutputDest: '/path/to/qrcode/file/destination.jpg',

    onProgressUpdate: console.log,

    // pagePath: 'pages/index/index', // 预览页面

    // searchQuery: 'a=1&b=2',  // 预览参数 [注意!]这里的`&`字符在命令行中应写成转义字符`\&`

  })

  console.log(previewResult)

})()

当我们使用这个脚本上传完代码就可以在小程序开发助手或者小程序管理平台看到以下内容。

微信管理后台

小程序开发助手页面

最后

我们可以使用 miniprogram-ci 配合 Jenkins 实现自动化部署，提交完成代码就可以自动部署了。以下是一个 github 的 actions 示例。当然也可以使用别的方式，例如本地提交，Jenkins提交等。

name: Feature Branch CI



on:

  workflow_dispatch:

  push:

    branches: ['feature_*']  # 使用通配符匹配所有feature分支



jobs:

  build_and_deploy:

    runs-on: ubuntu-latest

    steps:

      - name: Checkout Repository

        uses: actions/checkout@v3



      - name: Setup Node.js

        uses: actions/setup-node@v3

        with:

          node-version: '20'

          cache: 'yarn'



      - name: Install dependencies

        run: |

          npm install -g miniprogram-ci cross-env

          yarn install --frozen-lockfile



      - name: Build Package

        run: yarn cross-env ENV=PROD uni build -p mp-weixin --mode PROD



      - name: Create private key file

        run: echo "${{ secrets.PRIVATE_KEY }}" > private.key



      - name: Deploy Package

        env:

          APP_ID: ${{ secrets.APP_ID }}

        run: |

          COMMIT_MESSAGE=$(git log --format=%B -n 1 ${{ github.sha }})

          if [[ $COMMIT_MESSAGE =~ VERSION-([A-Za-z0-9_]+-[A-Za-z0-9_-]+)_DEV ]]; then

            VERSION=${BASH_REMATCH[1]}

            echo "Extracted Version: $VERSION"

            miniprogram-ci preview \

              --pp ./dist/build/mp-weixin \

              --pkp ./private.key \

              --appid $APP_ID \

              --uv "${VERSION}" \

              -r 7 \

              --desc "${COMMIT_MESSAGE}" \

              --upload-description "${COMMIT_MESSAGE}" \

              --enable-es6 true \

              --enable-es7 true \

              --enable-minifyJS true \

              --enable-minifyWXML true \

              --enable-minifyWXSS true \

              --enable-minify true \

              --enable-bigPackageSizeSupport true \

              --enable-autoPrefixWXSS true

          else

            echo "No Version found in commit message. Skipping upload."

          fi

纯手工写一个复选框前端交互，这样可以自由定制自己想要展示的字段和设计风格
写这篇文章主要是抛砖引玉，可能存在槽点，大家多多担待！

1.交互效果展示

用码上掘金在线简单的写了一下:

2.简要说明

$primary-color:#1e80ff; // 主题色-掘金蓝

$primary-disable: #7ab0fd; // 只读或禁用色

可以根据实际需求更改主题色，这里的禁用变量色忘记使用了，sorry！！!

3.布局代码部分

  <!-- page start -->

  <div class="ui-layout-page">

    <h1>请选择关注类型</h1>

    <div class="ui-checkbox">

      <!-- 复选框 item start -->

      <div 

        :class="{'ui-item-box':true,'ui-item-check': i.isCheck,'ui-item-disable':i.disable}" 

        v-for="(i,index) in list" 

        :key="index"

        @click="doCheck(i)">

        <img :src="i.icon"/>

        <span class="span-bar">

          <p class="label-bar">{{i.label}}</p>

          <p class="desc-bar">{{i.desc}}</p>

        </span>

        <!-- 选中标识 start -->

        <span 

          v-if="i.isCheck" 

          class="icon-check">

        </span>

        <!-- 选中标识 end -->

      </div>

      <!-- 复选框 item end -->

    </div>

    <p style="font-size:12px;color:#333">当前选择ids：{{ this.checked.join(',') }}</p>

  </div>

  <!-- page end -->

4.方法和数据结构部分

      checked:['1','2'], 

      list:[

        {

          label:'JYM系统消息',

          id:'1',

          desc:'关注掘金系统消息',

          isCheck:true,

          icon:'https://gd-hbimg.huaban.com/6f3e3ff111c6c98be6785d9eddd5b13f8979ef9d1719e-Xwo8QB_fw658webp', 

          disable:true,

        },{

          label:'JYM后端',

          id:'2',

          isCheck:true,

          desc:'关注后端讨论区新消息',

          icon:'https://gd-hbimg.huaban.com/e2622fe339d655bd17de59fed3b0ae0afb9a16c31db25-YNpnGV_fw658webp', 

          disable:false,

        },{

          label:'JYM前端',

          id:'3',

          isCheck:false,

          desc:'关注前端讨论区新消息',

          icon:'https://gd-hbimg.huaban.com/80765200aa4ffb7683ddea51c3063b0801874fb86324-3OVCQN_fw1200', 

          disable:false,

        },{

          label:'JYM开发工具',

          id:'4',

          isCheck:false,

          desc:'关注开发工具讨论区新消息',

          icon:'https://gd-hbimg.huaban.com/ef1c0e1fb2eae73d674aae791526a331b45b26d2b78e-r4p1aq_fw1200', 

          disable:false,

        }

      ]

      

    /**

     * 复选点击事件 

     * el.disable 禁用状态

     * */ 

    doCheck(el){

      if(el.disable) return   

      if(this.checked.includes(el.id)){ 

        el.isCheck = false

        this.checked=this.checked.filter(item => item !== el.id);

      } else{

        el.isCheck = true

        this.checked.push(el.id)

      }

      this.checked.join(',')

    }

5.样式控制部分

.ui-layout-page{ 

  padding:20px; 

  h1{

    font-size:16px; 

  }



  // 个性化复选框 css start -------------

  .ui-checkbox{

    width:100%;



    $primary-color:#1e80ff; // 主题色-掘金蓝

    $primary-disable: #7ab0fd; // 只读或禁用色



    // 选中状态css

    .ui-item-check{

      border:1px solid $primary-color !important;

      background:rgba($primary-color,0.05) !important;

    }



    // 禁用状态css

    .ui-item-disable{

      border:1px solid #d3d3d3 !important;

      background: #f3f3f3 !important;

      cursor:not-allowed !important;

      .icon-check{

        border-top:20px solid #ccc !important;

      }

      .label-bar{

        color:#777 !important;

      }

      .desc-bar{ 

        color:#a3a3a3 !important;

      }

    }



    // 常规状态css

    .ui-item-box{

      position:relative;

      display:inline-flex;

      align-items: center;

      width:220px;

      height:70px;

      border:1px solid #ccc;

      cursor: pointer; 

      margin:0px 8px 8px 0px;

      border-radius:4px; 

      overflow:hidden;



      &:hover{ 

        border:1px solid $primary-color;

        background:rgba($primary-color,0.05);

      }



      img{

        width:38px;

        height:38px;

        margin-left:15px;

      }

      p{

        margin:0px;

      }

      .span-bar{

        width:0px;

        flex:1 0 auto;

        padding:0px 10px;

        

        .label-bar{

          font-size:14px;

          font-weight:700;  

          margin-bottom:4px;

          color:#333;

        }

        .desc-bar{

          font-size:12px;

          color:#999;

        }

      }

      // 绘制圆角斜三角形

      .icon-check{

        position:absolute;

        width:0px;

        height:0px;

        top:2px;

        right:2px; 

        border-top:20px solid $primary-color;

        border-left:25px solid transparent; 

        border-radius: 5px 3px 5px 0px;

        &:after{

          content:'✓';

          position: relative;

          color:#fff;

          font-size:12px;

          left: -12px;

          top: -26px; 

        }

      }

    }

  }

  // 个性化复选框 css end -------------

}

需求

我们今天来实现一下,点击当前用户的div, 自动滚动到用户在排行榜中的位置.

效果

大家可以先看一下下面的GIF, 所实现的效果.

实现

1. 准备DOM 结构

首先,我们在进行列表建设的时候, 需要准备好一个数据. 因为此处我们是使用的vue3来进行编写. 对于列表我们使用的是v-for列表渲染来做的. 在渲染的时候, 我们需要给每一个列表项(当前就是每一个用户项)添加一个自定义属性. 具体的话, 可以看下 下方的关键代码.

核心代码就是

 <div v-for="(item, index) in rankingData" :key="item.user.id" :data-key="item.user.id"

 </div>

因为数据是后端返回的, 是包含的user_id,而且这个user_id 是不可能重复的. 我们只要保证每个列表的自定义的属性是唯一的即可.

2. 绑定方法,实现方法

接下来,我们需要考虑的是,在点击的时候,如何获取到当前的dom. 这对我们目前来说就很容易了, 因为我们可以根据据user_id 拿到我们当前点击的dom.

添加一个方法

<!-- 当前用户排名情况 -->

        <div class="text-white w-[100%] ...."  @click="scrollToCurrentRankingPosition(userId)">

实现方法.

第一步: 拿到rankingList的dom实例.

这里我们通过vue3提供ref拿到dom. 可以看下
模板引用

<div v-else class=" overflow-auto bg-white" ref="rankingList">



const rankingList = ref(null);

第二步: 根据userId获取到具体的DOM

const currentItem = rankingList.value.querySelector(`[data-key="${id}"]`);

第三步: 使用scrollIntoView方法滚动视图到当前选中的元素

 // 平滑滚动到当前元素

  currentItem.scrollIntoView({ behavior: 'smooth', block: 'center' });

scrollIntoView方法 讲解:

• Element 接口的 scrollIntoView() 方法会滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见。

简单来讲就是被调用的者的元素出现在用户的视线里面.
scrollIntoView() 方法有三种调用形式：

参数

• alignToTop（可选）：布尔值，控制元素滚动到顶部还是底部对齐。默认为 true（顶部对齐）。


• scrollIntoViewOptions（可选实验性）：对象，包含以下属性：
  
  
  
  
  • behavior：定义滚动行为是平滑动画还是立即发生。可取值有 smooth（平滑动画）、instant（立即发生）或 auto（由CSS的 scroll-behavior 属性决定）。
  
  
  • block：定义垂直方向的对齐方式，可取值有 start、center、end 或 nearest。默认为 start。
  
  
  • inline：定义水平方向的对齐方式，可取值有 start、center、end 或 nearest。默认为 nearest。
  
  
  
  

目前我们实现了效果.

但是我们发现,还可以继续改进, 目前我们虽然滚动到了屏幕的中间, 但是我们很难去发现. 所以我们可以继续完善一下这个方法. 就是滚动到视图的中间的同时高亮选中的DOM.

3. 额外扩展, 高亮当前的元素

定义一个两个方法,一个用于应用样式, 一个应用于移除样式.

const applyHighlightStyles = (element) => {

    element.style.transition = 'background-color 1s ease, border-color 1s ease';

    element.style.border = '1px solid transparent'; // 预定义边框样式

    element.style.borderColor = '#006cfe'; // 设置边框颜色

    element.style.backgroundColor = '#cfe5ff'; // 设置背景色为浅蓝色

};



const removeHighlightStyles = (element) => {

    element.style.backgroundColor = ''; // 移除背景色

    element.style.borderColor = 'transparent'; // 移除边框颜色

};

然后再在我们之前的方法的后面加入代码

            // 设置高亮显示的样式

            applyHighlightStyles(currentItem);



            // 清除之前的定时器（如果有）

            if (currentItem._highlightTimer) {

                clearTimeout(currentItem._highlightTimer);

            }



            // 设置定时器，2秒后移除高亮显示

            currentItem._highlightTimer = setTimeout(() => {

                removeHighlightStyles(currentItem);

                currentItem._highlightTimer = null;

            }, 2000);

然后在组件卸载前记得清除定时器.

onUnmounted(() => {

    if (rankingList.value) {

        // 遍历所有项目，清除定时器

        rankingList.value.querySelectorAll('[data-key]').forEach(item => {

            if (item._highlightTimer) {

                clearTimeout(item._highlightTimer);

                item._highlightTimer = null;

            }

        });

    }

});

效果:

总结

整体下来的思路就是:

哈喽哈喽🌈

哈喽大家好！我是小周🤪🤪🤪。相信各位前端小伙伴都知道可以用window.print()这个方法来调用打印机实现打印功能，但是直接下载功能window.print()还是无法实现的。今天我来介绍另外一种实现方式，真正的开箱即用，既可以实现打印和直接下载，也可以防止内容截断。

技术栈

1、html2canvas

html2canvas 一个可以将html转换成canvas的三方库

2、jsPDF

jsPDF 生成pdf文件的三方库

一些用到的方法介绍

1、canvas.getContext('2d').getImageData()

canvas.getContext('2d').getImageData() 是 HTML5 Canvas API 中用于获取指定区域的像素数据的方法。它返回一个 ImageData 对象，该对象包含了指定区域中每个像素的颜色和透明度信息。

canvas.getContext('2d').getImageData(x, y, width, height)

参数说明：

• x: 采集的图像区域的左上角的水平坐标。


• y: 采集的图像区域的左上角的垂直坐标。


• width: 采集的图像区域的宽度（以像素为单位）。


• height: 采集的图像区域的高度（以像素为单位）。

返回值：

返回一个 ImageData 对象，包含以下属性：

• width: 图像数据的宽度。


• height: 图像数据的高度。


• data: 一个 Uint8ClampedArray 类型的数组，存储了区域中每个像素的颜色和透明度信息。每个像素占用 4 个元素，分别对应：
  
  
  
  
  • data[n]: 红色通道的值（0 到 255）
  
  
  • data[n+1]: 绿色通道的值（0 到 255）
  
  
  • data[n+2]: 蓝色通道的值（0 到 255）
  
  
  • data[n+3]: 透明度（alpha）通道的值（0 到 255），255 表示完全不透明，0 表示完全透明。
  
  
  
  

代码实现

1、设置 DomToPdf 类

export class DomToPdf {



_rootDom = null 

_title = 'pdf' //生成的pdf标题

_a4Width = 595.266 

_a4Height = 841.89 

_pageBackground = 'rgba(255,255,255)' //页面背景色

_hex = [0xff, 0xff, 0xff] //用于检测分页的颜色标识



//初始化状态

constructor(rootDom, title, color = [255, 255, 255]) { 

    this._rootDom = rootDom 

    this._title = title 

    this._pageBackground = `rgb(${color[0]},${color[1]},${color[2]})`

    this._hex = color 

}



}

2、设置 pdf的生成函数

  async savePdf() {

    const a4Width = this._a4Width

    const a4Height = this._a4Height

    const hex = this._hex



    return new Promise(async (resolve, reject) => {

      try {

        const canvas = await html2canvas(this._rootDom, {

          useCORS: true,

          allowTaint: true,

          scale: 0.8,

          backgroundColor: this._pageBackground,

        })

        const pdf = new jsPDF('p', 'pt', 'a4')

        let index = 1,

          canvas1 = document.createElement('canvas'),

          height

        let leftHeight = canvas.height



        let a4HeightRef = Math.floor((canvas.width / a4Width) * a4Height)

        let position = 0

        let pageData = canvas.toDataURL('image/jpeg', 0.7)

        pdf.setDisplayMode('fullwidth', 'continuous', 'FullScreen')



        function createImpl(canvas) {

          if (leftHeight > 0) {

            index++

            let checkCount = 0

            if (leftHeight > a4HeightRef) {

              let i = position + a4HeightRef

              for (i = position + a4HeightRef; i >= position; i--) {

                let isWrite = true

                for (let j = 0; j < canvas.width; j++) {

                  let c = canvas.getContext('2d').getImageData(j, i, 1, 1).data

                  if (c[0] !== hex[0] || c[1] !== hex[1] || c[2] !== hex[2]) {

                    isWrite = false

                    break

                  }

                }

                if (isWrite) {

                  checkCount++

                  if (checkCount >= 10) {

                    break

                  }

                } else {

                  checkCount = 0

                }

              }

              height =

                Math.round(i - position) || Math.min(leftHeight, a4HeightRef)

              if (height <= 0) {

                height = a4HeightRef

              }

            } else {

              height = leftHeight

            }

            canvas1.width = canvas.width

            canvas1.height = height

            let ctx = canvas1.getContext('2d')

            ctx.drawImage(

              canvas,

              0,

              position,

              canvas.width,

              height,

              0,

              0,

              canvas.width,

              height,

            )

            if (position !== 0) {

              pdf.addPage()

            }

            pdf.setFillColor(hex[0], hex[1], hex[2])

            pdf.rect(0, 0, a4Width, a4Height, 'F')

            pdf.addImage(

              canvas1.toDataURL('image/jpeg', 1.0),

              'JPEG',

              0,

              0,

              a4Width,

              (a4Width / canvas1.width) * height,

            )

            leftHeight -= height

            position += height

            if (leftHeight > 0) {

              setTimeout(createImpl, 500, canvas)

            } else {

              resolve(pdf)

            }

          }

        }

        if (leftHeight < a4HeightRef) {

          pdf.setFillColor(hex[0], hex[1], hex[2])

          pdf.rect(0, 0, a4Width, a4Height, 'F')

          pdf.addImage(

            pageData,

            'JPEG',

            0,

            0,

            a4Width,

            (a4Width / canvas.width) * leftHeight,

          )

          resolve(pdf)

        } else {

          try {

            pdf.deletePage(0)

            setTimeout(createImpl, 500, canvas)

          } catch (err) {

            reject(err)

          }

        }

      } catch (error) {

        reject(error)

      }

    })

  }

3、设置承接pdf的方法

//直接下载pdf

  async downToPdf(setLoadParent) {

    const newPdf = await this.savePdf()

    const title = this._title

    newPdf.save(title + '.pdf')

    setLoadParent(false)

  }



//通过构造链接的形式去跳转打印页面

  async printToPdf(setLoadParent) {

    const newPdf = await this.savePdf()

    const pdfBlob = newPdf.output('blob')

    const pdfUrl = URL.createObjectURL(pdfBlob)

    setLoadParent(false)

    window.open(pdfUrl)

  }

完整代码

import html2canvas from 'html2canvas'

import jsPDF from 'jspdf'

export class DomToPdf {

  _rootDom = null

  _title = 'pdf'

  _a4Width = 595.266

  _a4Height = 841.89

  _pageBackground = 'rgba(255,255,255)'

  _hex = [0xff, 0xff, 0xff]



  constructor(rootDom, title, color = [255, 255, 255]) {

    this._rootDom = rootDom 

    this._title = title

    this._pageBackground = `rgb(${color[0]},${color[1]},${color[2]})`

    this._hex = color

  }

  async savePdf() {

    const a4Width = this._a4Width

    const a4Height = this._a4Height

    const hex = this._hex



    return new Promise(async (resolve, reject) => {

      try {

        const canvas = await html2canvas(this._rootDom, {

          useCORS: true,

          allowTaint: true,

          scale: 0.8,

          backgroundColor: this._pageBackground,

        })

        const pdf = new jsPDF('p', 'pt', 'a4')

        let index = 1,

          canvas1 = document.createElement('canvas'),

          height

        let leftHeight = canvas.height



        let a4HeightRef = Math.floor((canvas.width / a4Width) * a4Height)

        let position = 0

        let pageData = canvas.toDataURL('image/jpeg', 0.7)

        pdf.setDisplayMode('fullwidth', 'continuous', 'FullScreen')



        function createImpl(canvas) {

          if (leftHeight > 0) {

            index++

            let checkCount = 0

            if (leftHeight > a4HeightRef) {

              let i = position + a4HeightRef

              for (i = position + a4HeightRef; i >= position; i--) {

                let isWrite = true

                for (let j = 0; j < canvas.width; j++) {

                  let c = canvas.getContext('2d').getImageData(j, i, 1, 1).data

                  if (c[0] !== hex[0] || c[1] !== hex[1] || c[2] !== hex[2]) {

                    isWrite = false

                    break

                  }

                }

                if (isWrite) {

                  checkCount++

                  if (checkCount >= 10) {

                    break

                  }

                } else {

                  checkCount = 0

                }

              }

              height =

                Math.round(i - position) || Math.min(leftHeight, a4HeightRef)

              if (height <= 0) {

                height = a4HeightRef

              }

            } else {

              height = leftHeight

            }

            canvas1.width = canvas.width

            canvas1.height = height

            let ctx = canvas1.getContext('2d')

            ctx.drawImage(

              canvas,

              0,

              position,

              canvas.width,

              height,

              0,

              0,

              canvas.width,

              height,

            )

            if (position !== 0) {

              pdf.addPage()

            }

            pdf.setFillColor(hex[0], hex[1], hex[2])

            pdf.rect(0, 0, a4Width, a4Height, 'F')

            pdf.addImage(

              canvas1.toDataURL('image/jpeg', 1.0),

              'JPEG',

              0,

              0,

              a4Width,

              (a4Width / canvas1.width) * height,

            )

            leftHeight -= height

            position += height

            if (leftHeight > 0) {

              setTimeout(createImpl, 500, canvas)

            } else {

              resolve(pdf)

            }

          }

        }

        if (leftHeight < a4HeightRef) {

          pdf.setFillColor(hex[0], hex[1], hex[2])

          pdf.rect(0, 0, a4Width, a4Height, 'F')

          pdf.addImage(

            pageData,

            'JPEG',

            0,

            0,

            a4Width,

            (a4Width / canvas.width) * leftHeight,

          )

          resolve(pdf)

        } else {

          try {

            pdf.deletePage(0)

            setTimeout(createImpl, 500, canvas)

          } catch (err) {

            reject(err)

          }

        }

      } catch (error) {

        reject(error)

      }

    })

  }

  async downToPdf(setLoadParent) {

    const newPdf = await this.savePdf()

    const title = this._title

    newPdf.save(title + '.pdf')

    setLoadParent(false)

  }



  async printToPdf(setLoadParent) {

    const newPdf = await this.savePdf()

    const pdfBlob = newPdf.output('blob')

    const pdfUrl = URL.createObjectURL(pdfBlob)

    setLoadParent(false)

    window.open(pdfUrl)

  }

结束

好喽，开箱即用的打印和下载功能的实现就完成了。欢迎大家阅读，我是小周🤪🤪🤪

<div>

      <div class="animate-me">

        letterize.js&anime.js

      div>

      <div class="animate-me">

        anime.js&letterize.js

      div>

      ......

      <div class="animate-me">

        letterize.js&anime.js

      div>

      <div class="animate-me">

        anime.js&letterize.js

      div>

    div>

const letterize = new Letterize({

  targets: ".animate-me"

});

const animation = anime.timeline({

  targets: letterize.listAll,

  delay: anime.stagger(100, {

    grid: [letterize.list[0].length, letterize.list.length],

    from: "center"

  }),

  loop: true

});

3. 开始执行动画，首先设置 「文案呈圆环状扩散开，扩散的同时文字变小」，这里其实就是将字母的大小缩小。

animation

  .add({

    scale: 0.5

  })

此时的效果如下所示：

4. 继续处理下一步动画，「文字之间的间距从中心逐个扩散开，间距变大」，这里处理的其实就是将字母的间距加大，通过设置 letterSpacing 即可，代码如下：

animation

  .add({

    scale: 0.5

  })

  .add({

    letterSpacing: "10px"

  })

此时的效果如下所示：

5. 后面还有2个步骤，「文案呈圆环状扩散开，扩散的同时文字变大；文字之间的间距从中心逐个聚拢，间距变小」，换做上面的思路也就是将文字变大和将文字间距变小，增加相应的代码如下：

  .add({

    scale: 1

  })

  .add({

    letterSpacing: "6px"

  });

在线预览

码上掘金地址：

最后

本文通过 Letterize.js + Anime.js 实现了一个很炫酷的文字动画效果，文字的每个字符呈波浪式的扩散式展开和收起。anime.js还有很多的参数可以尝试，有兴趣的朋友可以尝试探索看看~

看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～

专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）

参考

动画效果发布者 Wojciech Krakowiak ：https://codepen.io/WojciechWKROPCE/pen/VwLePLy

如图所示，这是一个很炫酷的按钮悬浮特效，鼠标悬停时，按钮呈现发光的效果，周边还出现类型萤火虫的效果。本文将解析如何实现这个按钮特效，基于这个动图可以分析出需要实现的要点：

• 有一个跟随鼠标移动的圆点


• 按钮悬停时有高亮发光的效果


• 悬停时按钮周边的萤火中效果

实现过程

跟随鼠标移动的圆点

这个部分需要基于JS实现，但不是最主要的实现代码

如果单纯做一个跟随鼠标移动的点很简单，只需要监听鼠标事件获取坐标实时更新到需要移动的元素上即可。但是仔细看这里的效果并不是这样，圆点是跟随在鼠标后面，鼠标移动停止后圆点才会和鼠标重合。这里是使用了一个名为 Kinet 的库来实现的这个鼠标移动动画效果，具体实现如下：

• acceleration: 加速度，控制动画的加速程度。


• friction: 摩擦力，控制动画的减速程度。


• names: 定义了两个属性 x 和 y，用于表示动画的两个维度。

 var kinet = new Kinet({

   acceleration: 0.02,

   friction: 0.25,

   names: ["x", "y"],

 });

2. 通过 document.getElementById 获取页面中 ID 为 circle 的元素，以便后续进行动画处理。