作者： 徐小夕

转发链接：https://mp.weixin.qq.com/s/XHwOHf498t6ZNfDLiwZ6Xg

前言

最近在做季度总结和技术分享,所以需要做个PPT, 来回顾这半年来的技术贡献. 但苦于mac上运行PPT那感人的流畅度, 成功的激起了笔者的强迫症, 所以索性想办法通过技术的手段来做个网页版PPT, 这个时候笔者发现了reveal.js: 一个使用 HTML 语言制作演示文稿的 Web 框架，支持插入多种格式的内容，并以类似 PPT 的形式呈现. 花了15分钟系统的调研了一下, 觉得基本满足技术分享类PPT的要求, 所以决定采用该方案来实现我的网页版PPT. 这里列一下笔者的技术调研方法论, 供大家参考:

# 前言

图上那些类似于星座图的点和线，是由vue-particles生成的，不仅自己动，而且能与用户鼠标事件产生互动。

一直中意这种动态插件，今天有时间，迫不及待试了一波~

大写的NICE~

使用教程：

关键词：前端 明水印 暗水印

明水印和暗水印的区别

前端水印可以分为明水印和暗水印两种类型。它们的区别如下：

1. 明水印：明水印是通过在文本或图像上覆盖另一层图像或文字来实现的。这种水印会明显地出现在页面上，可以用来显示版权信息或其他相关信息。
2. 暗水印：暗水印是指在文本或图像中隐藏相关信息的一种技术。这种水印不会直接出现在页面上，只有在特殊的程序或工具下才能被检测到。暗水印通常用于保护敏感信息以及追踪网页内容的来源和版本。

0.导引

在正文开始前，先说说正则表达式是什么，为什么要用正则表达式？正则表达式在我个人看来就是一个程序可以识别的规则，有了这个规则，程序就可以帮我们判断某些字符是否符合我们的要求。但是，我们为什么要使用正则表达式呢？下面来看个正则业务场景，来验证一串字符是否为合法QQ号。示例如下：

/**
* 要求：一个合法的QQ号必须满足：1、5-15位；2、全是数字；3、不以0开头
*/

//1.在不使用正则表达式的时候，我们可能会这样判断QQ号的合法性
var qq="6666666a6666";         
if(qq.length>=5&&qq.length<=15&&!isNaN(qq)&&qq.charCodeAt(0)!=48){
        alert("QQ合法");
    }else{
        alert("QQ不合法")
    }
    
//2.使用正则表达式
    var qq="066336";
    var reg=/^[1-9][0-9]{4,14}$/;
    if(reg.test(qq)){
        alert("QQ合法");
    }else{
        alert("QQ不合法");
    }

当我们的项目开发完成之后通常要做一个演示网站，那么如何防止我们辛苦开发的网站被别人滥用呢？我们可以通过在网页上添加水印来注明所有人的信息，像下面这个样子。

那么如何添加水印呢，今天就来介绍三种比较常用的添加水印的方法。下面所有的网页都以若依的后台管理系统为例。

写在前面

看B站这个动画banner好几个版本了，不知道是一个月更新一次新版动画，还是多少天更新一次（没有天天去看，但估算是一月更新一版UI，以后注意观察）。刚看到的时候很感兴趣，不像视频素材或者gif素材，就放一个视频上去，或者放一个动态画上去，这个是根据鼠标动而一个小范围地有规律有弧度地动，很少看过。

　　继续上一篇文章扯蛋。请思考一个问题，上一篇文章那个公司信息列表，如果要查看某一公司的详细信息，要如何设计相关功能？请大家先思考一下。

　　常规做法——设计一个公司信息显示页面，例如：viewcompany.htm，显示公司信息时将公司编号作为url参数传过去，例如：viewcompany.htm?id=2，为方便用户操作，一般会在viewcompany.htm添加一个返回按钮，可以返回到公司信息列表页面。说说我的做法，设计一个通用信息显示窗（实际上是一个div弹出层），将相关信息在此窗体中显示。至于为什么要这么做文章末尾会分析两种做法的开销对比。先看效果（所有公司名称均为虚构，如有雷同实属巧合）：

在Vue3中，为页面添加水印通常涉及到自定义组件和CSS样式的使用。水印可以是文本、图像或者半透明的背景层，用于标识内容版权或所有权。下面我们将探讨几种在Vue3页面上添加水印的方法。

方法一：使用CSS伪元素