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

明水印和暗水印的区别

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

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伪元素

无聊打发时间，利用css简单写一个给网站文章内容的右上角添加一个原创标识；

用来提醒他人本篇为本站原创，转发文章时候请附转载地址。

首先，我们修改下方css类名“tx-box”改为你自己文章最外层盒子的类名，找不到可联系小编鹏仔帮你哦。

然后，修改background 的图片路径，图片大家自行下载（ps简单做了两个小图标，一个带白的阴影，一个不带，自行选择，psd忘记保存，也没什么需要修改），引入。

一个简单的新手引导流程的出现，不仅能让新手用户更快、更准确的适应产品的这些新变化，还将给用户留下良好的第一印象。一个好的新手引导流程可以让访客一眼明白如何开始、进行和结束产品的体验和交互流程。

写在前面

不管是老用户还是新用户，在发布新版本、有新功能上线、或是现有功能更新的场景下，都属于“新手用户”。

1.使用场景：

在公司做的小程序，主要是提供线上购物使用。在购物车列表上，有这样一个场景，即当客人把衣服加购后一段时间，该衣服可能库存紧缺或是下架了，这时，我们需要在购物车项中，告诉客人该衣服已经下架，而不是让他下单结算时，才发现缺货。

因此，我需要做一个功能 ，在购物车上显示缺货样式。比如象如下界面：

一、 input分类

根据显示效果将input分为五类

1. 文本框类：type值为text